:root {
    --font-primary: "Clash Display", sans-serif;
    --font-secondary: "Montserrat", sans-serif;
    --font-tertiary: "Helvetica Neue", sans-serif;

    /* Article body typography (.single-content only - the Gutenberg
       the_content() area). Self-hosted Libre Franklin/Source Serif 4 -
       see assets/fonts/libre-franklin and assets/fonts/source-serif-4 -
       not loaded from a CDN. */
    --font-article-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-article-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

    /* Fluid sizes: mobile -> desktop */
    --fs-article-body:    clamp(17px, 16.1px + 0.25vw, 19px);
    --fs-article-quote:   clamp(19px, 17.5px + 0.42vw, 22.5px);
    --fs-article-subhead: clamp(13px, 12.6px + 0.12vw, 14px);
    --fs-article-caption: clamp(12px, 11.6px + 0.12vw, 13px);
    --fs-article-label:   12px;

    /* Optimal reading line-length for body copy/blockquotes - narrower
       than the existing .col-lg-8 content column, so long paragraphs
       stay centered within it at a comfortable measure. */
    --article-measure: 634px;
}

/* Author byline ("By <name>", get_post_author() in components.php) -
   Co-Authors Plus wraps each author link in its own block-level markup
   by default, pushing the name onto its own line under "By" instead of
   flowing inline. The h5 itself stays block (callers rely on it for
   vertical margin utility classes like mt-2/mb-3), but everything
   inside it is forced inline so "By" and the name(s) stay on one line. */
.post-author-byline * {
    display: inline !important;
}

/* Save/bookmark button - a pop + radiating ring burst on toggle instead of
   an instant class/fill swap, plus a smooth fill transition on the icon. */
.toggle-saved-post {
    position: relative;
    overflow: visible !important;
}
.toggle-saved-post svg path {
    transition: fill 0.25s ease;
}
.toggle-saved-post.pop-animate {
    animation: save-pop 0.4s ease;
}
.toggle-saved-post.ring-burst::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #1471eb;
    animation: save-ring 0.5s ease-out;
    pointer-events: none;
}
@keyframes save-pop {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.35);
    }
    60% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes save-ring {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

/* Standard archive pagination (paginate_links() output) - replaces the old
   infinite-scroll trigger on category archives and the archive-list-2/
   archive-body ACF blocks. */
.archive-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    background-color: #f4f4f4;
    color: #101010;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
.archive-pagination a.page-numbers:hover {
    background-color: #e6e6e6;
}
.archive-pagination .page-numbers.current {
    background-color: #1471eb;
    color: #ffffff;
}
.archive-pagination .page-numbers.dots {
    background-color: transparent;
}
.triibe-dark-mode .archive-pagination .page-numbers {
    background-color: #1e1e1e;
    color: #eee;
}
.triibe-dark-mode .archive-pagination a.page-numbers:hover {
    background-color: #2a2a2a;
}
.triibe-dark-mode .archive-pagination .page-numbers.dots {
    background-color: transparent;
}

/* Modals - the sticky header uses an inline z-index: 1500 (see
   main-header.php), which is higher than Bootstrap's default modal
   z-index (1055), so modals were rendering underneath it. */
.modal {
    z-index: 1600;
}
.modal-backdrop {
    z-index: 1550;
}

/* Contribution modal - restyle WooCommerce/Name Your Price's native
   add-to-cart form (kept native rather than hand-built markup, since NYP's
   server-side validation expects its own exact field wiring) to match the
   modal design, and hide the quantity stepper (the input stays in the DOM
   with its default value of 1, so it's still submitted, just not shown). */
#contribution-add-to-cart .quantity {
    display: none;
}
#contribution-add-to-cart label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #101010;
    margin-bottom: 0.5rem;
}
.triibe-dark-mode #contribution-add-to-cart label {
    color: #ffffff;
}
/* Wraps the NYP input so a fixed "$" prefix can sit outside the editable
   value (see the script in contribution-modal.php) - people were typing
   a literal "$" into the field themselves, which broke parseFloat() and
   silently disabled the Donate button with no explanation. */
#contribution-add-to-cart .nyp-amount-wrap {
    position: relative;
    margin-bottom: 1rem;
}
#contribution-add-to-cart .nyp-currency-prefix {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #434343;
    font-size: 1rem;
    pointer-events: none;
}
.triibe-dark-mode #contribution-add-to-cart .nyp-currency-prefix {
    color: #d1d5db;
}
#contribution-add-to-cart input[name^="nyp"] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    background: transparent;
    color: #434343;
    font-size: 1rem;
}
.triibe-dark-mode #contribution-add-to-cart input[name^="nyp"] {
    border-color: #444;
    color: #d1d5db;
}
#contribution-add-to-cart .single_add_to_cart_button {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    background-color: #1471EB;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
#contribution-add-to-cart .single_add_to_cart_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Contribution modal - left-align the product description's heading
   instead of the membership page's centered style, with more room above
   it (from the pill label) and less below (before the paragraph). */
#contributionModal .membership-editor-content h1,
#contributionModal .membership-editor-content h2,
#contributionModal .membership-editor-content h3,
#contributionModal .membership-editor-content h4 {
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Membership page - the box_content/support_content/carousel ACF editor
   fields are rendered raw, headings and all, so give whatever the editor
   types (h1-h6, p, ul) the site's typography instead of browser defaults. */
.membership-editor-content h1,
.membership-editor-content h2,
.membership-editor-content h3,
.membership-editor-content h4 {
    font-family: var(--font-primary);
    color: #101010;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.triibe-dark-mode .membership-editor-content h1,
.triibe-dark-mode .membership-editor-content h2,
.triibe-dark-mode .membership-editor-content h3,
.triibe-dark-mode .membership-editor-content h4 {
    color: #ffffff;
}
.membership-editor-content p {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.6;
    color: #434343;
    margin-bottom: 1rem;
}
.membership-editor-content p:last-child {
    margin-bottom: 0;
}
.membership-editor-content p strong {
    color: #3f3f3f;
}
.triibe-dark-mode .membership-editor-content p strong {
    color: #d1d5db;
}
.triibe-dark-mode .membership-editor-content p {
    color: #969696;
}
.membership-editor-content ul:not(.membership-perks-content ul) {
    list-style: disc;
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.membership-editor-content ul:not(.membership-perks-content ul) li {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.6;
    color: #434343;
    margin-bottom: 0.5rem;
}
.triibe-dark-mode .membership-editor-content ul:not(.membership-perks-content ul) li {
    color: #969696;
}

/* Checkmark styling for <ul> lists typed into the box_content editor
   field (Membership Perks box). */
.membership-perks-content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.membership-perks-content ul li {
    position: relative;
    padding-left: 2rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.6;
    color: #434343;
}
.triibe-dark-mode .membership-perks-content ul li {
    color: #969696;
}
.membership-perks-content ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: currentColor;
}
/* Bold/underlined text within a perk (e.g. "RESHAPE newsletter") reads as
   cramped at the default letter-spacing - client asked for more tracking
   on it for readability. */
.membership-perks-content ul li strong,
.membership-perks-content ul li b {
    letter-spacing: 0.4px;
}

/* Membership page - testimonial carousel prev/next arrows. Bootstrap's
   default icons are white (for dark/image backgrounds); invert them dark
   here since the carousel sits on a light gray box, and narrow the
   clickable zone so it doesn't cover the slide text. */
#membershipCarousel .carousel-control-prev,
#membershipCarousel .carousel-control-next {
    width: 3rem;
    opacity: 0.6;
}
#membershipCarousel .carousel-control-prev:hover,
#membershipCarousel .carousel-control-next:hover {
    opacity: 1;
}
#membershipCarousel .carousel-control-prev-icon,
#membershipCarousel .carousel-control-next-icon {
    filter: invert(1) grayscale(100);
    width: 1.5rem;
    height: 1.5rem;
}

/* Indicator dots default to white (for dark/image backgrounds) and sit in
   normal flow here (not overlaid), so recolor them and drop Bootstrap's
   overlay-oriented bottom margin. */
#membershipCarousel .carousel-indicators {
    margin-bottom: 0;
}
#membershipCarousel .carousel-indicators [data-bs-target] {
    background-color: #101010;
    opacity: 0.3;
}
#membershipCarousel .carousel-indicators .active {
    opacity: 1;
}
.triibe-dark-mode #membershipCarousel .carousel-indicators [data-bs-target] {
    background-color: #ffffff;
}

/* General Parameters */
html {
    /* overflow-x: hidden (on either html or body) forces the browser to
       compute overflow-y as auto too, which turns this element into a
       scroll container and becomes the "nearest scrolling ancestor" that
       any position: sticky descendant (e.g. .hy-image-container) gets
       pinned relative to instead of the real viewport - silently
       breaking sticky everywhere on the site. overflow-x: clip prevents
       the same horizontal bleed without that side effect. */
    overflow-x: clip;
}
body {
    font-family: var(--font-primary);
    letter-spacing: 0.05em;
    overflow-x: clip;
}
body * {
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
}
img {
    --smush-placeholder-width: fit-content !important;

    width: 100%;
    height: auto;
    /* Only opacity (skeleton fade-in) and transform (.img-hover zoom) should
       animate - "all" was also animating width/height whenever the browser
       recomputed the image's box after the real file finished decoding,
       causing a visible "grow into place" jump. */
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
video {
    --smush-placeholder-width: fit-content !important;
}
a {
    display: inline-block;
    text-decoration: none;
}

/*//////////////////////////////////////////////////////////////////*/

/* Fonts Utilities */
.font-primary {
    font-family: var(--font-primary) !important;
    letter-spacing: 0.05em;
}
.font-secondary {
    font-family: var(--font-secondary) !important;
    letter-spacing: 0;
}
.font-tertiary {
    font-family: var(--font-tertiary) !important;
    letter-spacing: 0;
}

/* Text Utilities */
.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
    word-break: break-word;
}

/* Transition Utilities */
.transition-sm {
    transition: all 0.3s ease;
}

/* Cursor Parameters */
.cursor-pointer {
    cursor: pointer;
}
.none-pointer {
    pointer-events: none;
}

/* Border Utilities */
.border-none {
    border: none;
}
.outline-none {
    outline: none;
}

/* Width Utilities */
.width-fit-content {
    width: fit-content;
}
.width-max-content {
    width: max-content;
}
.width-min-content {
    width: min-content;
}
.width-fill-available {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
}

/* List Parameters */
.list-style-none {
    list-style: none !important;
}

/* Margin */
.sec-margin {
    margin-top: 6rem;
    margin-bottom: 6rem;
}
.mt-negative-4 {
    margin-top: -4px;
}

/* Truncation */
.truncate-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.truncate-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.truncate-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Line Height */
.lh-md {
    line-height: 1.4;
}
.ls-5 {
    letter-spacing: 0.05em;
}

/* Clip Path */
.heading-clip {
    clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 100%, 0 100%);
}

/* Animation */
.animate-blink {
    animation: blink-opacity 2.4s infinite ease-in-out;
}
@keyframes blink-opacity {
    10%,
    90% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Accent Colors */
.color-accent-1 {
    accent-color: #101010;
    transition: color 0.3s ease;
}
.triibe-dark-mode .color-accent-1 {
    accent-color: #ffffff;
}

/* Focus */
.input-focus:focus {
    border-color: #101010 !important;
    outline: 1px solid #101010 !important;
}
.triibe-dark-mode .input-focus:focus {
    border-color: #fff !important;
    outline: 1px solid #fff !important;
}

/* Icon Utilities */
.icon-16 {
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
}
.icon-20 {
    width: 20px;
    height: 20px;
}
.icon-24 {
    width: 24px;
    height: 24px;
}
.icon-28 {
    width: 28px;
    min-width: 28px;
    height: 28pxm;
}
.icon-32 {
    width: 32px;
    height: 32px;
}
.icon-36 {
    width: 36px;
    height: 36px;
}
.icon-46 {
    width: 46px;
    height: 46px;
}
.svg-16 svg {
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
}
.svg-18 svg {
    width: 1.125rem;
    height: 1.125rem;
}
.svg-22 svg {
    width: 22px;
    height: 22px;
}
.svg-28 svg {
    max-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
}
.svg-32 svg {
    width: 32px;
    height: 32px;
}

/* Dark Mode Display */
.triibe-dark-mode .dark-display-none,
.dark-display-block {
    display: none !important;
}
.triibe-dark-mode .dark-display-block {
    display: block !important;
}

/* Heading Colors */
.color-1 {
    color: #101010;
    transition: color 0.3s ease;
}
.color-2 {
    color: #3f3f3f;
    transition: color 0.3s ease;
}
.color-3 {
    color: #787878;
    transition: color 0.3s ease;
}
.color-4 {
    color: #f4f4f4;
    transition: color 0.3s ease;
}
.color-5 {
    color: #e9e9e9;
    transition: color 0.3s ease;
}
.color-6 {
    color: #1f73ff;
    transition: color 0.3s ease;
}
.color-7 {
    color: #969696;
    transition: color 0.3s ease;
}
.triibe-dark-mode .color-1 {
    color: #ffffff;
}
.triibe-dark-mode .color-2 {
    color: #d1d5db;
}
.triibe-dark-mode .color-3 {
    color: #969696;
}
.triibe-dark-mode .color-4 {
    color: #101010;
}
.triibe-dark-mode .color-5 {
    color: #212121;
}
.triibe-dark-mode .color-7 {
    color: #787878;
}

/* Background Colors */
.color-bg-1 {
    background-color: #ffffff;
    transition: color 0.3s ease;
}
.color-bg-2 {
    background-color: #f9f9f9;
    transition: color 0.3s ease;
}
.color-bg-3 {
    background-color: #f4f4f4;
    transition: color 0.3s ease;
}
.color-bg-5 {
    background-color: #eeeeee;
    transition: color 0.3s ease;
}
.color-bg-6 {
    background-color: #ffffff;
    transition: color 0.3s ease;
}
.color-bg-7 {
    background-color: #969696;
    transition: color 0.3s ease;
}
.color-bg-8 {
    background-color: #d9d9d9;
    transition: color 0.3s ease;
}
.color-bg-9 {
    background-color: #101010;
    transition: color 0.3s ease;
}
.color-bg-10 {
    background-color: #3f3f3f;
    transition: color 0.3s ease;
}
.color-bg-11 {
    background-color: #f6f6f6;
    transition: color 0.3s ease;
}
.color-bg-12 {
    background-color: #f2f5ff;
    transition: color 0.3s ease;
}
.color-bg-13 {
    background-color: #f9f9f9;
    transition: color 0.3s ease;
}
.color-bg-14 {
    background-color: #f2f2f2;
    transition: color 0.3s ease;
}
.color-bg-15 {
    background-color: #f2f2f2;
    transition: color 0.3s ease;
}
.color-bg-16 {
    background-color: #77b2f1;
}
.color-bg-17 {
    background-color: #1f73ff;
}
.color-bg-18 {
    background-color: #1f73ff;
    transition: color 0.3s ease;
}
.triibe-dark-mode .color-bg-18 {
    background-color: #fff;
}
.triibe-dark-mode.color-bg-1,
.triibe-dark-mode .color-bg-1 {
    background-color: #101010;
}
.triibe-dark-mode .color-bg-2 {
    background-color: #1e1e1e;
}
.triibe-dark-mode .color-bg-3 {
    background-color: #77b2f1;
}
.triibe-dark-mode .color-bg-5 {
    background-color: #323232;
}
.triibe-dark-mode .color-bg-6 {
    background-color: #ffffff;
}
.triibe-dark-mode .color-bg-7 {
    background-color: #969696;
}
.triibe-dark-mode .color-bg-8 {
    background-color: #4f4f4f;
}
.triibe-dark-mode .color-bg-9 {
    background-color: #eeeeee;
}
.triibe-dark-mode .color-bg-10 {
    background-color: #d1d5db;
}
.triibe-dark-mode .color-bg-11 {
    background-color: #1f1f1f;
}
.triibe-dark-mode .color-bg-12 {
    background-color: #77b2f133;
}
.triibe-dark-mode .color-bg-13 {
    background-color: #161616;
}
.triibe-dark-mode .color-bg-14 {
    background-color: #eeeeee;
}
.triibe-dark-mode .color-bg-15 {
    background-color: #262626;
}

/* Border Colors */
.color-border-1 {
    border-color: #eeeeee !important;
    transition: color 0.3s ease;
}
.color-border-2 {
    border-color: #d9d9d9 !important;
    transition: color 0.3s ease;
}
.color-border-3 {
    border-color: #1f73ff !important;
    transition: color 0.3s ease;
}
.color-border-4 {
    border-color: #101010 !important;
    transition: color 0.3s ease;
}
.color-border-7 {
    border-color: #969696 !important;
    transition: color 0.3s ease;
}
.triibe-dark-mode .color-border-1 {
    border-color: #323232 !important;
}
.triibe-dark-mode .color-border-2 {
    border-color: #4f4f4f !important;
}
.triibe-dark-mode .color-border-3 {
    border-color: #1f73ff !important;
}
.triibe-dark-mode .color-border-4 {
    border-color: #eeeeee !important;
}
.triibe-dark-mode .color-border-7 {
    border-color: #787878 !important;
}

/* Unique Section Colors */
.color-border-the-culture {
    border-color: #77b2f1 !important;
    transition: all 0.3s ease;
}
.color-border-the-news {
    border-color: #101010 !important;
    transition: all 0.3s ease;
}
.color-border-the-people {
    border-color: #f4da86 !important;
    transition: all 0.3s ease;
}
.color-border-the-scene {
    border-color: #e527a5 !important;
    transition: all 0.3s ease;
}
.triibe-dark-mode .color-border-the-culture {
    border-color: #77b2f1 !important;
}
.triibe-dark-mode .color-border-the-news {
    border-color: #f4f4f4 !important;
}
.triibe-dark-mode .color-border-the-people {
    border-color: #f4da86 !important;
}
.triibe-dark-mode .color-border-the-scene {
    border-color: #e527a5 !important;
}

/* Fill with Class */
.color-fill-1 svg path {
    fill: #101010 !important;
    transition: all 0.3s ease;
}
.triibe-dark-mode .color-fill-1 svg path {
    fill: #eeeeee !important;
}
.color-fill-1:hover svg path,
.color-fill-1:active svg path {
    fill: #1f73ff !important;
}
.color-fill-2 svg path {
    stroke: #101010 !important;
    transition: all 0.3s ease;
}
.triibe-dark-mode .color-fill-2 svg path {
    stroke: #eeeeee !important;
}
.color-fill-2:hover svg path,
.color-fill-2:active svg path {
    stroke: #1f73ff !important;
}
.color-fill-3 svg path {
    fill: #eee !important;
    transition: all 0.3s ease;
}
.triibe-dark-mode .color-fill-3 svg path {
    fill: #101010 !important;
}
.color-fill-3:hover svg path,
.color-fill-3:active svg path {
    fill: #1f73ff !important;
}
.color-fill-4 svg path {
    stroke: #eee !important;
    transition: all 0.3s ease;
}
.triibe-dark-mode .color-fill-4 svg path {
    stroke: #101010 !important;
}
.color-fill-4:hover svg path,
.color-fill-4:active svg path {
    stroke: #1f73ff !important;
}

.toggle-saved-post path {
    fill: none;
}
.toggle-saved-post.saved path {
    fill: #101010 !important;
    transition: color 0.3s ease;
}
.triibe-dark-mode .toggle-saved-post.saved path {
    fill: #eeeeee !important;
}

/* Aspect Ratio */
/* !important here because get_post_image() sets a fallback aspect-ratio
   inline (from the image's own dimensions) on every wrapper - these
   utility classes need to win when a caller wants a specific crop ratio
   instead of the image's native one. */
.ar-1 {
    aspect-ratio: 1 !important;
}
.aspect-4-3 {
    aspect-ratio: 4 / 3 !important;
}
.aspect-306-200 {
    aspect-ratio: 306 / 200 !important;
}
.aspect-95-85 {
    aspect-ratio: 95 / 85 !important;
}

/* Size Utilities */
.size-12 {
    font-size: 0.75rem;
}
.size-14 {
    font-size: 0.875rem;
}
.size-16 {
    font-size: 1rem;
}
.size-18 {
    font-size: 1.125rem;
}
.size-20 {
    font-size: 1.25rem;
}
.size-22 {
    font-size: 1.375rem;
}
.size-24 {
    font-size: 1.5rem;
}
.size-28 {
    font-size: 1.75rem;
}
.size-32 {
    font-size: 2rem;
}
.size-40 {
    font-size: 2.5rem;
}
.size-42 {
    font-size: 2.625rem;
}
.size-48 {
    font-size: 3rem;
}
.size-64 {
    font-size: 4rem;
}
.size-92 {
    font-size: 5.75rem;
}
.size-96 {
    font-size: 6rem;
}

@media screen and (min-width: 576px) {
    .size-sm-12 {
        font-size: 0.75rem;
    }
    .size-sm-14 {
        font-size: 0.875rem;
    }
    .size-sm-16 {
        font-size: 1rem;
    }
    .size-sm-18 {
        font-size: 1.125rem;
    }
    .size-sm-20 {
        font-size: 1.25rem;
    }
    .size-sm-22 {
        font-size: 1.375rem;
    }
    .size-sm-24 {
        font-size: 1.5rem;
    }
    .size-sm-28 {
        font-size: 1.75rem;
    }
    .size-sm-32 {
        font-size: 2rem;
    }
    .size-sm-40 {
        font-size: 2.5rem;
    }
    .size-sm-48 {
        font-size: 3rem;
    }
    .size-sm-64 {
        font-size: 4rem;
    }
    .size-sm-92 {
        font-size: 5.75rem;
    }
    .size-sm-96 {
        font-size: 6rem;
    }
    .bg-attach-fixed {
        background-attachment: fixed;
    }
    .ar-16-9 {
        aspect-ratio: 16 / 9;
    }
}
@media screen and (min-width: 768px) {
    .size-md-18 {
        font-size: 1.125rem;
    }
}
@media screen and (min-width: 992px) {
    .size-lg-12 {
        font-size: 0.75rem;
    }
    .size-lg-14 {
        font-size: 0.875rem;
    }
    .size-lg-16 {
        font-size: 1rem;
    }
    .size-lg-18 {
        font-size: 1.125rem;
    }
    .size-lg-20 {
        font-size: 1.25rem;
    }
    .size-lg-22 {
        font-size: 1.375rem;
    }
    .size-lg-24 {
        font-size: 1.5rem;
    }
    .size-lg-28 {
        font-size: 1.75rem;
    }
    .size-lg-32 {
        font-size: 2rem;
    }
    .size-lg-40 {
        font-size: 2.5rem;
    }
    .size-lg-48 {
        font-size: 3rem;
    }
    .size-lg-64 {
        font-size: 4rem;
    }
    .size-lg-92 {
        font-size: 5.75rem;
    }
    .size-lg-96 {
        font-size: 6rem;
    }
    .size-lg-112 {
        font-size: 7rem;
    }
    .width-lg-170 {
        width: 170px;
    }
}

@media screen and (min-width: 1200px) {
    .size-xl-16 {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1400px) {
    .size-xxl-12 {
        font-size: 0.75rem;
    }
    .size-xxl-14 {
        font-size: 0.875rem;
    }
    .size-xxl-16 {
        font-size: 1rem;
    }
    .size-xxl-18 {
        font-size: 1.125rem;
    }
    .size-xxl-20 {
        font-size: 1.25rem;
    }
    .size-xxl-22 {
        font-size: 1.375rem;
    }
    .size-xxl-24 {
        font-size: 1.5rem;
    }
    .size-xxl-28 {
        font-size: 1.75rem;
    }
    .size-xxl-32 {
        font-size: 2rem;
    }
    .size-xxl-40 {
        font-size: 2.5rem;
    }
    .size-xxl-48 {
        font-size: 3rem;
    }
    .size-xxl-64 {
        font-size: 4rem;
    }
    .size-xxl-92 {
        font-size: 5.75rem;
    }
    .size-xxl-96 {
        font-size: 6rem;
    }
}

.mobile-submenu {
    transform: translateX(-100%);
    transition: all 0.3s ease;
}
.mobile-submenu.active {
    transform: translateX(0);
}
#custom-page.checkout .wcpay-stripelink-modal-trigger {
    display: none !important;
}

input.nyp-input::-webkit-outer-spin-button,
input.nyp-input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
input.nyp-input[type="number"] {
    -moz-appearance: textfield;
}
input.nyp-input::placeholder {
    color: #969696;
}
.triibe-dark-mode input.nyp-input::placeholder {
    color: #787878;
}
#subscription-container:has(input[type="radio"]:checked) {
    border-color: #1f73ff !important;
}
.variation-container label {
    padding: 1rem;
}
.variation-container {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.triibe-dark-mode .variation-container {
    border-color: #323232;
}
.variation-container:has(input:checked) {
    background-color: rgba(31, 115, 255, 0.08);
    border-color: #1f73ff;
}
.triibe-dark-mode .variation-container:has(input:checked) {
    background-color: rgba(31, 115, 255, 0.18);
    border-color: #1f73ff;
}
@media (max-width: 425px) {
    .variation-container {
        width: 100% !important;
    }
}

/* Membership popup plan rows - name+price share the top line, description
   gets its own full-width row below instead of squeezing into a side column
   (which wrapped one word per line on narrow phones). */
.plan-row-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name price" "desc desc";
    column-gap: 0.75rem;
    row-gap: 0.35rem;
}
.plan-row-name {
    grid-area: name;
}
.plan-row-price {
    grid-area: price;
    text-align: right;
    white-space: nowrap;
}
.plan-row-desc {
    grid-area: desc;
    text-align: left;
}

/* Membership hero - Monthly/Annual plan buttons */
.membership-plan-btn {
    border: 1px solid #e2e2e2 !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
.triibe-dark-mode .membership-plan-btn {
    border-color: #323232 !important;
}

/* Vertical icon timeline - shared by the free trial explainer modal and the
   membership page's Package block (both are an icon/number, connecting
   line, title + body per step). */
.step-timeline-step {
    display: flex;
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.5rem;
}
.step-timeline-step:last-child {
    padding-bottom: 0;
}
.step-timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background-color: #e2e2e2;
}
.triibe-dark-mode .step-timeline-step:not(:last-child)::before {
    background-color: #323232;
}
.step-timeline-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #1f73ff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    z-index: 1;
}
.step-timeline-dot svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Package block - steps laid out as a two-column grid instead of a single
   vertical timeline, so no connecting line between them. */
.step-card {
    display: flex;
    gap: 0.75rem;
}

/* Plan picker shown inline (Package block's left column) instead of in the popup */
.plan-picker-card {
    border: 1px solid #e2e2e2;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 12px 0px;
}
.triibe-dark-mode .plan-picker-card {
    border-color: #323232;
}

/* Plan picker - step indicator between the badge and plan cards. Mobile-first:
   icon on the left with a vertical connecting line, content to its right.
   From sm up it switches to icon-on-top, centered, horizontal connecting line. */
.member-step {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 0.75rem;
    padding-bottom: 1.5rem;
}
.member-step:last-child {
    padding-bottom: 0;
}
.member-step-content {
    flex: 1 1 auto;
    min-width: 0;
}
.member-step-connected::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background-color: #e2e2e2;
}
.triibe-dark-mode .member-step-connected::before {
    background-color: #323232;
}
.member-step-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #1f73ff;
    color: #fff;
    flex-shrink: 0;
}
.member-step-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}
.member-step-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
@media (min-width: 576px) {
    .member-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
        padding-bottom: 0;
    }
    .member-step-connected::before {
        display: none;
    }
    .member-step-connected::after {
        content: "";
        position: absolute;
        top: 16px;
        left: 50%;
        width: 100%;
        height: 2px;
        background-color: #e2e2e2;
        z-index: 0;
    }
    .triibe-dark-mode .member-step-connected::after {
        background-color: #323232;
    }
}

/*//////////////////////////////////////////////////////////////////*/

/* Page */
#custom-page {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
.background-center-bottom {
    background-position: center bottom;
}
.background-no-repeat {
    background-repeat: no-repeat;
}

/* Hidden Content */
.hidden-content {
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}
.triibe-dark-mode .hidden-content {
    background: linear-gradient(
        to top,
        rgba(16, 16, 16, 1) 0%,
        rgba(16, 16, 16, 0.8) 50%,
        rgba(16, 16, 16, 0.2) 100%
    );
}
.disabled-post {
    filter: blur(1.5px);
    opacity: 0.8;
    pointer-events: none;
}

/* Header */
header .custom-logo-link {
    max-height: 27px;
    height: 100%;
    width: auto;
}
#search-box,
#sub-menu {
    display: none;
}

/* Search Active */
.search-active {
    filter: opacity(0.5);
    transition: all 0.3s ease;
}
.search-active:hover,
.search-active:has(input:focus) {
    filter: opacity(1);
}
.svg-scale svg {
    transition: all 0.3s ease;
}
.svg-scale:hover svg,
.svg-scale:active svg {
    transform: scale(1.2);
}

/* Filter */
.filter-opacity-60 {
    filter: opacity(0.6);
    transition: all 0.3s ease;
}
.filter-opacity-60:hover,
.filter-opacity-60.is-active {
    filter: opacity(1);
}

/* Newsletter */
#custom-page.newsletters .woocommerce-Price-amount.amount {
    color: #101010;
}
.triibe-dark-mode #custom-page.newsletters .woocommerce-Price-amount.amount {
    color: #d1d5db;
}

/* Contact Form */
.newsletter-form p {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
}
.newsletter-form br {
    display: none;
}
.newsletter-form .wpcf7-form-control-wrap {
    width: calc(70% - 5px);
}
.newsletter-form .wpcf7-not-valid-tip {
    text-align: left;
    margin-top: 6px;
}
.newsletter-email {
    width: 100%;
    font-family: var(--font-secondary);
    font-size: 1rem;
    border: 1px solid var(--bg-ads);
    border-radius: 4px;
    padding: 9px 12px;
}
.newsletter-submit {
    display: inline-block;
    width: calc(30% - 5px);
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--color-full-black);
    color: #fff;
    border: 1px solid var(--color-full-black);
    outline: none;
    border-radius: 4px;
    padding: 10px 16px;
    height: min-content;
    transition: all 0.3s ease;
}
.newsletter-submit:hover,
.newsletter-submit:active {
    transform: scale(1.05);
}
.newsletter-form .wpcf7-spinner {
    position: absolute;
    top: 50px;
    right: 0;
}
.wpcf7 form .wpcf7-response-output {
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    line-height: 1.2;
    margin: 10px 0 0 0;
    padding: 0;
    width: 100%;
    border: none;
    border-color: #00a0d2;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border: none;
    color: #ffb900;
}

/* Transitions */
.btn-color,
.btn-hover,
.btn-scale,
.btn-blue,
.link-hover-2,
.post-hovered,
.icon-hovered {
    transition: all 0.3s ease;
}

/* Skeleton Loader */
.post-image-wrapper {
    display: block;
    position: relative;
    background-color: #e8e8e8;
    /* Opt out of the sitewide "body * { transition: all }" rule - the
       wrapper's own box (sized via inline aspect-ratio) must never animate,
       or it visibly grows/shrinks whenever that ratio is set/changes. */
    transition: none;
}
/* The placeholder color is only for the loading state - clear it once
   loaded, or it permanently shows through any transparent part of the
   actual image (logos/PNGs with transparent backgrounds, etc.). */
.post-image-wrapper.img-loaded {
    background-color: transparent;
}
/* <a> defaults to inline-block, which won't reliably size a width:100%
   aspect-ratio child. Force it to block wherever it wraps the image
   component - not just a direct child, since several templates nest an
   extra plain <div> between the <a> and .post-image-wrapper - instead of
   relying on every caller to remember a d-grid/d-block class on the
   anchor (and every intermediate wrapper div). */
a:has(.post-image-wrapper) {
    display: block;
}
.post-image-wrapper img {
    opacity: 0;
}
.post-image-wrapper.img-loaded img {
    opacity: 1;
}
.post-image-wrapper.img-error img {
    visibility: hidden;
}
.post-image-wrapper:not(.img-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 37%, #e8e8e8 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
.triibe-dark-mode .post-image-wrapper {
    background-color: #1c1c1c;
}
.triibe-dark-mode .post-image-wrapper.img-loaded {
    background-color: transparent;
}
.triibe-dark-mode .post-image-wrapper:not(.img-loaded)::before {
    background: linear-gradient(90deg, #1c1c1c 25%, #2a2a2a 37%, #1c1c1c 63%);
    background-size: 400% 100%;
}

/* Video Skeleton Loader (modal-embedded oEmbed video in video.php) */
.video-wrapper {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #e8e8e8;
    transition: none;
}
.video-wrapper.video-loaded {
    background-color: transparent;
}
.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.video-wrapper.video-loaded iframe {
    opacity: 1;
}
.video-wrapper:not(.video-loaded)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 37%, #e8e8e8 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}
.triibe-dark-mode .video-wrapper {
    background-color: #1c1c1c;
}
.triibe-dark-mode .video-wrapper.video-loaded {
    background-color: transparent;
}
.triibe-dark-mode .video-wrapper:not(.video-loaded)::before {
    background: linear-gradient(90deg, #1c1c1c 25%, #2a2a2a 37%, #1c1c1c 63%);
    background-size: 400% 100%;
}

/* Post Hover */
.img-hover {
    object-position: center center;
}
.post-image-wrapper:has(.img-hover):hover .img-hover,
.post-image-wrapper:has(.img-hover):active .img-hover {
    transform: scale(1.1);
}
/* Nav Hover */
.nav-hover:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #101010;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(4px);
    transition: all 0.2s ease;
}
.nav-hover:hover:after {
    transform: translateY(0);
}
.nav-hover.active:after {
    transform: translateY(0);
}
.triibe-dark-mode .nav-hover:after {
    background-color: #eee;
}

/* Icon Hover */
.icon-hover {
    border: 2px solid transparent;
}
.icon-hover:hover,
.icon-hover:active {
    border-radius: 4px;
    border: 2px solid var(--gray-4);
}
.triibe-dark-mode .icon-hover:hover,
.triibe-dark-mode .icon-hover:active {
    border-radius: 4px;
    border: 2px solid var(--white);
}

/* Icon Hover 2 / Post Hover */
.icon-hover-2:hover .icon-hovered,
.icon-hover-2:active .icon-hovered {
    transform: translateX(4px);
}

.post-hover:hover .post-hovered,
.post-hover:active .post-hovered {
    color: #1f73ff !important;
}

/* Link Hover */
.link-hover:hover,
.link-hover:active {
    text-decoration: underline !important;
}
.link-hover-2:hover,
.link-hover-2:active {
    color: #1f73ff !important;
}

/* Buttons Hover */
.btn-hover:hover,
.btn-hover:active {
    background-color: #3f3f3f !important;
    color: #fff !important;
}
.triibe-dark-mode .btn-hover:hover,
.triibe-dark-mode .btn-hover:active {
    background-color: #fff !important;
    color: #3f3f3f !important;
}
.btn-blue:hover,
.btn-blue:active {
    background-color: #1f73ff !important;
    color: #ffffff !important;
}
.btn-color:hover,
.btn-color:active {
    color: #1f73ff !important;
}
.btn-scale:hover,
.btn-scale:active {
    transform: scale(1.05);
}
.menu-hover {
    transition: all 0.4s ease !important;
}
.menu-hover::before {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    background-color: var(--color-black);
    position: absolute;
    left: 0;
    top: 0;
    transform: translateX(-4px);
    transition: all 0.4s ease !important;
}
.menu-hover:hover,
.menu-hover:active {
    padding-left: 13px;
}
.menu-hover:hover::before,
.menu-hover:active::before {
    transform: translateX(0);
}

/* Dark Mode Button */
.dark-mode-wrapper {
    transform: translateX(0);
    transition: all 0.3s ease;
}
#dark-mode-toggler.active .dark-mode-wrapper {
    transform: translateX(-32px);
}

/* Sliders */
.triibe-dark-mode .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #fff !important;
}

/* Shadow Parameters */
.shadow-1 {
    box-shadow: 0px 2.32px 0.77px 0px rgba(0, 0, 0, 0.09), 0px 2.32px 6.19px 0px rgba(0, 0, 0, 0.15),
        0px 0px 0px 0.77px rgba(0, 0, 0, 0.06);
}
.triibe-dark-mode .shadow-1 {
    box-shadow: 0px 2.32px 0.77px 0px rgba(255, 255, 255, 0.09),
        0px 2.32px 6.19px 0px rgba(255, 255, 255, 0.15),
        0px 0px 0px 0.77px rgba(255, 255, 255, 0.06);
}
.shadow-2 {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 28px 20px -20px;
}
.triibe-dark-mode .shadow-2 {
    box-shadow: rgba(255, 255, 255, 0.2) 0px 28px 20px -20px;
}

/* scroll */
.overflow-y-auto {
    overflow-y: auto;
}

/* Height */
.height-55vw {
    height: 55vw;
}
.height-85 {
    height: 85px;
}
.height-90 {
    height: 90px;
}
.height-140 {
    height: 140px;
}
.height-150 {
    height: 150px;
}
.height-172 {
    height: 172px;
}
.height-180 {
    height: 180px;
}
.height-130 {
    height: 130px !important;
}
.height-250 {
    height: 250px;
}
.height-300 {
    height: 300px;
}
.height-320 {
    height: 320px;
}
.height-390 {
    height: 390px;
}
.height-min-115 {
    min-height: 115px;
}
.height-100vh {
    height: 100vh;
}
.height-max-300 {
    max-height: 300px;
}
.height-post-56 {
    height: 56px;
}

/* Width */
.dot-size {
    width: 21px;
    height: 21px;
}
.width-max {
    max-width: 100% !important;
}
.width-40 {
    width: 40px;
}
.width-85 {
    width: 85px;
}
.width-95 {
    width: 95px;
}
.width-100 {
    width: 100px;
}
.width-max-1090 {
    max-width: 1090px;
}
.width-max-865 {
    max-width: 865px;
}
.width-max-630 {
    max-width: 630px;
}
.width-max-520 {
    max-width: 520px;
}
.width-max-356 {
    max-width: 356px;
}
/* Only needed in the sm-md range, where the row post groups' thumbnail
   is a fixed size but the text column next to it isn't - above 768px
   there's enough room for it to flex naturally without pushing on the
   image. */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    .width-max-275 {
        max-width: 275px;
    }
}
.width-max-240 {
    max-width: 240px;
}
.width-max-225 {
    max-width: 225px;
}
.width-max-195 {
    max-width: 195px !important;
}
.width-max-100 {
    max-width: 100px !important;
}
.width-post-78 {
    width: 78px;
    min-width: 78px;
}
.width-sm-180 {
    width: 100%;
}
.width-100vw {
    width: 100vw;
}
.width-min-95 {
    min-width: 95px;
}
.width-team {
    width: calc(100% - 16px - 85px);
}
.dark-filter {
    transition: all 0.3s ease;
}
.triibe-dark-mode .dark-filter {
    filter: invert(1);
}

/* Postion Parameters */
.top-20 {
    top: 20px;
}
.top-75 {
    top: 74px;
}
.scroll-opacity {
    opacity: 0.75;
    transition: all 0.3s ease;
}
.scroll-opacity.active {
    opacity: 1;
}

/* Margin Negative */
.mb-negative-20 {
    margin-bottom: -1.5rem;
}

/* Standalone WooCommerce notices (e.g. "No saved methods found" on the
   payment methods page) - a plain fallback background/color for notices
   that aren't inside .woocommerce-notices-wrapper or .shop_table (those
   two contexts override this further down with a transparent background,
   which needs to stay winning - hence this block sits before them here). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
    background-color: #f9f9f9;
    color: #3f3f3f;
    font-family: var(--font-secondary);
    letter-spacing: 0;
    border-radius: 4px;
}
.triibe-dark-mode .woocommerce-info,
.triibe-dark-mode .woocommerce-message,
.triibe-dark-mode .woocommerce-error {
    background-color: #1e1e1e;
    color: #d1d5db;
    border-color: #323232;
}

/* WooCommerce Errors */
.woocommerce-notices-wrapper + .woocommerce-message,
.woocommerce-notices-wrapper > *,
.woocommerce-notices-wrapper ul {
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    border: none;
    outline: none;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
}
.woocommerce-notices-wrapper ul::before {
    content: none;
}
.woocommerce-notices-wrapper li {
    font-weight: 500;
    color: #3f3f3f;
    font-family: var(--font-secondary);
    letter-spacing: 0;
}
.woocommerce-message li::before {
    font-family: WooCommerce;
    content: "\e017";
    color: #008000;
    display: inline-block;
    margin-right: 0.5rem;
}
.woocommerce-info li::before {
    font-family: WooCommerce;
    content: "\e018";
    color: #0073aa;
    display: inline-block;
    margin-right: 0.5rem;
}
.woocommerce-error li::before {
    font-family: WooCommerce;
    content: "\e016";
    color: #dc3545;
    display: inline-block;
    margin-right: 0.5rem;
}
.woocommerce-info::before,
.woocommerce-message::before {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}
.shop_table .woocommerce-info,
.shop_table .woocommerce-message,
.shop_table .woocommerce-error {
    margin: 0 0 1.5rem 0;
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: var(--font-secondary);
    letter-spacing: 0;
    font-size: 14px;
}
.shop_table .woocommerce-info::before,
.shop_table .woocommerce-message::before,
.shop_table .woocommerce-error::before {
    position: relative;
    top: 0;
    left: 0;
    margin-right: 0.5rem;
}

/* Checkout & Account page */
#custom-page.my-account .woocommerce-address-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    row-gap: 1.5rem;
}
#custom-page.my-account .woocommerce-address-fields__field-wrapper label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
}
#custom-page.my-account .select2-selection,
#custom-page.my-account input,
.custom-billing-2 .select2-selection,
.custom-billing input,
.custom-billing-2 input {
    font-family: var(--font-secondary) !important;
    border: 1px solid #d9d9d9 !important;
    font-size: 14px !important;
    padding: 18px 12px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    color: #3f3f3f !important;
    background-color: #fff !important;
    position: relative !important;
    letter-spacing: 0;
}
#custom-page.my-account .select2-selection,
.custom-billing-2 .select2-selection {
    height: 56px !important;
    margin-bottom: 1px !important;
}
#custom-page.my-account .select2-selection__rendered,
.custom-billing-2 .select2-selection__rendered {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    color: #5b5b5b !important;
}
#custom-page.my-account .select2-selection__arrow,
.custom-billing-2 .select2-selection__arrow {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-right: 12px !important;
}
#custom-page.my-account .form-row {
    margin: 0;
    padding: 0;
}
#custom-page.my-account .form-row.form-row-first,
#custom-page.my-account .form-row.form-row-last {
    width: calc(50% - 8px);
}
#update_all_subscriptions_addresses_field {
    font-family: var(--font-secondary);
    letter-spacing: 0;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
#custom-page.my-account button {
    background-color: #101010;
    color: #fff;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}
#custom-page.my-account button.show-password-input {
    background-color: transparent !important;
    color: #101010;
    padding: 0.75rem 1rem;
    border: none !important;
}
.triibe-dark-mode #custom-page.my-account button.show-password-input {
    color: #fff;
}
#lost-password .woocommerce-form-row.form-row {
    width: 100% !important;
}

/* WooCommerce buttons, site-wide (submit buttons like "Reset password" and
   action links like "Pay"/"View"/"Cancel" on account/subscription pages) -
   consistent black/white treatment instead of the WooCommerce/browser
   default, in both light and dark mode. */
.woocommerce-Button,
.woocommerce a.button,
.woocommerce button.button {
    background-color: #101010 !important;
    color: #fff !important;
    border: 1px solid #101010 !important;
}
.woocommerce-Button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}
.triibe-dark-mode .woocommerce-Button,
.triibe-dark-mode .woocommerce a.button,
.triibe-dark-mode .woocommerce button.button {
    background-color: #fff !important;
    color: #101010 !important;
    border-color: #fff !important;
}
.triibe-dark-mode .woocommerce-Button:hover,
.triibe-dark-mode .woocommerce a.button:hover,
.triibe-dark-mode .woocommerce button.button:hover {
    background-color: #d1d5db !important;
    border-color: #d1d5db !important;
}

/* WooCommerce content text color, dark mode - scoped to WooCommerce's own
   guaranteed .woocommerce wrapper (always present regardless of page
   template) rather than a theme-specific wrapper class/ID, since account
   endpoints like view-subscription may not carry that. Covers subscription
   details, subscription totals, and related orders tables. */
.triibe-dark-mode .woocommerce table,
.triibe-dark-mode .woocommerce table th,
.triibe-dark-mode .woocommerce table td,
.triibe-dark-mode .woocommerce h1,
.triibe-dark-mode .woocommerce h2,
.triibe-dark-mode .woocommerce h3 {
    color: #eee;
    border-color: #4f4f4f;
}
/* Everything else WooCommerce renders as plain text outside of tables -
   order/subscription intro line, account nav sidebar, billing/shipping
   address blocks, etc. */
.triibe-dark-mode .woocommerce p,
.triibe-dark-mode .woocommerce address,
.triibe-dark-mode .woocommerce li,
.triibe-dark-mode .woocommerce label {
    color: #eee;
}
/* Scoped to table links only (order/subscription numbers etc.) - the
   account sidebar nav and Logout link already carry the theme's own
   .color-2 utility class with its own correct light/dark colors, so a
   broader a:not(.button) rule here would incorrectly override those. */
.triibe-dark-mode .woocommerce table a:not(.button) {
    color: #1f73ff;
}

/* Checkout Billing form */
.form-row-wide,
.woocommerce-billing-fields__field-wrapper p.form-row {
    width: 100%;
    padding: 0;
    margin: 0;
}
#custom-page.checkout .form-row-half {
    width: 100% !important;
}
#billing_phone_field {
    order: 10;
}
.select2-results__options::-webkit-scrollbar {
    width: 8px;
    margin-left: 6px;
}
.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #3f3f3f;
    border-radius: 4px;
}
.select2-results__options::-webkit-scrollbar-track {
    background-color: #d9d9d9;
}
.select2-search__field {
    border: 1px solid #101010;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
}
.woocommerce-checkout #shipping_method {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.woocommerce-checkout #shipping_method li {
    padding-left: 14px;
    display: flex;
    align-items: center;
    border: 1px solid var(--bg-3);
    border-radius: 4px;
}
.woocommerce-checkout #shipping_method li::before {
    content: "";
    display: block;
    background: url("https://wcliveedge.com/wp-content/uploads/2025/02/icon-delivery.svg") no-repeat
        center center/contain;
    width: 24px;
    height: 24px;
    margin-right: 12px;
}
.woocommerce-checkout #shipping_method li input {
    display: none;
}
.woocommerce-checkout #shipping_method li:has(input[type="radio"]:checked) {
    border-color: #101010;
    background-color: #3f3f3f0f;
}
.woocommerce-checkout #shipping_method li label {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 14px 14px 0;
}

/* Checkout Payment */
.woocommerce-checkout #payment {
    background-color: transparent !important;
    border: none !important;
    font-family: var(--font-secondary);
    letter-spacing: 0;
}
.wc_payment_methods.payment_methods.methods {
    padding: 0 !important;
    background-color: transparent !important;
    border-bottom: none !important;
}
.wc_payment_methods.payment_methods.methods li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #d9d9d9;
    padding-left: 10px;
    transition: all 0.4s ease;
    background-color: transparent !important;
    border-radius: 6px;
}
.wc_payment_methods.payment_methods.methods li .TermsText {
    font-family: var(--font-secondary) !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
}
.wc_payment_methods.payment_methods.methods li:has(input[type="radio"]:checked) {
    background-color: #3f3f3f0f;
    border-color: #101010;
    padding-left: 16px;
    padding-bottom: 16px;
}
.wc_payment_methods.payment_methods.methods li input {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    accent-color: #181818;
}
.wc_payment_methods.payment_methods.methods li label {
    padding: 16px 16px 16px 0;
    width: 100%;
    font-weight: 500;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.wc_payment_methods.payment_methods.methods li label img {
    width: fit-content !important;
}
.wc_payment_methods.payment_methods.methods li > div {
    background-color: transparent !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
}
.wc_payment_methods.payment_methods.methods li > div::before {
    content: none !important;
}
.woocommerce-checkout-payment#payment .form-row.place-order {
    margin-top: 3rem;
    padding: 0;
}
.woocommerce-terms-and-conditions-wrapper p {
    font-size: 14px;
    margin-bottom: 4px;
}
.wc_payment_methods.payment_methods.methods fieldset > div,
.wc_payment_methods.payment_methods.methods fieldset {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.checkout-item img {
    min-width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}
.first-payment-date {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}
.triibe-dark-mode #custom-page.checkout div,
.triibe-dark-mode #custom-page.checkout .subscription-price,
.triibe-dark-mode #custom-page.checkout label,
.triibe-dark-mode #custom-page.checkout p,
.triibe-dark-mode #custom-page.checkout .woocommerce-Price-amount.amount {
    color: #d1d5db !important;
}
.triibe-dark-mode #custom-page.checkout .wc_payment_methods.payment_methods.methods li {
    border-color: #fdf7f3 !important;
}
.triibe-dark-mode #custom-page.checkout hr {
    border-bottom: 1px solid #4f4f4f;
    height: 0;
}
.triibe-dark-mode .select2-container .select2-selection--single .select2-selection__rendered {
    color: #d1d5db !important;
}
.triibe-dark-mode .custom-billing-2 .select2-selection,
.triibe-dark-mode .custom-billing input,
.triibe-dark-mode .custom-billing-2 input {
    border-color: #4f4f4f !important;
    background-color: #101010 !important;
    color: #d1d5db !important;
}
.triibe-dark-mode .select2-container .select2-selection--single .select2-selection__arrow b {
    filter: invert(1) !important;
}
#custom-page.checkout .woocommerce-SavedPaymentMethods.wc-saved-payment-methods li {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 0 0 0 1rem;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}
#custom-page.checkout .woocommerce-SavedPaymentMethods.wc-saved-payment-methods li input {
    position: relative;
    width: 18px;
    min-width: 18px;
    height: 18px;
}
#custom-page.checkout .wc-upe-form.wc-payment-form {
    margin-top: 1.5rem !important;
}

/* Loading spinner shown on the membership plan buttons and the plan-
   picker's "Join Now" button while the add-to-cart request is in flight.
   Bootstrap's .spinner-border uses currentColor for its border, so it
   otherwise inherits whatever text color the button happens to have
   (different between light/dark mode, and different per button) - this
   pins it to the brand's primary blue consistently everywhere it's used. */
.spinner-primary {
    color: #1471EB !important;
}

/* Contribution banner ("Keep The TRiiBE member-backed and Black.") -
   client wanted it to read like the article's own body copy rather than
   a separate semibold/bold CTA style: same font-family/size/weight as
   .single-content p (kept in sync with that rule below - it was updated
   to the new article serif typography, so this follows), italicized,
   with the clickable link underlined instead of bolded. */
.contribution-banner-text,
.contribution-banner-link {
    font-family: var(--font-article-serif);
    font-size: var(--fs-article-body);
    font-weight: 400;
    font-style: italic;
}
.contribution-banner-link {
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    /* On mobile the dashed box was sitting flush against the content
       column with no breathing room - add margin around it so it's not
       cramped against the edges of the article. */
    .contribution-banner-box {
        margin-left: 12px;
        margin-right: 12px;
        width: auto !important;
    }
}

/* Single Post Page */
.single-content {
    overflow: hidden !important;
    font-family: var(--font-article-serif) !important;
}
.single-content h1,
.single-content h4 {
    font-weight: 700 !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.single-content h1 {
    font-size: 2rem;
}
.single-content h4 {
    font-size: 1.3rem;
}
/* In-article section labels/subheads - sans-serif, small, letter-spaced
   and uppercase rather than big bold headlines, matching the reference
   editorial design (Mother Jones-style long-form layout the client asked
   to match). */
.single-content h2 {
    font-family: var(--font-article-sans);
    font-size: var(--fs-article-label);
    line-height: 1.125;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.single-content h3 {
    font-family: var(--font-article-sans);
    font-size: var(--fs-article-subhead);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 32px 0 18px;
}
@media (prefers-color-scheme: dark) {
    .triibe-dark-mode .single-content h1,
    .triibe-dark-mode .single-content h2,
    .triibe-dark-mode .single-content h3,
    .triibe-dark-mode .single-content h4 {
        font-weight: 600 !important;
    }
}
.single-content p {
    font-family: var(--font-article-serif);
    font-size: var(--fs-article-body);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    overflow-wrap: break-word;
    color: #101010 !important;
}
.single-content strong {
    font-weight: 700;
}
.single-content em {
    font-style: italic;
}
.single-content blockquote {
    font-family: var(--font-article-sans);
    font-size: var(--fs-article-quote);
    line-height: 1.25;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.5px;
    max-width: var(--article-measure);
    margin: 24px auto;
    padding: 0;
}
.single-content blockquote p {
    font: inherit;
    letter-spacing: inherit;
    max-width: none;
    margin: 0;
}
@media screen and (min-width: 768px) {
    .single-content blockquote {
        letter-spacing: -1px;
    }
    .single-content h3 {
        letter-spacing: 3px;
    }
}
@media screen and (min-width: 1100px) {
    .single-content blockquote {
        max-width: calc(var(--article-measure) + 120px);
        padding-inline: 60px;
    }
}
.single-content iframe,
.single-content picture,
.single-content video,
.single-content img {
    position: relative !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.single-content img {
    height: auto;
}
/* Skeleton loader for images embedded directly in article content (no
   .post-image-wrapper to shimmer, since these never pass through
   get_post_image() - same shimmer animation/keyframes as that component,
   applied straight to the <img> itself). */
.single-content img {
    background: linear-gradient(90deg, #e8e8e8 25%, #f2f2f2 37%, #e8e8e8 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.single-content img.img-loaded {
    background: none;
    animation: none;
    opacity: 1;
}
.single-content img.img-error {
    visibility: hidden;
}
.triibe-dark-mode .single-content img {
    background: linear-gradient(90deg, #1c1c1c 25%, #2a2a2a 37%, #1c1c1c 63%);
    background-size: 400% 100%;
}
.single-content figure {
    margin-left: auto;
    margin-right: auto;
}
.single-content figure img {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.single-content figure figcaption {
    font-family: var(--font-article-sans);
    font-size: var(--fs-article-caption);
    line-height: 1.25;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #787878;
}
.triibe-dark-mode .single-content figure figcaption {
    color: #969696;
}
.single-content p:has(iframe) {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.single-content p iframe {
    margin-top: 0;
    margin-bottom: 0;
}
.single-content ul,
.single-content ol {
    padding-left: 20px;
}
.single-content li {
    font-family: var(--font-article-serif);
    font-size: var(--fs-article-body);
    line-height: 1.5;
    color: #101010;
}
.single-content a {
    color: inherit;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 currentColor;
    transition: box-shadow 0.15s ease;
    display: inline;
}
.single-content a:hover {
    box-shadow: inset 0 -2px 0 currentColor;
}
.triibe-dark-mode .single-content li,
.triibe-dark-mode .single-content p {
    color: #eee !important;
}

/* Category landing pages ("The News", "The Culture", "The People", and
   every other category - they all share this one archive.php template)
   - same font system as the article typography above: headlines in the
   sans font (matching how the reference treats article titles), bylines
   in the serif font (matching its .byline-dateline). No long-form body
   copy exists on these card/list layouts, so only headlines and bylines
   pick up the new fonts. */
#archive-page h3,
#archive-page h3 a {
    font-family: var(--font-article-sans);
}
#archive-page .post-author-byline {
    font-family: var(--font-article-serif);
}

/* Thank you Page */
#custom-thankyou .btn-next-to-p + p {
    letter-spacing: 0;
    text-align: center !important;
    font-family: var(--font-secondary);
    font-size: 1rem;
}
#custom-thankyou .woocommerce-order-details {
    margin-top: 3rem;
}
#custom-page.my-account h2,
#custom-thankyou h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: #101010;
}
#custom-page.my-account thead th,
#custom-thankyou thead th {
    font-size: 1.125rem;
    font-weight: 600;
    color: #101010;
}
#custom-page.my-account tbody th,
#custom-page.my-account tbody td,
#custom-page.my-account tfoot th,
#custom-page.my-account tfoot td,
#custom-thankyou tbody th,
#custom-thankyou tbody td,
#custom-thankyou tfoot th,
#custom-thankyou tfoot td,
#custom-thankyou .product-name .wc-item-meta {
    font-family: var(--font-secondary);
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #101010;
}
#custom-page.my-account tbody th,
#custom-thankyou tbody th,
#custom-thankyou tfoot th {
    font-weight: 700;
}
#custom-thankyou table.shop_table {
    margin-bottom: 3rem;
    border-color: #d9d9d9;
}
#custom-page.my-account table,
#custom-page.my-account address,
#custom-thankyou address {
    font-family: var(--font-secondary);
    border-color: #d9d9d9;
    color: #101010;
}
#custom-page.my-account .account-payment-methods-table + a,
#custom-page.my-account table a.button {
    color: #fff;
    background-color: #101010;
    border: 1px solid #101010;
    padding: 0.5rem 1.5rem;
    font-size: 14px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    margin-top: 6px;
    margin-bottom: 6px;
}
#custom-page.my-account .account-payment-methods-table + a {
    font-weight: 600;
    padding: 0.75rem 2rem;
    font-size: 1;
}
#custom-page.my-account table a.button.change_payment_method,
#custom-page.my-account table a.button.cancel.wcs_block_ui_on_click,
#custom-page.my-account table a.button.wcs_deletion_error {
    background-color: transparent;
    color: #101010;
}
#custom-page.my-account .account-payment-methods-table + a:hover,
#custom-page.my-account table a.button:hover,
#custom-page.my-account table a.button:active {
    transform: scaleY(1.1) scaleX(1.02);
}

/* Thank you - dark mode */
.triibe-dark-mode #custom-page.my-account h2,
.triibe-dark-mode #custom-thankyou h2 {
    color: #fff;
}
.triibe-dark-mode #custom-page.my-account .select2-selection__rendered,
.triibe-dark-mode #custom-page.my-account input,
.triibe-dark-mode #custom-page.my-account .select2-selection,
.triibe-dark-mode #custom-page.my-account table,
.triibe-dark-mode #custom-page.my-account address,
.triibe-dark-mode #custom-page.my-account th,
.triibe-dark-mode #custom-page.my-account td,
.triibe-dark-mode #custom-page.my-account tr,
.triibe-dark-mode #custom-thankyou address,
.triibe-dark-mode #custom-thankyou th,
.triibe-dark-mode #custom-thankyou td,
.triibe-dark-mode #custom-thankyou tr,
.triibe-dark-mode #custom-thankyou table.shop_table {
    border-color: #4f4f4f !important;
}

.triibe-dark-mode #custom-page.my-account address,
.triibe-dark-mode #custom-page.my-account label,
.triibe-dark-mode #custom-page.my-account th,
.triibe-dark-mode #custom-page.my-account td,
.triibe-dark-mode #custom-thankyou td,
.triibe-dark-mode #custom-thankyou .product-name .wc-item-meta,
.triibe-dark-mode #custom-thankyou th {
    color: #eee;
}
.triibe-dark-mode #custom-page.my-account button,
.triibe-dark-mode #custom-page.my-account .account-payment-methods-table + a,
.triibe-dark-mode #custom-page.my-account table a.button {
    color: #101010;
    background-color: #fff;
    border: 1px solid #fff;
}
.triibe-dark-mode #custom-page.my-account input,
.triibe-dark-mode #custom-page.my-account table a.button.change_payment_method,
.triibe-dark-mode #custom-page.my-account table a.button.cancel.wcs_block_ui_on_click,
.triibe-dark-mode #custom-page.my-account table a.button.wcs_deletion_error {
    background-color: transparent !important;
    color: #fff !important;
}
.triibe-dark-mode .select2-dropdown.select2-dropdown--below,
.triibe-dark-mode #custom-page.my-account .select2-selection {
    background-color: #101010 !important;
}
.triibe-dark-mode #custom-page.my-account .select2-selection__rendered,
.triibe-dark-mode #custom-page.my-account .select2-results__option[aria-selected],
.triibe-dark-mode .select2-results__option[data-selected],
.triibe-dark-mode .custom-billing-2 .select2-selection__rendered {
    color: #fff !important;
}

/* Subscription Editor */
.subscription-editor p {
    font-size: 0.85rem;
    color: #787878;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.triibe-dark-mode .subscription-editor p {
    color: #969696;
}

/* About Editor */
.about-editor p {
    color: #3f3f3f;
    font-size: 1rem;
    font-family: var(--font-tertiary);
    letter-spacing: 0 !important;
}
.triibe-dark-mode .about-editor p {
    color: #d1d5db;
}
.about-editor p:not(:last-child) {
    margin-bottom: 1rem;
}
/* Newsletter Editor */
.newsletter-editor p {
    font-size: 1rem;
    color: #101010;
}
.triibe-dark-mode .newsletter-editor p {
    color: #eee;
}
#subscription-wrapper {
    padding-bottom: 0;
    transition: all 0.3s ease;
}
#subscription-wrapper:has(#nyp-container.active) {
    padding-bottom: 110px;
}

.wp-polls {
    font-family: var(--font-primary);
    border: 1px solid #eee;
    padding: 3rem;
    margin: 3rem 0;
    border-radius: 0.5rem;
    letter-spacing: 0.05em;
    overflow: hidden;
}
.wp-polls p:has(a) {
    display: none !important;
}
.wp-polls strong {
    font-weight: 600;
}
.wp-polls i {
    font-style: normal;
}
.wp-polls-form > p:has(strong),
.wp-polls > p:first-child {
    display: inline-block;
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    color: #101010;
}
.wp-polls-ans > p {
    display: none;
    margin: 2rem 0 0 0;
    font-size: 1.25rem;
    font-weight: 500 !important;
    color: #101010;
    letter-spacing: 0.05em;
}
.wp-polls-ul {
    margin: 1.5rem 0 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.wp-polls ul li,
.wp-polls-ul li,
.wp-polls-ans ul li {
    position: relative;
    font-size: 1.25rem;
    color: #000;
    z-index: 1;
    padding: 1.2rem 0.5rem 1rem 0.5rem;
    background-color: #f9f9f9;
    border-radius: 4px;
}
.wp-polls ul li strong,
.wp-polls-ul li strong,
.wp-polls-ans ul li strong {
    width: 100%;
    font-weight: 500;
}
.wp-polls ul li:not(:has(i)),
.wp-polls-ul ul li:not(:has(i)),
.wp-polls-ans ul li:not(:has(i)),
.wp-polls ul li i,
.wp-polls-ul li i,
.wp-polls-ans ul li i {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.wp-polls ul li:has(input),
.wp-polls-ul li:has(input),
.wp-polls-ans ul li:has(input) {
    justify-content: left;
    gap: 1rem;
}
.wp-polls ul li input,
.wp-polls-ul li input,
.wp-polls-ans ul li input {
    width: 20px;
    height: 20px;
    accent-color: currentColor;
}
.wp-polls ul li:has(input) label,
.wp-polls-ul li:has(input) label,
.wp-polls-ans ul li:has(input) label {
    width: calc(100% - 36px);
}
.wp-polls ul li:not(:has(i))::before,
.wp-polls-ul ul li:not(:has(i))::before,
.wp-polls-ans ul li:not(:has(i))::before {
    content: none;
}
.wp-polls .pollbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border: none;
    height: 4px !important;
}
.wp-polls-form input[type="button"] {
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #eee;
    background-color: #101010;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.triibe-dark-mode .wp-polls {
    border: 1px solid #323232;
}
.triibe-dark-mode .wp-polls > p:first-child {
    border-color: #323232;
    color: #eee;
}
.triibe-dark-mode .wp-polls > p:first-child,
.triibe-dark-mode .wp-polls-ans > p {
    color: #fff;
}
.triibe-dark-mode .wp-polls-ul li {
    background-color: #323232;
    color: #fff;
}
.triibe-dark-mode .wp-polls-form input[type="button"] {
    color: #101010;
    background-color: #eee;
}

/* Text template */
#text-template h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 3rem;
    color: #101010;
}
#text-template h2 {
    color: #101010;
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 6rem;
    margin-bottom: 2rem;
    border-left: 2px solid #101010;
    padding-left: 0.75rem;
}
#text-template h2:first-of-type {
    margin-top: 0 !important;
}
#text-template h3 {
    color: #3f3f3f;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
#text-template ol,
#text-template ul {
    padding-left: 20px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
#text-template li,
#text-template p {
    letter-spacing: 0;
    font-family: var(--font-secondary);
    color: #787878;
    font-size: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.75;
}
/* Pasted/imported content sometimes brings along plain <div> wrappers
   around text instead of <p> (e.g. copied from another editor) - those
   fall outside every color rule above and default to unstyled black
   text, which is invisible in dark mode. Only target "leaf" divs (no
   nested div) so this doesn't touch the template's own structural
   wrapper divs. */
#text-template div:not(:has(div)) {
    color: #787878;
}
#text-template a {
    letter-spacing: 0;
    font-family: var(--font-secondary);
    color: #1f73ff !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
#text-template img {
    width: auto;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.triibe-dark-mode #text-template h2,
.triibe-dark-mode #text-template h1 {
    color: #fff;
    border-color: #fff;
}
.triibe-dark-mode #text-template h3 {
    color: #d1d5db;
}
.triibe-dark-mode #text-template li,
.triibe-dark-mode #text-template p {
    color: #d1d5db;
}
.triibe-dark-mode #text-template div:not(:has(div)) {
    color: #d1d5db;
}

.footer-editor p,
.footer-editor a {
    font-size: 14px;
    display: inline;
    line-height: 1.3;
}

/* Form Contact */
.get-form {
    display: grid;
    gap: 16px;
    max-width: 860px;
    margin: auto;
}
.get-form .full {
    grid-column: span 2;
}
.get-form input,
.get-form select,
.get-form textarea {
    width: 100%;
    padding: 17px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: verdana;
    color: #5b5b5b;
    transition: border-color 0.3s ease-in-out;
}
.get-form input:focus,
.get-form select:focus,
.get-form textarea:focus {
    border-color: #333;
    outline: none;
}
.get-form textarea {
    height: 128px;
    resize: vertical;
}
.get-form .half,
.get-form .full {
    display: flex;
    flex-direction: column;
}
.get-form input[type="submit"],
.get-form button {
    background: #000;
    color: #fff;
    padding: 12px 48px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    transition: background 0.3s ease-in-out;
    width: auto;
}
.get-form input[type="submit"]:hover,
.get-form button:hover {
    background: #333;
}

.triibe-dark-mode .get-form {
    background-color: #101010;
    color: #5b5b5b;
}
.triibe-dark-mode .get-form input,
.triibe-dark-mode .get-form select,
.triibe-dark-mode .get-form textarea {
    border: 1px solid #323232;
    color: #5b5b5b;
    background-color: #101010;
}
.triibe-dark-mode .get-form input:focus,
.triibe-dark-mode .get-form select:focus,
.triibe-dark-mode .get-form textarea:focus {
    border-color: #fff;
}
.triibe-dark-mode .get-form input[type="submit"],
.triibe-dark-mode .get-form button {
    color: #000;
    background-color: #eeeeee;
    transition: background 0.3s ease-in-out;
}
.triibe-dark-mode .get-form input[type="submit"]:hover,
.triibe-dark-mode .get-form button:hover {
    background: #adadad;
}

.width-120 {
    width: 120px !important;
}
.top-stories-text {
    width: calc(100% - 120px - 16px);
}

@media screen and (min-width: 576px) {
    .width-max-sm-240 {
        max-width: 240px;
    }
    .width-max-sm-225 {
        max-width: 225px;
    }
    .height-sm-100p {
        height: 100%;
    }
    .width-min-sm-225 {
        min-width: 225px;
    }
    .width-sm-125 {
        width: 125px !important;
    }
    .width-sm-130 {
        width: 130px;
    }
    .height-sm-420 {
        height: 420px;
    }
    .height-sm-320 {
        height: 320px !important;
    }
    .height-sm-180 {
        height: 180px;
    }
    .height-sm-240 {
        height: 240px;
    }
    .height-sm-170 {
        height: 170px !important;
    }
    .height-sm-150 {
        height: 150px;
    }
    .height-sm-140 {
        height: 140px !important;
    }
    .height-sm-130 {
        height: 130px !important;
    }
    .width-sm-220 {
        width: 220px !important;
    }
    .mb-negative-sm-30 {
        margin-bottom: -2.5rem;
    }
    #text-template h1 {
        font-size: 2rem;
    }
    #text-template h2 {
        font-size: 1.5rem;
    }
    #text-template h3 {
        font-size: 1.35rem;
        font-weight: 500;
    }
    .height-sm-400 {
        height: 400px;
    }
    .width-team {
        width: calc(100% - 16px - 125px);
    }
    .width-author-content {
        width: calc(100% - 16px - 24px - 250px) !important;
    }
    .width-180 {
        width: 180px;
    }
}
@media screen and (min-width: 768px) {
    .height-md-140 {
        height: 140px !important;
    }
    .width-md-270 {
        width: 270px !important;
    }
    .top-stories-text {
        width: calc(100% - 270px - 16px);
    }
}
@media screen and (min-width: 992px) {
    .height-lg-180 {
        height: 180px;
    }
    .height-lg-100p {
        height: 100%;
    }
    .height-lg-140 {
        height: 140px;
    }
    .height-lg-155 {
        height: 155px;
    }
    .height-lg-275 {
        height: 275px;
    }
    .height-lg-580 {
        height: 580px;
    }
    .height-lg-450 {
        height: 450px !important;
    }
    .height-lg-200 {
        height: 200px;
    }
    .height-lg-240 {
        height: 240px;
    }
    #custom-page.checkout .form-row-half {
        width: calc(50% - 8px) !important;
    }
    .about-editor p {
        font-size: 1.25rem;
    }
    .mb-negative-lg-70 {
        margin-bottom: -4.2rem;
    }
    .about-editor p:not(:last-child) {
        margin-bottom: 1rem;
    }
}
@media screen and (min-width: 1400px) {
    header .menu a {
        padding: 24px 28px;
    }
}
@media screen and (max-width: 576px) {
    .mobile-width-100 {
        width: 100%;
    }
    .mobile-width-120 {
        width: 120px;
    }
    .mobile-height-90 {
        height: 90px;
    }
    .mobile-height-180 {
        height: 180px;
    }
    .mobile-height-570 {
        height: 570px;
    }
    .single-content h1 {
        font-size: 1.65rem;
    }
    .single-content h4 {
        font-size: 1.05rem;
    }
    /* h2/h3/p/li font-size no longer overridden here - they're driven by
       the fluid clamp() sizes in the "Single Post Page" rules above,
       which already scale down for mobile on their own. */
    #custom-page.my-account .form-row.form-row-first,
    #custom-page.my-account .form-row.form-row-last {
        width: 100%;
    }
    .wp-polls {
        padding: 2rem 1rem;
    }
    .wp-polls > p:first-child {
        font-size: 1.5rem;
    }
    .wp-polls ul li,
    .wp-polls-ul li,
    .wp-polls-ans ul li {
        font-size: 1rem;
        padding: 13px 8px;
    }
    .get-form {
        grid-template-columns: 1fr !important;
    }
    .get-form .half,
    .get-form .full {
        grid-column: span 1 !important;
    }
}

.video-iframe iframe {
    --smush-placeholder-width: fit-content !important;

    width: 100%;
    height: 250px !important;
}
@media screen and (min-width: 576px) {
    .video-iframe {
        max-width: 500px !important;
    }
    .video-iframe iframe {
        height: 350px !important;
    }
}
@media screen and (min-width: 992px) {
    .video-iframe {
        max-width: 1000px !important;
    }
    .video-iframe iframe {
        height: 500px !important;
    }
}
@media screen and (max-width: 576px) {
    .hy-toggle-text {
        font-size: 14px;
    }
}

#hy-lead-magnet-toggle {
    display: none;
}
.writing-sideways {
    transform: rotate(-90deg) translateY(40px);
}
.hover-effect:hover {
    background-color: #000 !important;
    color: #fff !important;
}
.triibe-dark-mode .hover-effect:hover {
    background-color: #fff !important;
    color: #000 !important;
}
@media screen and (max-width: 576px) {
    .hy-toggle-text {
        font-size: 14px;
    }
    .writing-sideways {
        transform: rotate(-90deg) translateY(58px);
    }
}