/*
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.101
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;
}

/* Move Stripe overlay above footer nav */
iframe[name*="privateStripeFrame"] {
    bottom: 20vh !important;
}

.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: 1200px; /* 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, var(--border-color)); /* Gradient from transparent to border */
    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) */
/* The stream: posts, products and events in one feed (front-page.php, inc/stream.php) */
.stream-section {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 32px 0 8px;
    box-sizing: border-box;
}

.stream-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: left;
}

.stream-upcoming-title {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    color: var(--text-color-muted, var(--border-color));
}

.stream-upcoming {
    display: flex;
    gap: 8px;
    margin: 0 0 28px;
    padding: 2px 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.stream-upcoming::-webkit-scrollbar {
    display: none;
}

.stream-upcoming-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 190px;
    padding: 10px 14px 12px;
    box-sizing: border-box;
    border: 1px solid var(--border-color-subtle);
    border-radius: 14px;
    background: var(--another-shade);
    color: var(--text-color) !important;
    text-decoration: none;
    transition: border-color 0.18s ease;
}

.stream-upcoming-item:hover {
    border-color: var(--h1-color);
}

.stream-upcoming-date {
    font-size: 0.78rem;
    color: var(--h1-color);
}

.stream-upcoming-name {
    font-size: 0.9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stream-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 22px;
}

.stream-filter a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border-color-subtle);
    border-radius: 999px;
    color: var(--text-color);
    background: transparent;
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.stream-filter a:hover {
    border-color: var(--h1-color);
}

.stream-filter a {
    /* the colour chooser paints every link with !important; the chips carry their own colours */
    color: var(--text-color) !important;
}

.stream-filter a[aria-current] {
    background: var(--h1-color);
    border-color: var(--h1-color);
    color: var(--bg-color) !important;
}

.stream-filter a:focus-visible {
    outline: 2px solid var(--focus-color, var(--h1-color));
    outline-offset: 3px;
}

.stream-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--h1-color);
}

.stream-mark i {
    font-size: 1rem;
}

.stream-price {
    font-weight: 600;
    color: var(--text-color);
}

.stream-price del {
    font-weight: 400;
    opacity: 0.6;
    margin-right: 4px;
}

.stream-empty {
    margin: 24px 0;
    text-align: center;
}

/* no image: the type mark, large and faint, on the site ground */
.stream-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    color: var(--border-color-subtle);
}

.stream-placeholder i {
    font-size: 3.2rem;
}

/*
 * Colour mode (inc/color-mode.php)
 * html.light-mode / html.dark-mode is resolved before paint; the switch sits top-left.
 */
.rtcs-mode-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border: 1px solid var(--border-color-subtle) !important;
    border-radius: 50% !important;
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    cursor: pointer;
    font: inherit;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.rtcs-mode-toggle:hover,
.rtcs-mode-toggle:focus,
.rtcs-mode-toggle:active {
    transform: none;
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--h1-color) !important;
}

.rtcs-mode-toggle:focus-visible {
    outline: 2px solid var(--focus-color, var(--h1-color));
    outline-offset: 3px;
}

.rtcs-mode-toggle .rtcs-mode-icon {
    display: none;
    width: 19px;
    height: 19px;
}

html[data-mode-pref="system"] .rtcs-mode-icon-system,
html[data-mode-pref="light"] .rtcs-mode-icon-light,
html[data-mode-pref="dark"] .rtcs-mode-icon-dark,
html:not([data-mode-pref]) .rtcs-mode-icon-system {
    display: block;
}

/* a short crossfade while the mode changes, never on page load */
html.mode-switching,
html.mode-switching *,
html.mode-switching *::before,
html.mode-switching *::after {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, filter 0.35s ease !important;
}

/* photos keep their full brightness in the dark: they are the brightest thing on the page and lead */

@media (max-width: 768px) {
    .rtcs-mode-toggle {
        top: 10px;
        left: 10px;
        width: 34px;
        height: 34px;
    }

    .rtcs-mode-toggle .rtcs-mode-icon {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 600px) {
    .stream-filter {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .stream-filter::-webkit-scrollbar {
        display: none;
    }

    .stream-filter a {
        flex: 0 0 auto;
    }
}

/* 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); }
}

/* Custom Select (orderby) */
.custom-select-wrapper {
    position: relative;
    min-width: 160px;
}

.custom-select-display {
    padding: 10px 36px 10px 16px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-size: 0.9em;
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.custom-select-display:focus {
    outline: none;
    border-color: var(--link-color);
}

.custom-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.4;
    font-size: 0.6em;
    pointer-events: none;
}

.custom-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 3px;
}

.custom-select-dropdown.open {
    display: block;
}

.custom-select-option {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--text-color);
    transition: background-color 0.1s ease;
}

.custom-select-option:hover,
.custom-select-option.highlighted {
    background-color: var(--another-shade);
    color: var(--link-color);
}

.custom-select-option.selected {
    color: var(--link-color);
    font-weight: 500;
}


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

.single-featured-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.single-featured-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Media Showcase */
.post-media-showcase {
    margin-bottom: 0;
    width: 100%;
}

.post-media-main {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--media-bg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.post-media-main-item {
    display: none;
}

.post-media-main-item.active {
    display: block;
}

.post-media-main-item img {
    width: 100%;
    height: auto;
    display: block;
}

.post-media-main-item video,
.post-media-main-item .wp-block-video,
.post-media-main-item figure {
    max-width: 100%;
    margin: 0;
}

.post-media-main-item video {
    width: 100%;
    max-height: 500px;
    display: block;
}

/* Thumbnail strip */
.post-media-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.post-media-thumbnails::-webkit-scrollbar {
    height: 8px;
}
.post-media-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}
.post-media-thumbnails::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.post-media-thumbnails::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-muted, #999);
}

/* Prev/next arrows overlaid on the main image — click switches images */
.post-media-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, background 0.2s;
}
.post-media-arrow--prev {
    left: 12px;
}
.post-media-arrow--next {
    right: 12px;
}
.post-media-main:hover .post-media-arrow,
.post-media-main:focus-within .post-media-arrow {
    opacity: 1;
}
.post-media-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}
.post-media-arrow::before {
    content: '';
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.post-media-arrow--prev::before {
    transform: rotate(135deg);
    margin-left: 4px;
}
.post-media-arrow--next::before {
    transform: rotate(-45deg);
    margin-right: 4px;
}
@media (hover: none) {
    .post-media-arrow {
        opacity: 1;
    }
}

.post-media-thumb {
    flex: 0 0 160px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: none;
    opacity: 0.6;
    transition: opacity 0.3s, border-color 0.3s;
}

.post-media-thumb.active,
.post-media-thumb:hover {
    border-color: var(--focus-color);
    opacity: 1;
}

.post-media-thumb img,
.post-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.post-media-thumb--video {
    position: relative;
}

.post-media-thumb--video::after {
    content: '\25B6';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 1.2rem;
}

/* Audio thumbnail — no frame, show a centred music glyph */
.post-media-thumb--audio {
    position: relative;
    background: var(--border-color);
}
.post-media-thumb--audio::after {
    content: '\266B';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1.8rem;
}

/* Audio main item — centre the player on a calm panel */
.post-media-audio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 2rem 1rem;
    background: var(--media-bg);
}
.post-media-audio audio {
    width: 100%;
    max-width: 520px;
}

/* Global video overflow fix */
.single-site-main video,
.single-site-main .wp-block-video {
    max-width: 100%;
}

.single-site-main .wp-block-video video {
    width: 100%;
    height: auto;
}

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

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

.single-site-main {
    margin-top: 2rem;
    width: 100%;
}

.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) {
    .post-media-main-item img {
        width: 100%;
        height: auto;
    }
    .post-media-main-item video {
        max-height: 280px;
    }
    .post-media-thumb {
        flex: 0 0 120px;
        height: 68px;
    }
    .post-media-arrow {
        width: 38px;
        height: 38px;
    }
}

.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-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color, rgba(128,128,128,0.15));
}

.single-entry-title {
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.single-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.85rem;
    color: var(--text-color-muted, #999);
}

.single-entry-meta > span::before {
    content: '\00b7';
    margin: 0 0.4rem;
    opacity: 0.5;
}

.single-entry-meta > time + span::before,
.single-entry-meta > :first-child::before {
    content: none;
    margin: 0;
}

.single-entry-meta > time {
    margin-right: 0.25rem;
}

.single-entry-meta a {
    text-decoration: none;
    color: var(--link-color, inherit);
    transition: opacity 0.2s;
}

.single-entry-meta a:hover {
    text-decoration: underline;
}

/* --- Single Entry Content Typography --- */
.single-entry-content {
    text-align: justify;
    font-size: 1rem;
    line-height: 1.75;
}

.single-entry-content p {
    margin-bottom: 1.25em;
}

.single-entry-content h2,
.single-entry-content h3,
.single-entry-content h4 {
    margin-top: 2em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}

.single-entry-content img {
    border-radius: 6px;
    height: auto;
}

.single-entry-content blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 3px solid var(--primary-color, #888);
    background: var(--card-bg, rgba(128,128,128,0.05));
    border-radius: 0 6px 6px 0;
    font-style: italic;
}

.single-entry-content blockquote p:last-child {
    margin-bottom: 0;
}

.single-entry-content ul,
.single-entry-content ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.single-entry-content li {
    margin-bottom: 0.35em;
}

.single-entry-content pre {
    padding: 1em 1.25em;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.25em;
}

.single-entry-content hr {
    border: none;
    border-top: 1px solid var(--border-color, rgba(128,128,128,0.2));
    margin: 2em 0;
}

.single-entry-content a {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: opacity 0.2s;
}

.single-entry-content a:hover {
    text-decoration-style: solid;
}


/* BuddyPress Activity Meta */

.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 var(--border-color);
}

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

.activity-read-more a {
    background-color: var(--another-shade) !important;
    color: var(--link-color) !important;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
}

.activity-read-more a:hover {
    opacity: 0.85;
}

/* Post Navigation */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color, rgba(128,128,128,0.2));
}

.post-navigation a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.post-navigation a:hover {
    background: var(--card-bg, rgba(128,128,128,0.08));
}

.post-navigation .nav-next a {
    text-align: right;
    align-items: flex-end;
}

.single-nav-subtitle {
    display: block;
    font-size: 0.8rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.single-nav-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

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


/*
 * Blog Comments & Reviews
 * File: comments
 **********************/

#comments-outer {
    margin-top: 2rem;
    border-top: 1px solid var(--border-color, rgba(128,128,128,0.2));
    padding-top: 1.5rem;
}

#comments-outer #reviews h2,
#comments-outer #reply-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.comment-list,
.commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.comment-list .comment,
.commentlist .comment {
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-color, rgba(128,128,128,0.15));
    border-radius: 8px;
    background: var(--card-bg, rgba(128,128,128,0.04));
}

.comment-metadata a {
    font-size: 0.8rem;
    opacity: 0.6;
}

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

.comment-author .avatar {
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.children .comment {
    margin-top: 0.75rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--primary-color, #888);
}

.comment-reply-link {
    font-size: 0.8rem;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.comment-reply-link:hover {
    opacity: 1;
}

#respond {
    margin-top: 2rem;
}

.comment-notes {
    font-size: 0.85rem;
    opacity: 0.6;
    margin-bottom: 1rem;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 1rem;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, rgba(128,128,128,0.25));
    border-radius: 6px;
    background: var(--input-bg, rgba(255,255,255,0.06));
    color: inherit;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-url input:focus {
    border-color: var(--primary-color, #888);
    outline: none;
}

/* WooCommerce star rating in review form */
.comment-form-rating .stars a {
    font-size: 1.25rem;
}

/* Existing review stars */
.commentlist .star-rating {
    margin: 0.25rem 0 0.5rem;
}

/* 
 * 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 */
/* Widen the default page container when it holds an edit overview */
.default-page:has([class*="wf_edit_"][class*="_overview"]) {
    max-width: 1200px;
}

[class*="wf_edit_"][class*="_overview"] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Edit form popup: remove top gap */
.popup-contents-wf_product_edit,
.popup-contents-wf_event_edit {
    padding-top: 0 !important;
}

/* Close button: sticky at top right so it's always visible */
.popup-close-wf_product_edit,
.popup-close-wf_event_edit {
    position: sticky !important;
    top: 0;
    z-index: 10;
    text-align: right;
}

/* Standard form (edit product): full-width stacked layout */
.wf-standard-form .wf-label {
    width: 100% !important;
    float: none !important;
    margin-bottom: 5px;
}

.wf-standard-form .wf-input {
    width: 100% !important;
    float: none !important;
}

.wf-standard-form .wf-field,
.wf-standard-form .wf-form,
.wf-standard-form .wf-form-form,
.wf-standard-form fieldset.wf-fieldset {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.wf-standard-form .wf-input input[type="text"],
.wf-standard-form .wf-input input[type="number"],
.wf-standard-form .wf-input input[type="url"],
.wf-standard-form .wf-input textarea,
.wf-standard-form .wf-input select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (orientation: portrait) {
    .default-page:has([class*="wf_edit_"][class*="_overview"]) {
        max-width: 100%;
        padding: 5px;
    }

    [class*="wf_edit_"][class*="_overview"] {
        max-width: 100%;
    }

    .wf-image-gallery-container {
        max-width: 100% !important;
        overflow-x: auto;
    }
}

.wf-pagination-panel {
}

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

/* Progress form — styled buttons and no fieldset border */
.wf-progress-form fieldset.wf-fieldset {
    border: none !important;
}

.wf-progress-form .action-button,
.wf-progress-form .action-buttons button[type="button"],
.wf-progress-form .next,
.wf-progress-form .previous,
.wf-progress-form input[type="submit"] {
    background: var(--button-color) !important;
    color: var(--button-color-font) !important;
    border: 2px solid var(--button-color) !important;
    border-radius: 25px !important;
    padding: 10px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.wf-progress-form .action-button:hover,
.wf-progress-form .action-buttons button[type="button"]:hover,
.wf-progress-form .next:hover,
.wf-progress-form .previous:hover,
.wf-progress-form input[type="submit"]:hover {
    background: var(--button-color-hover, var(--button-color)) !important;
    border-color: var(--button-color-hover, var(--button-color)) !important;
    color: var(--button-color-font-hover, var(--button-color-font)) !important;
}

/* WordPress editor Visual/Code tabs in progress form */
.wf-progress-form .wp-switch-editor {
    background: var(--another-shade, var(--form-bg, #f1f1f1)) !important;
    color: var(--text-color, #333) !important;
    border: 1px solid var(--border-color, #ddd) !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.wf-progress-form .html-active .wp-switch-editor.switch-html,
.wf-progress-form .tmce-active .wp-switch-editor.switch-tmce {
    background: var(--button-color) !important;
    color: var(--button-color-font) !important;
}

/* TinyMCE toolbar buttons — reset to small icon size */
.wf-progress-form .mce-toolbar .mce-btn button {
    background: transparent !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 4px !important;
    font-size: inherit !important;
}

.wf-progress-form .mce-toolbar .mce-btn:hover button {
    background: var(--another-shade-dark, rgba(255,255,255,0.1)) !important;
}

.wf-progress-form .condition {
    background: transparent !important;
    color: var(--button-color) !important;
    border: 2px solid var(--button-color) !important;
    border-radius: 99em !important;
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.wf-progress-form .condition:hover {
    background: var(--button-color) !important;
    color: var(--button-color-font) !important;
}

.wf-progress-form .condition-active {
    background: var(--button-color) !important;
    color: var(--button-color-font) !important;
    border-color: var(--button-color) !important;
}


/*
 * Event Details
 */
.single-event-details {
    margin: 0 0 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border-color, rgba(128,128,128,0.15));
    border-left: 3px solid var(--primary-color, #007cba);
    background: var(--card-bg, rgba(128,128,128,0.04));
    border-radius: 0 8px 8px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 2rem;
}

.single-event-detail {
    font-size: 0.9rem;
    line-height: 1.5;
}

.single-event-detail strong {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.single-event-time {
    margin-left: 0.5em;
    opacity: 0.85;
}

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

/* Calendar month title — clickable hint */
.cec-current-date.cec-clickable {
    cursor: pointer;
    transition: color 0.2s ease;
}

.cec-current-date.cec-clickable:hover {
    color: var(--link-color) !important;
}

.cec-current-date.cec-clickable::after {
    content: ' \25BE';
    font-size: 0.7em;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.cec-current-date.cec-clickable:hover::after {
    opacity: 0.8;
}

/********************************************
 * 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;
}

/*-------------------------------------------
  Cover Image & Header Area
-------------------------------------------*/
#buddypress #cover-image-container {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

#buddypress #cover-image-container #header-cover-image {
    min-height: 300px;
    transition: min-height 0.3s ease;
}

#buddypress #cover-image-container.cover-expanded #header-cover-image {
    min-height: 80vh;
}

#buddypress #cover-image-container.cover-expanded::after {
    opacity: 0;
}

#buddypress #cover-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
    z-index: 1;
}

#buddypress #cover-image-container #item-header-cover-image #item-header-content {
    position: relative;
    z-index: 2;
}

#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: 8px;
    display: inline-block;
    max-width: fit-content;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

#buddypress #cover-image-container #item-header-cover-image #item-header-content .activity {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.4);
    color: #fff;
}

#buddypress #item-header-cover-image #item-header-avatar img.avatar {
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 4px 15px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

/*-------------------------------------------
  Navigation Tabs (Primary Nav — Pill Style)
-------------------------------------------*/
#buddypress nav.bp-navs,
.buddypress-wrap .bp-navs,
.buddypress-wrap .main-navs,
.buddypress-wrap .bp-subnavs,
.buddypress-wrap #subnav,
.buddypress-wrap .bp-navs.bp-subnavs,
#buddypress .item-list-tabs,
#buddypress .item-list-tabs ul {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

#buddypress #object-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 12px 0;
    margin: 0 auto;
    gap: 8px;
    background: transparent;
    border: none;
}

#buddypress #object-nav ul li {
    display: inline-flex;
}

#buddypress #object-nav ul li a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

#buddypress #object-nav ul li a .count {
    font-size: 0.75em;
    opacity: 0.5;
    margin-left: 4px;
}

/*-------------------------------------------
  Sub-Navigation (Subtle Underline Style)
-------------------------------------------*/
#buddypress #subnav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto 24px;
    gap: 20px;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.15)) !important;
    padding-bottom: 8px;
}

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

#buddypress #subnav ul li a {
    display: inline-block;
    padding: 6px 8px;
    text-decoration: none;
    font-size: 0.78em;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-radius: 0;
}

/*-------------------------------------------
  Profile Body Content Container
-------------------------------------------*/
#buddypress #item-body.members-body {
    border-radius: 16px;
    padding: 28px;
    margin: 0 auto 50px;
    max-width: 900px;
    background: transparent;
    border: none;
    box-shadow: none;
}

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

#buddypress .profile .bp-widget h4 {
    margin-bottom: 16px;
    font-size: 0.72em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
}

#buddypress .profile .bp-widget table.profile-fields {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
}

#buddypress .profile .bp-widget table.profile-fields tr {
    border-bottom: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

#buddypress .profile .bp-widget table.profile-fields tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.02);
}

#buddypress .profile .bp-widget table.profile-fields tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

#buddypress .profile .bp-widget table.profile-fields td {
    padding: 14px 16px;
    vertical-align: top;
    font-size: 0.93em;
}

#buddypress .profile .bp-widget table.profile-fields .label {
    font-weight: 400;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    width: 30%;
}

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

/*-------------------------------------------
  Profile Edit Form Fields
-------------------------------------------*/
#buddypress .editfield,
#buddypress .bp-profile-field {
    background: rgba(128, 128, 128, 0.06);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(128, 128, 128, 0.08);
}

#buddypress .editfield input[type="text"],
#buddypress .editfield input[type="email"],
#buddypress .editfield input[type="url"],
#buddypress .editfield input[type="number"],
#buddypress .editfield textarea,
#buddypress .editfield select,
#buddypress .settings-input {
    background: var(--form-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
}

/*-------------------------------------------
  TinyMCE / WP Editor in Profile
-------------------------------------------*/
#buddypress .wp-editor-wrap,
#buddypress .mce-tinymce {
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-radius: 6px;
    overflow: hidden;
}

#buddypress .mce-toolbar-grp,
#buddypress .wp-editor-tabs {
    background: rgba(128, 128, 128, 0.1) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

#buddypress .mce-toolbar-grp .mce-btn button {
    color: inherit !important;
}

/*-------------------------------------------
  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: 8px;
    padding: 10px 18px;
    margin-right: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

#buddypress a.button:hover,
#buddypress button:hover,
#buddypress input[type="submit"]:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

#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;
    background: var(--form-bg, var(--another-shade)) !important;
    color: var(--form-text, var(--text-color)) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-radius: 8px;
    padding: 10px 14px;
}
#buddypress #dir-groups-search-submit,
#buddypress #dir-members-search-submit,
#buddypress #dir-activity-search-submit {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--button-color, var(--link-color)) !important;
    border: none !important;
    border-radius: 8px;
    cursor: pointer;
}

#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 #cover-image-container #header-cover-image {
        min-height: 200px;
    }
    #buddypress #object-nav ul {
        padding: 6px;
        gap: 4px;
        border-radius: 12px;
    }
    #buddypress #object-nav ul li a {
        font-size: 0.8em;
        padding: 7px 12px;
        border-radius: 8px;
    }
    #buddypress #subnav ul {
        gap: 12px;
    }
    #buddypress #subnav ul li a {
        font-size: 0.75em;
        padding: 4px 2px;
    }
    #buddypress #item-body.members-body {
        padding: 16px;
        border-radius: 12px;
    }
    #buddypress .profile .bp-widget table.profile-fields td {
        padding: 10px 10px;
    }
    #buddypress .profile .bp-widget table.profile-fields .label {
        width: 40%;
    }
}

@media (orientation: portrait) {
    #buddypress .profile .bp-widget table.profile-fields,
    #buddypress .profile .bp-widget table.profile-fields tbody {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    #buddypress .profile .bp-widget table.profile-fields tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color, rgba(128,128,128,0.1));
    }

    #buddypress .profile .bp-widget table.profile-fields td {
        display: block;
        width: 100% !important;
        padding: 2px 10px !important;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    #buddypress .profile .bp-widget table.profile-fields .label {
        width: 100% !important;
        padding-bottom: 0 !important;
        font-size: 0.72em;
    }

    #buddypress .profile .bp-widget table.profile-fields .data {
        width: 100% !important;
        text-align: left !important;
    }

    #buddypress .profile .bp-widget table.profile-fields .data p {
        text-align: left !important;
    }

    #buddypress .profile .bp-widget {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
}

#buddypress li.selected {
    border: none;
    border-radius: 10px;
    box-shadow: none;
    background: transparent;
}

#buddypress #subnav ul li.current a,
#buddypress #subnav ul li.selected a,
#buddypress #subnav ul li a:focus {
    background: transparent !important;
}

#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;
}

/*-------------------------------------------
  Activity Stream Items — Card Style
-------------------------------------------*/
#buddypress .activity-list .activity-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(128, 128, 128, 0.12);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

#buddypress .activity-list .activity-item .activity-inner {
    background: rgba(128, 128, 128, 0.08);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 12px 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(128, 128, 128, 0.1);
}

#buddypress .activity-list .activity-item .activity-inner p {
    color: var(--text-color, #333) !important;
    font-size: 1.05em;
    line-height: 1.7;
}

#buddypress .activity-list .activity-item .activity-header {
    font-size: 0.82em;
    opacity: 0.7;
}

#buddypress .activity-list .activity-item .activity-header a {
    font-weight: 600;
}

/* Activity action buttons — use theme button font color for dark/light support */
#buddypress .activity-list .activity-item .activity-meta a {
    color: var(--button-color-font) !important;
}

#buddypress .activity-list .activity-item .activity-meta a span,
#buddypress .activity-list .activity-item .activity-meta a .count,
#buddypress .activity-list .activity-item .activity-meta a span.count {
    color: var(--button-color-font) !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#buddypress .activity-list .activity-item .activity-meta a::before {
    color: var(--button-color-font) !important;
}

/*-------------------------------------------
  Activity Comment & Post Textareas
-------------------------------------------*/
#buddypress .ac-reply-content,
#buddypress .activity-comments form {
    overflow: visible !important;
}

#buddypress textarea,
#buddypress .ac-reply-content textarea,
#buddypress .activity-comments textarea,
#buddypress #whats-new {
    background: var(--form-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#buddypress textarea:focus,
#buddypress .ac-reply-content textarea:focus,
#buddypress .activity-comments textarea:focus,
#buddypress #whats-new:focus {
    border-color: var(--focus-color, var(--primary-color)) !important;
    outline: none;
}

/*-------------------------------------------
  Messaging — Inbox & Conversation
-------------------------------------------*/

/* Message table cleanup */
#buddypress #message-threads {
    border-collapse: separate;
    border-spacing: 0 8px;
    width: 100%;
}

#buddypress #message-threads tr {
    background: rgba(128, 128, 128, 0.05);
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

#buddypress #message-threads tr:hover {
    background: rgba(128, 128, 128, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#buddypress #message-threads td {
    padding: 16px 14px;
    vertical-align: middle;
    border-top: 1px solid rgba(128, 128, 128, 0.08);
    border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

#buddypress #message-threads td:first-child {
    border-left: 1px solid rgba(128, 128, 128, 0.08);
    border-radius: 12px 0 0 12px;
}

#buddypress #message-threads td:last-child {
    border-right: 1px solid rgba(128, 128, 128, 0.08);
    border-radius: 0 12px 12px 0;
}

/* Thread avatar */
#buddypress #message-threads .thread-from img {
    border-radius: 50%;
    width: 44px;
    height: 44px;
}

/* Thread info */
#buddypress #message-threads .thread-info a {
    font-weight: 600;
    font-size: 0.95em;
}

#buddypress #message-threads .thread-excerpt {
    font-size: 0.84em;
    opacity: 0.6;
    margin-top: 4px;
}

#buddypress #message-threads .thread-date {
    font-size: 0.75em;
    opacity: 0.45;
    white-space: nowrap;
}

/* Info notice — the hint box */
#buddypress .bp-feedback,
#buddypress .bp-feedback.info,
#buddypress .bp-feedback.warning,
#buddypress .bp-feedback.updated,
#buddypress .bp-feedback.error,
.buddypress-wrap .bp-feedback,
.buddypress-wrap .bp-template-notice,
#cover-image-container .bp-feedback {
    background: var(--another-shade, rgba(128, 128, 128, 0.05)) !important;
    color: var(--text-color, inherit) !important;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.1)) !important;
    font-size: 0.82em;
    opacity: 0.6;
}

#buddypress .bp-feedback p,
.buddypress-wrap .bp-feedback p,
.buddypress-wrap .bp-template-notice p {
    color: var(--text-color, inherit) !important;
}

#buddypress p.warning,
#buddypress p.info,
#buddypress p.updated,
#buddypress p.error {
    background-color: var(--another-shade, rgba(128, 128, 128, 0.05)) !important;
    color: var(--text-color, inherit) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.1)) !important;
    border-radius: 10px;
    padding: 10px 15px;
}

/* Toolbar — "Alle Nachrichten", bulk actions, search */
#buddypress #message-threads-toolbar,
#buddypress .messages-options-nav,
#buddypress .bulk-actions-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 8px;
    font-size: 0.85em;
}

/* Search field in messages */
#buddypress .bp-messages-search-form,
#buddypress #messages-search {
    width: 100% !important;
    display: flex !important;
    gap: 0;
}

#buddypress .bp-messages-search-form input[type="search"],
#buddypress #messages-search input[type="text"] {
    flex: 1;
    background: var(--form-bg, var(--another-shade)) !important;
    color: var(--form-text, var(--text-color)) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-radius: 8px 0 0 8px;
    padding: 10px 14px;
}

#buddypress .bp-messages-search-form button[type="submit"],
#buddypress #messages-search input[type="submit"] {
    background: var(--button-color, var(--link-color)) !important;
    color: var(--button-color-font, #fff) !important;
    border: none !important;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    cursor: pointer;
}

#buddypress .bp-messages-search-form button[type="submit"]:hover,
#buddypress #messages-search input[type="submit"]:hover {
    background: var(--button-hover, var(--link-hover)) !important;
}

/* Active conversation — whole section */
#buddypress #message-thread {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--primary-color, rgba(128, 128, 128, 0.15));
}

#buddypress #message-thread > strong,
#buddypress #message-subject {
    font-size: 1.15em;
    font-weight: 700;
    display: block;
    margin-bottom: 16px;
}

/* Participants bar */
#buddypress .single-message-thread-header {
    background: rgba(128, 128, 128, 0.06);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(128, 128, 128, 0.08);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.88em;
}

/* Message bubbles in conversation */
#buddypress #bp-message-thread-list li {
    margin-bottom: 18px !important;
    padding: 0;
}

#buddypress #bp-message-thread-list .message-metadata {
    font-size: 0.76em;
    opacity: 0.5;
    margin-bottom: 6px;
    padding: 0 4px;
}

#buddypress #bp-message-thread-list .message-metadata a {
    font-weight: 600;
    opacity: 1;
}

#buddypress #bp-message-thread-list .message-content {
    font-size: 0.95em;
    line-height: 1.65;
    padding: 14px 18px;
    background: rgba(128, 128, 128, 0.07);
    border-radius: 4px 16px 16px 16px;
    border: 1px solid rgba(128, 128, 128, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Reply form at bottom */
#buddypress #send-reply {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

#buddypress #send-reply .message-content label {
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

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

/* --- WooCommerce Shop Page — Full-Width Layout --- */
.woocommerce .site-main,
.woocommerce-page .site-main,
.woocommerce .content-area,
.woocommerce-page .content-area,
.woocommerce main.site-main,
.woocommerce-page main.site-main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
  float: none !important;
}

/* Hide sidebar on shop/archive pages so products get full width */
.woocommerce #secondary,
.woocommerce-page #secondary,
.woocommerce .widget-area,
.woocommerce-page .widget-area,
.woocommerce aside.sidebar,
.woocommerce-page aside.sidebar {
  display: none;
}

/* Ensure WooCommerce before-shop-loop elements don't interfere */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  float: none !important;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1rem;
}

/* Hide native select when custom-select is present */
.woocommerce-ordering .custom-select-wrapper ~ select.orderby {
  display: none !important;
}

/* Notices wrapper should not interfere with grid */
.woocommerce .woocommerce-notices-wrapper {
  clear: both;
  width: 100%;
}

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

/* --- 1. Consistent Grid Layout --- */
.posts-container,
.woocommerce ul.products,
.woocommerce-page ul.products,
.card-products-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Ensure WooCommerce grid fills full container width */
.woocommerce ul.products,
.woocommerce-page ul.products {
  width: 100% !important;
  box-sizing: border-box;
}

/* Non-product children (spinners, notices) must not occupy grid cells */
.woocommerce ul.products > *:not(li.product) {
  display: none !important;
}

/* Ensure first product is always visible */
.woocommerce ul.products > li.product:first-of-type {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Remove WooCommerce clearfix pseudo-elements — they become grid items */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
  content: none !important;
}

/* --- 2. Card Styling --- */
.posts-container .post-item,
.woocommerce ul.products li.product,
.card-products-container .card-product {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px var(--shadow-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Default entry header/summary for non-card contexts */
.woocommerce .entry-header,
.woocommerce .entry-summary {
  padding: 10px 0 20px 10px;
  width: calc(100% - 20px);
  text-align: center;
  margin-bottom: 10px;
}

.posts-container .post-item:hover,
.woocommerce ul.products li.product:hover,
.card-products-container .card-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px var(--shadow-color-hover);
}

/* --- 3. Image Area --- */
.posts-container .post-item .post-thumbnail,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.card-products-container .card-product-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.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%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Missing image placeholder */
.product-thumbnail-wrapper:empty {
  height: 220px;
  background: linear-gradient(135deg, var(--border-color) 0%, var(--shadow-color) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-thumbnail-wrapper:empty::before {
  content: "\1F4F7";
  font-size: 3rem;
  opacity: 0.3;
}

/* --- 4. Content Area --- */
.posts-container .post-item .post-content,
.woocommerce ul.products li.product .product-details,
.card-products-container .card-product-content {
  flex: 1;
  padding: 1rem;
  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;
  flex: 1;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.posts-container .post-item a.post-card-link .entry-header {
  padding: 1rem 1rem 0;
}

.posts-container .post-item a.post-card-link .entry-header .entry-title {
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.posts-container .post-item a.post-card-link .entry-meta {
  padding: 0.25rem 1rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-color-muted, #888);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.posts-container .post-item a.post-card-link .post-thumbnail {
  height: 220px;
  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%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.posts-container .post-item a.post-card-link .entry-summary {
  padding: 1rem;
  text-align: left;
  height: auto;
  width: auto;
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 6em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.posts-container .post-item a.post-card-link .read-more-btn {
  display: inline-block;
  background: var(--button-color, var(--primary-color));
  color: var(--button-text-color, #fff);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 1rem 1rem;
  transition: background 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.posts-container .post-item:hover .read-more-btn {
  background: var(--button-color-hover, var(--primary-color));
}

/* --- 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 0.5rem;
  text-align: center;
}

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

/* Product titles: allow 2-line wrap with ellipsis */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  line-height: 1.4;
}

.woocommerce ul.products li.product .price {
  font-weight: bold;
  margin-bottom: 0.75rem;
  text-align: center;
  color: var(--link-color) !important;
  font-size: 1.05rem;
}
.woocommerce ul.products li.product .price del {
  color: var(--text-color) !important;
  opacity: 0.5;
  font-weight: 400;
  font-size: 0.9rem;
  margin-right: 0.25rem;
}
.woocommerce ul.products li.product .price ins {
  color: var(--link-color) !important;
  text-decoration: none;
  font-weight: 700;
}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .amount {
  color: inherit !important;
}
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins .amount {
  color: inherit !important;
}

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

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

.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(2, 1fr);
  }
}

@media (max-width: 600px) {
  .posts-container,
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .card-products-container {
    grid-template-columns: 1fr;
  }

  .posts-container .post-item .post-thumbnail,
  .woocommerce ul.products li.product .woocommerce-loop-product__link,
  .woocommerce ul.products li.product .product-card-link .product-thumbnail-wrapper,
  .card-products-container .card-product-image,
  .product-thumbnail-wrapper:empty,
  .posts-container .post-item a.post-card-link .post-thumbnail {
    height: 180px;
  }
}

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

/* Hide WooCommerce default product link/title that duplicates our template */
.woocommerce ul.products li.product > a:not(.product-card-link):not(.button) {
  display: none !important;
}
.woocommerce ul.products li.product > .woocommerce-loop-product__title {
  display: none !important;
}
.woocommerce ul.products li.product > .price {
  display: none !important;
}

/* Product card link — fills card above button */
.woocommerce ul.products li.product .product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Product title above image — reserve 2 lines */
.woocommerce ul.products li.product .product-card-link .woocommerce-loop-product__title {
  padding: 1rem 1rem 0;
  margin: 0;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Product price above image */
.woocommerce ul.products li.product .product-card-link .price {
  padding: 0.25rem 1rem 0.75rem;
}

/* Product thumbnail */
.woocommerce ul.products li.product .product-card-link .product-thumbnail-wrapper {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.woocommerce ul.products li.product .product-card-link .product-thumbnail-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Sale badge */
.woocommerce ul.products li.product .product-card-link .onsale,
.woocommerce span.onsale,
span.onsale {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background: var(--button-color, var(--link-color, #2b7a6d)) !important;
  color: var(--button-color-font, #fff) !important;
  border-radius: 4px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
  min-height: auto;
  min-width: auto;
}

/* Product excerpt — reserve 4 lines */
.woocommerce ul.products li.product .product-excerpt {
  padding: 0.75rem 1rem 0;
  font-size: 0.875rem;
  color: var(--text-color-muted, #888);
  line-height: 1.5;
  min-height: 6em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

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

/* Product button container */
.woocommerce ul.products li.product .product-button {
  margin-top: auto;
  padding: 0.5rem 1rem 1rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* Product button styling */
.woocommerce ul.products li.product .product-button a.button,
.woocommerce ul.products li.product .product-button .button {
  display: inline-block;
  width: 100%;
  padding: 10px 15px;
  font-weight: bold;
  border-radius: 6px;
  transition: all 0.3s ease;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
}

.product-button a.woocommerce-LoopProduct-link {
  display: none !important;
}

/* Product info area */
.woocommerce .product-info {
  margin-bottom: 0;
  overflow: hidden;
}

/* Single product page description */
.woocommerce .product .woocommerce-product-details__short-description {
  overflow: hidden;
  max-height: 150px;
}
.woocommerce .product .cart {
  margin-top: 50px !important;
}

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

/* Constrain single product page to match post width */
body.single-product div.product {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Product page: full-width summary below media showcase */
body.single-product .post-media-showcase {
    margin-bottom: 0;
}
body.single-product div.product div.summary {
    float: none;
    width: 100%;
    clear: both;
}
body.single-product div.product div.images {
    display: none;
}

/* --- Single Product Summary Styling --- */
body.single-product div.product div.summary .product_title {
    display: none;
}

body.single-product div.product div.summary .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--link-color) !important;
    margin-bottom: 1.25rem;
    display: block;
}

body.single-product div.product div.summary .price del {
    color: var(--text-color) !important;
    opacity: 0.5;
    font-weight: 400;
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

body.single-product div.product div.summary .price ins {
    text-decoration: none;
    color: var(--link-color) !important;
}

body.single-product div.product div.summary .woocommerce-product-details__short-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color-muted, #666);
    margin-bottom: 1.5rem;
}

body.single-product div.product div.summary .woocommerce-product-rating {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Add to cart form */
body.single-product div.product div.summary form.cart {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color, #e5e5e5);
    border-bottom: 1px solid var(--border-color, #e5e5e5);
}

body.single-product div.product div.summary form.cart .quantity .qty,
body.single-product .quantity .qty,
.woocommerce .quantity .qty {
    width: 70px;
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--border-color, #555);
    border-radius: 6px;
    text-align: center;
    font-size: 1rem;
    background: var(--form-bg) !important;
    color: var(--form-text) !important;
}

body.single-product div.product div.summary form.cart .single_add_to_cart_button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

body.single-product div.product div.summary form.cart .single_add_to_cart_button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Product meta (SKU, categories, tags) */
body.single-product div.product div.summary .product_meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, rgba(128,128,128,0.15));
    font-size: 0.8rem;
    color: var(--text-color-muted, #888);
    line-height: 2;
}

body.single-product div.product div.summary .product_meta > span {
    display: block;
}

body.single-product div.product div.summary .product_meta a {
    color: var(--link-color, var(--primary-color));
    text-decoration: none;
}

body.single-product div.product div.summary .product_meta a:hover {
    text-decoration: underline;
}

/* Separate the tabs from the upper content */
body.single-product div.product .woocommerce-tabs {
    clear: both;
    padding-top: 2rem !important;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color, rgba(128,128,128,0.15));
}

body.single-product div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border-color, rgba(128,128,128,0.15));
}

body.single-product div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
}

body.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-color-muted, #888);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

body.single-product div.product .woocommerce-tabs ul.tabs li.active a {
    color: inherit;
    border-bottom-color: var(--primary-color, #888);
}


/* 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 var(--border-color) !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 var(--border-color) !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;
}


/* BuddyPress dark mode — password strength, textareas, action buttons */

#pass-strength-result {
    background-color: var(--form-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

#buddypress .activity-list .activity-item .activity-meta a {
    color: var(--button-color-font) !important;
}

#buddypress .activity-list .activity-item .activity-meta a span,
#buddypress .activity-list .activity-item .activity-meta a .count,
#buddypress .activity-list .activity-item .activity-meta a span.count {
    color: var(--button-color-font) !important;
}

#buddypress .activity-list .activity-item .activity-meta a::before {
    color: var(--button-color-font) !important;
}

#buddypress .ac-input,
#buddypress .ac-textarea textarea {
    background-color: var(--form-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

#buddypress .ac-textarea textarea::placeholder {
    color: var(--text-color) !important;
    opacity: 0.5;
}

/* Notification/Hint Box Styling Improvements */

/* Target the notification/hint box */
.notification-box,
.info-box {
    background-color: var(--notification-bg) !important;
    color: var(--notification-text) !important;
    border: 1px solid var(--notification-border) !important;
    border-left: 4px solid var(--notification-border) !important;
    border-radius: 4px !important;
    padding: 15px 20px !important;
    box-shadow: 0 2px 5px var(--shadow-color) !important;
    margin: 15px 0 !important;
}

.info-box *,
.notification-box * {
    color: var(--notification-text) !important;
    font-weight: 500 !important;
    line-height: 1.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;
    }
}

/* ==========================================================================
   WooCommerce Dark Theme Integration
   Cart, Checkout, Notices, Tables, Forms
   ========================================================================== */

/* --- Notices (messages, info, errors) --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-top: 3px solid var(--border-color, rgba(128, 128, 128, 0.4)) !important;
}

.woocommerce-message::before {
    color: var(--accent-color, #4CAF50) !important;
}

.woocommerce-info::before {
    color: var(--accent-color, #2196F3) !important;
}

.woocommerce-error::before {
    color: #ff4444 !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: var(--link-color, inherit) !important;
}

/* --- Cart Table --- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
    background-color: transparent !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    background-color: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

.woocommerce table.shop_table thead th {
    background-color: var(--bg-color-dark, rgba(0, 0, 0, 0.2)) !important;
    color: var(--text-color, #e0e0e0) !important;
}

.woocommerce table.shop_table .product-name a {
    color: var(--link-color, inherit) !important;
}

.woocommerce table.shop_table .product-remove a {
    color: #ff4444 !important;
}

/* --- Cart Totals --- */
.woocommerce .cart_totals,
.woocommerce-page .cart_totals {
    background-color: transparent !important;
}

.woocommerce .cart_totals h2,
.woocommerce .cart_totals table {
    color: var(--text-color, #e0e0e0) !important;
}

.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    background-color: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

/* --- Coupon Input --- */
.woocommerce .coupon input.input-text,
.woocommerce #coupon_code {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

/* --- Quantity Input --- */
.woocommerce .quantity .qty,
.woocommerce input[type="number"].qty {
    background-color: var(--form-bg) !important;
    color: var(--form-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* --- Checkout Form Fields --- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout #payment .form-row input.input-text,
.woocommerce-checkout #payment .form-row textarea,
.woocommerce-checkout #payment .form-row select,
#billing_country,
#shipping_country,
.select2-container--default .select2-selection--single {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color, #e0e0e0) !important;
}

.select2-container--default .select2-results__option {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--border-color, rgba(128, 128, 128, 0.3)) !important;
}

.select2-dropdown {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: var(--bg-color, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

/* --- Checkout Labels & Headings --- */
.woocommerce form .form-row label {
    color: var(--text-color, #e0e0e0) !important;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    color: var(--text-color, #e0e0e0) !important;
}

/* --- Payment Box --- */
.woocommerce-checkout #payment {
    background-color: var(--bg-color-dark, rgba(0, 0, 0, 0.2)) !important;
    border-radius: 8px;
}

.woocommerce-checkout #payment div.payment_box {
    background-color: var(--bg-color, rgba(0, 0, 0, 0.15)) !important;
    color: var(--text-color, #e0e0e0) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    border-bottom-color: var(--bg-color, rgba(0, 0, 0, 0.15)) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    color: var(--text-color, #e0e0e0) !important;
}

/* --- Buttons --- */
.woocommerce .button.wc-forward,
.woocommerce .actions .button,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce #place_order {
    background-color: var(--accent-color, #4db6ac) !important;
    color: var(--bg-color-dark, #1a1a2e) !important;
    border: none !important;
    border-radius: 6px !important;
}

.woocommerce .button.wc-forward:hover,
.woocommerce .actions .button:hover,
.woocommerce .cart .button:hover,
.woocommerce .checkout-button:hover,
.woocommerce #place_order:hover {
    opacity: 0.9;
}

/* --- Order Details / Thank You Page --- */
.woocommerce-order-details table,
.woocommerce-table--order-details {
    background-color: transparent !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

.woocommerce-order-details th,
.woocommerce-order-details td {
    background-color: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

/* --- My Account Page --- */
.woocommerce-MyAccount-navigation ul li a {
    color: var(--text-color, #e0e0e0) !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--accent-color, #4db6ac) !important;
}

.woocommerce-MyAccount-content table {
    background-color: transparent !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.25)) !important;
}

.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
    background-color: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128, 128, 128, 0.2)) !important;
}

/* Portrait mode: consistent 5px gap between cards/content and screen edges */
@media (orientation: portrait) {
    .posts-container,
    .card-products-container,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        padding-left: 5px !important;
        padding-right: 5px !important;
        width: calc(100% - 10px) !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: content-box !important;
    }

    .single-content-area,
    .content-area {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Remove grid padding when already inside a padded container */
    .content-area .posts-container,
    .content-area .woocommerce ul.products,
    .content-area .woocommerce-page ul.products,
    .content-area .card-products-container,
    .woocommerce .site-main ul.products,
    .woocommerce-page .site-main ul.products {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .woocommerce .site-main,
    .woocommerce-page .site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .default-page {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .front-page-content-wrapper {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #buddypress {
        padding-left: 5px !important;
        padding-right: 5px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Center avatar on portrait */
    #buddypress #item-header-avatar {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #buddypress #item-header-avatar a,
    #buddypress #item-header-avatar img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    #buddypress #item-header-content {
        text-align: center !important;
    }

    #buddypress ul.bp-list,
    #buddypress ul.activity-list,
    #buddypress ul.item-list,
    #buddypress #item-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #buddypress .activity-list .activity-item {
        padding: 12px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #buddypress .activity-list .activity-item .activity-inner {
        padding: 12px 10px !important;
    }
}

/* WooMerchants billing toggle — subscription monthly/yearly buttons */
/* Woo-Merchants Stripe Connect notice */
.wm-stripe-notice {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-color);
}

.wm-stripe-notice-logo {
    flex-shrink: 0;
}

.wm-stripe-notice-text {
    color: var(--text-color);
}

.wm-stripe-notice-text span {
    opacity: 0.7;
}

.wm-billing-toggle {
    margin: 15px 0 !important;
}
.wm-billing-option {
    flex: 1;
    padding: 14px 12px !important;
    border: 2px solid var(--border-color, rgba(128,128,128,0.25)) !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}
.wm-billing-option:hover {
    opacity: 0.85;
    border-color: var(--button-color, #007cba) !important;
}
.wm-billing-option.wm-billing-active {
    border-color: var(--button-color, #007cba) !important;
    background: var(--button-color, #007cba) !important;
    color: var(--button-color-font, #fff) !important;
    opacity: 1;
}
.wm-billing-option.wm-billing-active strong {
    color: inherit !important;
}

/* Woo-Merchants assign shipping class / warehouse tables (in popups) */
.wm-assign-shipping-class-table,
.wm-assign-warehouse-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
.wm-assign-shipping-class-table th,
.wm-assign-warehouse-table th {
    width: 60%;
    text-align: left;
    padding: 8px 15px 8px 0;
    color: var(--text-color, #e0e0e0) !important;
    font-weight: 600;
    word-wrap: break-word;
}
.wm-assign-shipping-class-table td,
.wm-assign-warehouse-table td {
    width: 40%;
    padding: 8px 0;
}
/* Override plugin's negative offset that pushes selects over labels */
.wm-assign-shipping-class-table select,
.wm-assign-warehouse-table select {
    position: static !important;
    right: auto !important;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-radius: 4px;
}
.wm-assign-shipping-class-table select option,
.wm-assign-warehouse-table select option {
    background-color: var(--bg-color-dark, #1a1a2e);
    color: var(--text-color, #e0e0e0);
}

/* Woo-Merchants new shipping class / warehouse form (in popup) */
.wm-shipping-class-table,
.wm-new-warehouse-form table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px;
}
.wm-shipping-class-table th,
.wm-shipping-class-table td,
.wm-new-warehouse-form table th,
.wm-new-warehouse-form table td {
    background-color: transparent !important;
    color: var(--text-color, #e0e0e0) !important;
    padding: 8px !important;
}
.wm-shipping-class-table th:hover,
.wm-shipping-class-table td:hover {
    background-color: transparent !important;
}
/* Column header row (Min pcs, National Shipping, European Shipping) */
.wm-shipping-class-table tr:nth-child(2) th {
    text-align: center;
    font-weight: 600;
    font-size: 0.9em;
    opacity: 0.85;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    padding-bottom: 10px !important;
}
/* Inputs inside the form */
.wm-shipping-class-table input[type="text"],
.wm-shipping-class-table input[type="number"],
.wm-new-warehouse-form input[type="text"],
.wm-new-warehouse-form input[type="number"] {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    box-sizing: border-box;
}
.wm-shipping-class-table input[type="text"]::placeholder,
.wm-shipping-class-table input[type="number"]::placeholder {
    color: var(--text-color, #e0e0e0);
    opacity: 0.5;
}
/* Class name input in the first row should look like a regular input */
.wm-shipping-class-table tr:first-child input[name="wm_shipping_class_name"] {
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.25)) !important;
    font-weight: 600;
}
/* "Add Line" action: render as a small link-style button, not a heading */
.wm-shipping-class-actions {
    text-align: right;
}
.wm-class-add-line {
    display: inline-block;
    font-size: 0.9em;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--accent-color, #4db6ac) !important;
    border: 1px solid var(--accent-color, #4db6ac);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    line-height: 1 !important;
    text-align: center !important;
}
.wm-class-add-line:hover {
    background: var(--accent-color, #4db6ac);
    color: var(--bg-color-dark, #1a1a2e) !important;
}
/* Save button — match the themed button look */
.wm-shipping-class-save {
    background-color: var(--accent-color, #4db6ac) !important;
    color: var(--bg-color-dark, #1a1a2e) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-weight: 600;
    cursor: pointer;
}
.wm-shipping-class-save:hover {
    opacity: 0.9;
}

/* Woo-Merchants Invoice Management */
.wm-invoice-management {
    color: var(--text-color, #e0e0e0);
}

.wm-invoice-toggle-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wm-toggle-label {
    color: var(--text-color, #e0e0e0);
}

.wm-toggle-slider {
    background-color: var(--border-color, rgba(128,128,128,0.4)) !important;
}

input:checked + .wm-toggle-slider {
    background-color: var(--button-color, #007cba) !important;
}

.wm-invoice-settings label {
    color: var(--text-color, #e0e0e0);
    font-weight: 600;
}

.wm-invoice-settings input[type="text"],
.wm-invoice-settings textarea {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128,128,128,0.25)) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    box-sizing: border-box;
}

.wm-invoice-field-desc {
    color: var(--text-color-muted, rgba(255,255,255,0.5)) !important;
    font-size: 0.8em;
}

.wm-invoice-notice-info {
    background-color: rgba(33,150,243,0.1) !important;
    border-color: rgba(33,150,243,0.25) !important;
    color: var(--text-color, #e0e0e0) !important;
}

.wm-invoice-list h4 {
    color: var(--text-color, #e0e0e0);
}

.wm-invoice-table {
    border-collapse: collapse;
    width: 100%;
}

.wm-invoice-table th {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128,128,128,0.25)) !important;
    font-weight: 600;
}

.wm-invoice-table td {
    color: var(--text-color, #e0e0e0) !important;
    border-color: var(--border-color, rgba(128,128,128,0.25)) !important;
    background-color: transparent;
}

.wm-invoice-table tr:nth-child(even) td {
    background-color: var(--another-shade-dark, rgba(255,255,255,0.03));
}

.wm-invoice-table .button {
    background-color: var(--accent-color, #4db6ac) !important;
    color: var(--bg-color-dark, #1a1a2e) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-invoice-table .button:hover {
    opacity: 0.9;
}

.wm-invoice-bulk-operations {
    background-color: var(--accent-color, #4db6ac) !important;
    color: var(--bg-color-dark, #1a1a2e) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-invoice-bulk-operations:hover {
    opacity: 0.9;
}

.wm-invoice-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wm-bulk-download-controls select {
    background-color: var(--bg-color-dark, #1a1a2e) !important;
    color: var(--text-color, #e0e0e0) !important;
    border: 1px solid var(--border-color, rgba(128,128,128,0.25)) !important;
    border-radius: 6px !important;
    padding: 6px 8px;
}

.wm-bulk-download-controls select option {
    background-color: var(--bg-color-dark, #1a1a2e);
    color: var(--text-color, #e0e0e0);
}

.wm-bulk-download-btn {
    background-color: var(--accent-color, #4db6ac) !important;
    color: var(--bg-color-dark, #1a1a2e) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-bulk-download-btn:hover {
    opacity: 0.9;
}

.invoice-status {
    font-weight: 600;
    border-radius: 4px !important;
}

.invoice-status-draft {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
}

.invoice-status-sent {
    background-color: rgba(40, 167, 69, 0.15) !important;
    color: #66bb6a !important;
}

.invoice-status-paid {
    background-color: rgba(0, 188, 212, 0.15) !important;
    color: #4dd0e1 !important;
}


/* Post 2 WordPress — form file/image uploader visibility on light/dark schemes */
body .wf-file-upload-dropzone,
body .wf-multi-file-uploader-btn {
    border-color: var(--border-color) !important;
}
body .wf-file-upload-dropzone,
body .wf-file-upload-dropzone i,
body .wf-file-upload-dropzone span,
body .wf-file-upload-dropzone .wf-upload-max-size,
body .wf-upload-plus {
    color: var(--text-color-muted, #999) !important;
}

/*
 * DARK MODE LAYER
 * Applies when inc/color-mode.php has resolved html.dark-mode. Everything is derived from the
 * site's own Customizer tokens, so it holds for every site: surfaces step lighter the closer they
 * are, the accent (--h1-color) marks price, sale, active and hover, muted text and edges are lifted
 * to WCAG 2.2 AA (4.5:1 text, 3:1 UI), and the far mountain range takes a hint of the site colour.
 */

:root {
    --text-color-muted: color-mix(in srgb, var(--text-color) 68%, var(--bg-color));
    --ui-edge: var(--border-color);
}

html.dark-mode {
    --text-color-muted: color-mix(in srgb, var(--text-color) 80%, var(--bg-color));
    --ui-edge: color-mix(in srgb, var(--text-color) 46%, var(--another-shade));
    --shadow-color: rgba(0, 0, 0, 0.45);
    --shadow-color-hover: rgba(0, 0, 0, 0.6);
}

/* surfaces: the card stays close to the page and is defined by a hairline, so the photo is the brightest thing on it */
html.dark-mode .posts-container .post-item,
html.dark-mode .woocommerce ul.products li.product,
html.dark-mode .card-products-container .card-product {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-color) 14%, transparent), 0 10px 28px var(--shadow-color);
}

html.dark-mode .posts-container .post-item:hover,
html.dark-mode .woocommerce ul.products li.product:hover,
html.dark-mode .card-products-container .card-product:hover {
    box-shadow: inset 0 0 0 1px var(--h1-color), 0 14px 34px var(--shadow-color-hover);
}

/* content forward: photos in a soft frame, undimmed on hover (see the dark-mode image rule above) */
html.dark-mode .posts-container .post-item .post-thumbnail,
html.dark-mode .woocommerce ul.products li.product .product-thumbnail-wrapper {
    background: var(--bg-color);
}

/* the price and the sale mark carry the accent; the old price is muted, not faded */
html.dark-mode .woocommerce ul.products li.product .price,
html.dark-mode .woocommerce ul.products li.product .price ins,
html.dark-mode .stream-price,
html.dark-mode body.single-product div.product div.summary .price {
    color: var(--h1-color) !important;
}

.woocommerce ul.products li.product .price del,
.stream-price del,
body.single-product div.product div.summary .price del {
    opacity: 1;
    color: var(--text-color-muted) !important;
}

.woocommerce ul.products li.product .product-card-link .onsale,
.woocommerce span.onsale,
span.onsale {
    background: var(--h1-color) !important;
    color: var(--bg-color) !important;
}

/* the primary action answers with the accent */
html.dark-mode .posts-container .post-item:hover .read-more-btn,
html.dark-mode .woocommerce ul.products li.product .button:hover,
html.dark-mode .woocommerce ul.products li.product .button:focus-visible,
html.dark-mode .add_to_cart_button:hover,
html.dark-mode .add_to_cart_button:focus-visible {
    background: var(--h1-color) !important;
    color: var(--bg-color) !important;
}

/* edges that must read as edges: 3:1 against their ground */
html.dark-mode footer #menu-main li a > i,
html.dark-mode footer #menu-main li a > img.custom-nav-icon,
html.dark-mode footer #menu-item-home a svg,
html.dark-mode .circle-nav .circle-menu-item > a > i,
html.dark-mode .circle-nav .circle-menu-item > a > img,
html.dark-mode .circle-nav-toggle,
html.dark-mode .rtcs-mode-toggle,
html.dark-mode .stream-filter a,
html.dark-mode .stream-upcoming-item,
html.dark-mode .wm-floating-cart,
html.dark-mode .rtcs-custom-select,
html.dark-mode .custom-select-trigger {
    border-color: var(--ui-edge) !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select,
html.dark-mode .wf-form-form select {
    border-color: var(--ui-edge) !important;
}

/* the current page glows a little */
html.dark-mode footer #menu-main > li.current-menu-item > a > i,
html.dark-mode footer #menu-item-home.current-menu-item a svg,
html.dark-mode .circle-nav .circle-menu-item.current-menu-item > a > i,
html.dark-mode .circle-nav .circle-menu-item.current-menu-item > a > img,
html.dark-mode .stream-filter a[aria-current] {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--h1-color) 22%, transparent);
}

/* the horizon takes the site colour: a moonlit far range, the crest in the same tone */
html.dark-mode .ridge-far {
    background: color-mix(in srgb, var(--another-shade) 82%, var(--h1-color));
}

html.dark-mode .ridge-nav::before {
    background: color-mix(in srgb, var(--another-shade) 60%, var(--h1-color));
}

html.dark-mode .circle-nav-arc path {
    opacity: 0.7;
}

html.dark-mode .site-header::after {
    background: linear-gradient(to right, transparent, var(--h1-color));
}

/* links inside body copy keep the accent, links that are cards keep the text colour */
html.dark-mode .single-entry-content a,
html.dark-mode .entry-summary a {
    color: var(--h1-color) !important;
}

/* cards step only a little up from the page; the photo, not the card, carries the contrast */
html.dark-mode .posts-container .post-item,
html.dark-mode .woocommerce ul.products li.product,
html.dark-mode .card-products-container .card-product {
    background-color: color-mix(in srgb, var(--another-shade) 55%, var(--bg-color)) !important;
}

/* WooCommerce's own grey (#767676) fails on the dark ground */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a,
.woocommerce-result-count {
    color: var(--text-color-muted) !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--h1-color) !important;
}

/*
 * LIGHT MODE LAYER
 * The generator proves heading and link colours against the page, but cards sit on the
 * darker --another-shade. On cards the title and price lean a little toward the text colour,
 * muted text and edges are lifted the same way as in the dark, so AA holds on both grounds.
 */
html.light-mode {
    --text-color-muted: color-mix(in srgb, var(--text-color) 78%, var(--bg-color));
    --ui-edge: color-mix(in srgb, var(--text-color) 60%, var(--another-shade));
}

html.light-mode .posts-container .post-item a.post-card-link .entry-header .entry-title,
html.light-mode .woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: color-mix(in srgb, var(--h2-color) 82%, var(--text-color)) !important;
}

html.light-mode .woocommerce ul.products li.product .price,
html.light-mode .woocommerce ul.products li.product .price ins,
html.light-mode .stream-price {
    color: color-mix(in srgb, var(--h1-color) 82%, var(--text-color)) !important;
}

html.light-mode footer #menu-main li a > i,
html.light-mode footer #menu-main li a > img.custom-nav-icon,
html.light-mode footer #menu-item-home a svg,
html.light-mode .circle-nav .circle-menu-item > a > i,
html.light-mode .circle-nav .circle-menu-item > a > img,
html.light-mode .circle-nav-toggle,
html.light-mode .rtcs-mode-toggle,
html.light-mode .stream-filter a,
html.light-mode .stream-upcoming-item,
html.light-mode .wm-floating-cart {
    border-color: var(--ui-edge) !important;
}

/* Back to top (t2158, assets/js/back-to-top.js). Bottom left: the bottom
   right holds the circle nav (footer2), the floating cart and the create
   FAB. With the ridge footer (footer1) it rises above the ridge band.
   An ink disc in the theme's text colour on its background colour, so it
   follows the colour chooser in light and dark. */
.rt-to-top {
    position: fixed;
    left: max(20px, env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--bg-color, #ffffff) 30%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-color, #1f1f1f) 90%, transparent);
    color: var(--bg-color, #ffffff);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.25s;
}

.rt-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.rt-to-top:hover {
    transform: translateY(-2px);
}

.rt-to-top:active {
    transform: translateY(0) scale(0.96);
}

.rt-to-top:focus-visible {
    outline: 3px solid var(--link-color, currentColor);
    outline-offset: 3px;
}

.rt-to-top i {
    font-size: 1.35rem;
    line-height: 1;
}

body:has(.ridge-nav) .rt-to-top {
    bottom: calc(var(--ridge-h, 56px) + var(--ridge-edge, 48px) + 16px + env(safe-area-inset-bottom, 0px));
}

/* The circle-nav fan covers the screen while open. */
body.circle-nav-open .rt-to-top {
    opacity: 0;
    pointer-events: none;
}

.rt-to-top-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 150vh;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .rt-to-top,
    .rt-to-top.is-visible {
        transform: none;
        transition: opacity 0.15s ease, visibility 0s;
    }
}