/*
Theme Name: OIO
Theme URI: https://oioweb.com/
Author: OIO Team
Author URI: https://oioweb.com/
Description: OIO is a fast, lightweight, and highly customizable WordPress theme engineered for performance and scalability. With a flexible Header & Footer Builder, live search, dark mode, WooCommerce support, and extensive Customizer options, OIO gives developers and site owners full control without sacrificing speed. Perfect for blogs, businesses, and eCommerce websites.
Version: 1.7.36
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oio
Domain Path: /languages
Tags: one-column, two-columns, right-sidebar, custom-menu, featured-images, footer-widgets, rtl-language-support, theme-options, translation-ready, woocommerce, customizer
Tested up to: 6.6
Requires PHP: 7.2
*/

/* OIO Theme Styles */
:root {
    /* Fallback / Defaults - Overridden by Customizer (css.php) */
    --primary-color: #0274be;
    --secondary-color: #3a3a3a;
    --text-color: #3a3a3a;
    --bg-color: #ffffff;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --container-width: 1200px;
    --gap: 20px;

    /* Layout Variables */
    --sidebar-width: 30%;
}

/* ==============================================
   WordPress Core Classes
   ============================================== */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.gallery-caption {
    display: block;
    font-size: 13px;
    margin: 0 0 1.5em;
    /* Default bottom margin */
}

.bypostauthor {
    display: block;
    /* Typically applied to comments */
}

.sticky {
    display: block;
    /* Typically applied to sticky posts */
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* overflow-x: hidden; */
    /* REMOVED: Breaks Sticky Header */
    /* Prevent horizontal scroll */
    width: 100%;
    max-width: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* max-width: 100%; */
    /* overflow-x: hidden; */
    /* REMOVED: Breaks Sticky Header */
    /* Prevent horizontal scroll */
    font-family: var(--body-font-family, var(--font-body));
    font-size: var(--body-font-size, 16px);
    font-weight: var(--body-font-weight, 400);
    line-height: var(--body-line-height, 1.6);
    color: var(--text-color);
    background: var(--site-bg, #ffffff);
}

/* ... existing code ... */

/* Sticky Wrapper */
.oio-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

/* Smart Hide Class */
.oio-header-hidden {
    transform: translateY(-100%);
    visibility: hidden;
    /* Ensure it's not clickable */
}

#page {
    /* overflow-x: hidden; removed to fix sticky - KEEP REMOVED on wrapper */
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: var(--link-hover-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font-family, var(--font-heading));
    font-weight: var(--heading-font-weight, 400);
    margin-bottom: 0.5em;
    line-height: 1.2;
    color: var(--heading-color);
}

h1 {
    font-size: var(--h1-size, 2.5rem);
}

h2 {
    font-size: var(--h2-size, 2rem);
}

h3 {
    font-size: var(--h3-size, 1.75rem);
}

h4 {
    font-size: var(--h4-size, 1.5rem);
}

h5 {
    font-size: var(--h5-size, 1.25rem);
}

h6 {
    font-size: var(--h6-size, 1rem);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--gap);
    width: 100%;
}

/* Disable Padding Utility */
body.oio-disable-padding .site-content {
    padding: 0 !important;
}

body.oio-disable-padding .container {
    padding: 0 !important;
    max-width: 100% !important;
    /* Ensure it can go full width if needed */
}

/* Page Width Overrides */
body.oio-width-full .site-content .container {
    max-width: 100% !important;
}

/* Breadcrumbs */
.oio-breadcrumbs {
	margin-bottom: 1em;
	font-size: 0.9rem;
}
.oio-breadcrumbs-list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25em;
}
.oio-breadcrumb-item {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}
.oio-breadcrumb-sep {
	opacity: 0.7;
}
.oio-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.oio-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Related Posts */
.oio-related-posts {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--border-color, #e2e8f0);
}
.oio-related-posts-title {
	font-size: 1.25rem;
	margin-bottom: 0.75em;
}
.oio-related-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.oio-related-posts-list li {
	margin-bottom: 0.5em;
}
.oio-related-posts-list a {
	text-decoration: none;
	font-weight: 500;
}
.oio-related-posts-list a:hover {
	text-decoration: underline;
}
.oio-related-date {
	display: block;
	font-size: 0.85em;
	opacity: 0.8;
	margin-top: 0.15em;
}

/* Responsive oEmbed (YouTube, etc.) */
.oio-responsive-embed {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.oio-responsive-embed::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}
.oio-responsive-embed iframe,
.oio-responsive-embed object,
.oio-responsive-embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Prevent Gutenberg/Page Builder Overflow */
.alignfull,
.wp-block-cover-image-text,
.wp-block-cover-text,
.wp-block-cover,
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Elementor / Generic Full Width reset */
.elementor-section-stretched {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}



/* ------------------------------------------------------------------------- *
 *  Buttons
 * ------------------------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link {
    background: var(--btn-bg, var(--primary-color));
    color: var(--btn-text-color, #fff);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.5;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
    background: var(--btn-hover-bg, #005a87);
    color: var(--btn-hover-text-color, #fff);
}

/* ------------------------------------------------------------------------- *
 *  Content/Box background (Full Width: content area; Boxed: applied via #page below)
 * ------------------------------------------------------------------------- */
body.oio-layout-full-width .site-content {
    background: var(--boxed-bg, #fff);
}

/* ------------------------------------------------------------------------- *
 *  Separate Layout (full-width outer, content area boxed)
 * ------------------------------------------------------------------------- */
body.oio-layout-separate .site-content {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    background: var(--boxed-bg, #fff);
    padding: var(--boxed-padding, 0);
    border: var(--boxed-border-width, 0) solid var(--boxed-border-color, transparent);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------------------- *
 *  Boxed Layout
 * ------------------------------------------------------------------------- */
body.oio-layout-boxed {
    background-color: #f0f0f0;
    /* Outer background, usually overridden by customizer body bg? No, customizer sets body bg. If boxed, body bg is outer. */
    /* Update: standard WP, body bg is the main background. If boxed, #page is the inner container. */
}

body.oio-layout-boxed #page {
    /* Dimensions */
    max-width: var(--container-width);

    /* Decoration */
    background: var(--boxed-bg, #fff);
    border: var(--boxed-border-width, 0) solid var(--boxed-border-color, transparent);

    /* Spacing */
    padding: var(--boxed-padding, 0);
    margin: var(--boxed-margin, 30px auto);
    /* Fallback */

    /* Centering Override from Var */
    margin-left: var(--boxed-margin-x, auto);
    margin-right: var(--boxed-margin-x, auto);

    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------------------- *
 *  Grid System (Sidebar Logic)
 * ------------------------------------------------------------------------- */
.site-content .container {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: start;
}

.site-content .container>* {
    min-width: 0;
}

@media (min-width: 922px) {
    .site-content .container>* {
        grid-row: 1 !important;
    }

    /* Right Sidebar */
    body.oio-sidebar-right-sidebar .site-content .container {
        grid-template-columns: 1fr var(--sidebar-width);
    }

    body.oio-sidebar-right-sidebar #primary {
        grid-column: 1 !important;
    }

    body.oio-sidebar-right-sidebar #secondary {
        grid-column: 2 !important;
        align-self: stretch !important;
        height: auto !important;
    }

    /* Left Sidebar */
    body.oio-sidebar-left-sidebar .site-content .container {
        grid-template-columns: var(--sidebar-width) 1fr;
    }

    body.oio-sidebar-left-sidebar #secondary {
        grid-column: 1 !important;
        align-self: stretch !important;
        height: auto !important;
    }

    body.oio-sidebar-left-sidebar #primary {
        grid-column: 2 !important;
    }

    /* Both Sidebars */
    body.oio-sidebar-both-sidebars .site-content .container {
        grid-template-columns: 20% 1fr 20%;
    }

    body.oio-sidebar-both-sidebars #secondary {
        grid-column: 1 !important;
    }

    body.oio-sidebar-both-sidebars #primary {
        grid-column: 2 !important;
    }

    body.oio-sidebar-both-sidebars #tertiary {
        grid-column: 3 !important;
    }
}

/* Sticky Sidebar */
@media (min-width: 922px) {

    body.oio-sidebar-sticky,
    body.oio-sidebar-sticky #page,
    body.oio-sidebar-sticky .site-content,
    body.oio-sidebar-sticky .container {
        overflow: visible !important;
    }

    body.oio-sidebar-sticky #secondary,
    body.oio-sidebar-sticky #tertiary {
        position: static !important;
    }

    body.oio-sidebar-sticky .sidebar-inner {
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
        z-index: 10;
        width: 100%;
    }
}

/* Widget Areas */
.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

/* Sidebar Styles (Boxed/Decoration) */
#secondary,
#tertiary,
#sidebar-2 {
    background: var(--sidebar-bg, transparent);
    border: var(--sidebar-border-width, 0) solid var(--sidebar-border-color, transparent);
    border-radius: var(--sidebar-radius, 4px);
    padding: var(--sidebar-padding, 0);
}

/* ------------------------------------------------------------------------- *
 *  Header Builder
 * ------------------------------------------------------------------------- */
@media (min-width: 922px) {
    .oio-mobile-header {
        display: none;
    }

    .oio-desktop-header {
        display: block;
    }
}

/* Responsive Header Visibility (Structural change for Sticky) */
@media (max-width: 921px) {

    /* Hide Desktop Rows on Mobile */
    .site-header-top,
    .site-header-main,
    .site-header-bottom {
        display: none !important;
    }

    /* Show Mobile Row */
    .site-header-mobile {
        display: block !important;
    }
}

@media (min-width: 922px) {

    /* Hide Mobile Row on Desktop */
    .site-header-mobile {
        display: none !important;
    }

    /* Desktop rows display logic is handled by their rendering function (flex/block) */
}

/* Old Wrapper Logic (Deprecated/Removed from PHP) */
/* .oio-desktop-header { display: none; } */

.site-header-row {
    position: relative;
    /* Ensure absolute children (mobile menu) anchor here */
    transition: background-color 0.3s ease, padding 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site-header-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Sub-rows inside the combined desktop header (top/main/bottom stacked with no gaps) */
.site-header-sub-row {
    margin: 0;
    border-bottom: none;
}

/* Header Rows Specifics */
/* Header Rows Specifics */
.site-header-top {
    background: var(--header-top-transparent-bg, var(--header-top-bg, #fff)) !important;
    margin: var(--header-top-margin, 0) !important;
}

.site-header-top .container {
    max-width: var(--header-top-max-width, var(--container-width)) !important;
}

.site-header-top .site-header-row-inner {
    min-height: var(--header-top-height, 40px) !important;
}

.site-header-top.is-stuck {
    background: var(--header-top-stuck-bg, var(--header-top-bg)) !important;
}

.site-header-main {
    background: var(--header-main-transparent-bg, var(--header-main-bg, #fff)) !important;
    margin: var(--header-main-margin, 0) !important;
}

.site-header-main .container {
    max-width: var(--header-main-max-width, var(--container-width)) !important;
}

.site-header-main-primary .site-header-row-inner {
    min-height: var(--header-main-height, 70px) !important;
}

.site-header-main.is-stuck {
    background: var(--header-main-stuck-bg, var(--header-main-bg)) !important;
}

.site-header-bottom {
    background: var(--header-bottom-transparent-bg, var(--header-bottom-bg, #fff)) !important;
    margin: var(--header-bottom-margin, 0) !important;
}

.site-header-bottom .container {
    max-width: var(--header-bottom-max-width, var(--container-width)) !important;
}

.site-header-bottom .site-header-row-inner {
    min-height: var(--header-bottom-height, 40px) !important;
}

.site-header-bottom.is-stuck {
    background: var(--header-bottom-stuck-bg, var(--header-bottom-bg)) !important;
}

.site-header-mobile {
    background: var(--header-mobile-bg, #fff) !important;
    margin: var(--header-mobile-margin, 0) !important;
}

.site-header-mobile .container {
    max-width: var(--header-mobile-max-width, var(--container-width)) !important;
    padding: 0 !important;
    /* Reset container padding */
}

.site-header-mobile .site-header-row-inner {
    min-height: var(--header-mobile-height, 70px) !important;
    padding: 0 20px !important;
    /* Apply padding here instead for reliable spacing */
}

.site-header-mobile.is-stuck {
    background: var(--header-mobile-stuck-bg, var(--header-mobile-bg)) !important;
}


.site-header-section {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

/* Sticky Header Logic */
.oio-header-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    transition: top 0.25s linear;
    /* Smooth offest adjustment from JS */
}

/* Shrink on Scroll Logic (per row, proportional to configured heights) */
.oio-header-shrink.is-stuck .site-header-top .site-header-row-inner {
    min-height: var(--header-top-shrink-height, var(--header-top-height, 40px)) !important;
    transition: min-height 0.3s ease, padding 0.3s ease;
}

.oio-header-shrink.is-stuck .site-header-main-primary .site-header-row-inner {
    min-height: var(--header-main-shrink-height, var(--header-main-height, 70px)) !important;
    transition: min-height 0.3s ease, padding 0.3s ease;
}

.oio-header-shrink.is-stuck .site-header-bottom .site-header-row-inner {
    min-height: var(--header-bottom-shrink-height, var(--header-bottom-height, 40px)) !important;
    transition: min-height 0.3s ease, padding 0.3s ease;
}

/* Ensure inner row transitions are always active */
.site-header-row-inner {
    transition: min-height 0.3s ease, padding 0.3s ease;
}

.oio-sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

/* WP Admin Bar Offsets for Sticky Elements */
body.admin-bar .oio-sticky-wrapper,
body.admin-bar .oio-header-sticky {
    top: 32px;
}

@media (max-width: 782px) {

    body.admin-bar .oio-sticky-wrapper,
    body.admin-bar .oio-header-sticky {
        top: 46px;
    }
}

/* Transparent Header Logic */
.oio-header-transparent {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 90;
    /* Below sticky (100) and mobile menu (999) */
    background: var(--header-mobile-transparent-bg, transparent) !important;
    /* Default for mobile/generic */
}

/* Specific Row Transparent Variables - CSS Grid/Vars handling handled above but we need to map rows */
.site-header-top.oio-header-transparent {
    background: var(--header-top-transparent-bg, transparent) !important;
}

.site-header-main.oio-header-transparent {
    background: var(--header-main-transparent-bg, transparent) !important;
}

.site-header-bottom.oio-header-transparent {
    background: var(--header-bottom-transparent-bg, transparent) !important;
}

/* Mobile Transparency Logic */
.site-header-mobile.oio-header-transparent {
    background: var(--header-mobile-transparent-bg, transparent) !important;
}

/* Restoring background when stuck */
.site-header-mobile.oio-header-transparent.is-stuck,
.site-header-mobile.oio-header-transparent.oio-sticky-active {
    background: var(--header-mobile-stuck-bg, #fff) !important;
}

/* Ensure content pushes up? No, absolute typically overlays. 
   If user wants sticky + transparent, Sticky JS might handle it.
*/

.site-header-section-left {
    justify-content: flex-start;
}

.site-header-section-center {
    justify-content: center;
}

.site-header-section-right {
    justify-content: flex-end;
}

.site-header-section:empty {
    display: none;
}

.header-element {
    display: flex;
    align-items: center;
}

/* Transparent Header */
.oio-header-transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: transparent !important;
    border: none !important;
}



/* Sticky & Shrink */
.oio-header-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.oio-header-sticky.is-stuck {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.oio-header-shrink.is-stuck .site-header-row-inner {
    min-height: 50px !important;
}

.oio-header-shrink.is-stuck .custom-logo {
    max-height: 40px;
    width: auto;
}

/* Header Elements */
.site-title {
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}

.site-title a {
    color: inherit;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.main-navigation a {
    font-weight: 500;
    color: inherit;
}

.main-navigation a:hover {
    color: var(--primary-color);
}

/* Ensure menu links and toggle are always clickable (override any parent pointer-events) */
.main-navigation a,
#mobile-navigation a {
    pointer-events: auto;
    cursor: pointer;
}
.main-navigation.toggled a,
#mobile-navigation.toggled a {
    pointer-events: auto;
    cursor: pointer;
}
.menu-toggle,
.mobile-toggle-wrapper {
    pointer-events: auto;
    cursor: pointer;
}

.oio-search-item {
    position: relative;
}

.oio-search-icon {
    display: block;
    padding: 5px;
    color: inherit;
}

.oio-search-form-wrap {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    padding: 15px;
    z-index: 99;
    border-radius: 4px;
}

body.search-open .oio-search-form-wrap {
    display: block;
}

.area-button {
    /* Styles handled by generic .button rules but ensured here */
    color: #fff !important;
}

/* Logo Sizing */
/* Logo Sizing */
.site-branding .custom-logo-link {
    display: block;
    max-width: var(--logo-width, 150px);
}

.site-branding .custom-logo,
.site-branding img.custom-logo {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

@media (max-width: 921px) {

    /* Animated Mobile Trigger */
    .menu-toggle {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        line-height: 0;
    }

    .hamburger-box {
        position: relative;
        display: inline-block;
        width: 30px;
        height: 24px;
    }

    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after {
        width: 30px;
        height: 3px;
        background-color: var(--app-bar-icon-color, #333);
        /* Use theme var or fallback */
        border-radius: 3px;
        position: absolute;
        transition: transform 0.15s ease;
    }

    .hamburger-inner {
        top: 50%;
        display: block;
        margin-top: -1.5px;
    }

    .hamburger-inner::before,
    .hamburger-inner::after {
        content: "";
        display: block;
    }

    .hamburger-inner::before {
        top: -10px;
        transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
    }

    .hamburger-inner::after {
        bottom: -10px;
        transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    /* Active State (X Shape) - Controlled by aria-expanded="true" */
    .menu-toggle[aria-expanded="true"] .hamburger-inner {
        transform: rotate(225deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .menu-toggle[aria-expanded="true"] .hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
    }

    .menu-toggle[aria-expanded="true"] .hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    /* Override colors if header text color is set */
    .site-header-mobile .hamburger-inner,
    .site-header-mobile .hamburger-inner::before,
    .site-header-mobile .hamburger-inner::after {
        background-color: var(--header-mobile-text-color, #333);
    }

    .main-navigation:not(.toggled),
    #mobile-navigation:not(.toggled) {
        display: none;
    }

    /* Mobile Menu Styles */

    /* 1. Sidebar Style (Off-Canvas) - Enhanced */
    #mobile-navigation.mobile-menu-style-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
        /* Elegant easing */
        left: auto;
        display: block !important;
        background: #fff;
        z-index: 10000;
        /* Higher than header */
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    }

    #mobile-navigation.mobile-menu-style-sidebar.toggled {
        transform: translateX(0);
        display: block !important;
    }

    /* 2. Fullscreen Style - Enhanced */
    #mobile-navigation.mobile-menu-style-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;

        /* Glassmorphism / Premium BG */
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        transform: scale(0.95);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 10000;
    }

    #mobile-navigation.mobile-menu-style-fullscreen.toggled {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }

    /* Fullscreen Typography override */
    #mobile-navigation.mobile-menu-style-fullscreen ul li {
        border-bottom: none;
        text-align: center;
        margin-bottom: 10px;
    }

    #mobile-navigation.mobile-menu-style-fullscreen ul li a {
        font-size: 24px;
        font-weight: 700;
        padding: 10px;
    }

    #mobile-navigation.mobile-menu-style-fullscreen ul li a:hover {
        padding-left: 10px;
        /* Reset slide */
        color: var(--primary-color);
        transform: scale(1.1);
    }

    /* Mobile Menu Aesthetics & Animations */

    /* 1. Keyframes for Staggered Entry */
    @keyframes oioFadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 2. General Mobile Menu Styling (All Modes) */
    .mobile-navigation-container ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-navigation-container ul li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        opacity: 0;
        /* Hidden by default for animation */
        animation: oioFadeInUp 0.4s ease forwards;
        transform: translateY(20px);
    }

    .mobile-navigation-container ul li:last-child {
        border-bottom: none;
    }

    .mobile-navigation-container ul li a {
        display: block;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 500;
        color: var(--text-color);
        transition: all 0.2s ease;
        text-decoration: none;
    }

    .mobile-navigation-container ul li a:hover {
        background-color: rgba(0, 0, 0, 0.02);
        color: var(--primary-color);
        padding-left: 25px;
        /* Slight slide effect */
    }

    /* Staggered Delays (up to 10 items) */
    .mobile-navigation-container.toggled ul li:nth-child(1) {
        animation-delay: 0.1s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(2) {
        animation-delay: 0.15s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(3) {
        animation-delay: 0.2s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(4) {
        animation-delay: 0.25s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(5) {
        animation-delay: 0.3s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(6) {
        animation-delay: 0.35s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(7) {
        animation-delay: 0.4s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(8) {
        animation-delay: 0.45s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(9) {
        animation-delay: 0.5s;
    }

    .mobile-navigation-container.toggled ul li:nth-child(10) {
        animation-delay: 0.55s;
    }


    /* Default Dropdown Style - Enhanced */
    #mobile-navigation.mobile-menu-style-dropdown.toggled {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: #fff !important;
        z-index: 9999;
        border-top: 1px solid #eee;
        min-height: 50px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        /* Soft shadow */
    }

    /* Common Toggled State (Modified existing) */
    #mobile-navigation.toggled {
        /* Default fallback (Dropdown) */
        background: #fff;
        z-index: 999;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
        border-top: 1px solid #eee;
    }

    #mobile-navigation.toggled ul {
        flex-direction: column;
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 15px;
    }

    .main-navigation.toggled {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 100;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .main-navigation.toggled ul {
        flex-direction: column;
    }

    .site-header-row-inner {
        flex-wrap: wrap;
    }

    body.oio-sidebar-right-sidebar .site-content .container,
    body.oio-sidebar-left-sidebar .site-content .container,
    body.oio-sidebar-both-sidebars .site-content .container {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------------- *
 *  Footer Builder
 * ------------------------------------------------------------------------- */
.site-footer {
    background: #f9f9f9;
    /* Default */
    padding-top: 0;
}

/* Footer Rows */
.site-footer-top {
    background: var(--footer-top-bg, transparent);
    padding: var(--footer-top-padding, 0);
    margin: var(--footer-top-margin, 0);
    border: var(--footer-top-border-width, 0) solid var(--footer-top-border-color, transparent);
    border-radius: var(--footer-top-radius, 0);
}

.site-footer-main {
    background: var(--footer-main-bg, transparent);
    padding: var(--footer-main-padding, 40px 0);
    margin: var(--footer-main-margin, 0);
    border: var(--footer-main-border-width, 0) solid var(--footer-main-border-color, transparent);
    border-radius: var(--footer-main-radius, 0);
}

.site-footer-bottom {
    background: var(--footer-bottom-bg, transparent);
    padding: var(--footer-bottom-padding, 20px 0);
    margin: var(--footer-bottom-margin, 0);
    border: var(--footer-bottom-border-width, 0) solid var(--footer-bottom-border-color, transparent);
    border-radius: var(--footer-bottom-radius, 0);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    /* Default visual separator if no border set? */
}

.footer-row-inner {
    display: grid;
    gap: 30px;
    width: 100%;
}

.footer-row-inner>* {
    min-width: 0;
}

.footer-cols-1 {
    grid-template-columns: 1fr;
}

.footer-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.footer-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.footer-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 921px) {
    .footer-row-inner {
        grid-template-columns: 1fr !important;
    }

    .footer-bottom-flex {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* Footer Bottom Layout */
.footer-bottom-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.footer-bottom-flex.layout-left-right {
    justify-content: space-between;
}

.footer-bottom-flex.layout-right-left {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.footer-bottom-flex.layout-center {
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.footer-bottom-flex.layout-center .footer-menu {
    order: -1;
    margin-bottom: 10px;
}

.footer-menu ul {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px;
    justify-content: center;
    flex-direction: row !important;
}

.footer-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-menu a {
    display: inline-block;
}

.footer-menu a:hover {
    color: var(--primary-color);
}

/* Footer Bar */
.site-footer-bar .footer-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.site-footer-bar.footer-bar-layout-stacked .footer-bar-inner {
    flex-direction: column;
    align-items: stretch;
}
.footer-bar-section {
    min-width: 0;
}

/* Footer layout presets (like Astra layout-4, small, small-2) */
.oio-footer-preset-small .site-footer-row,
.oio-footer-preset-small-2 .site-footer-row {
    padding-top: 12px;
    padding-bottom: 12px;
}
.oio-footer-preset-small .site-footer .container,
.oio-footer-preset-small-2 .site-footer .container {
    max-width: 100%;
}
.oio-footer-preset-small .footer-row-inner,
.oio-footer-preset-small-2 .footer-row-inner {
    gap: 15px;
}
.oio-footer-preset-small-2 .site-footer-bottom .footer-bottom-flex {
    flex-wrap: nowrap;
    gap: 20px;
}
.oio-footer-preset-layout-4 .site-footer-advanced .footer-advanced-inner {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
@media (max-width: 768px) {
    .oio-footer-preset-layout-4 .site-footer-advanced .footer-advanced-inner {
        grid-template-columns: 1fr;
    }
}
/* Advanced Footer */
.site-footer-advanced .footer-advanced-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 921px) {
    .site-footer-advanced .footer-advanced-inner {
        grid-template-columns: 1fr;
    }
}
/* Content Layout (per-post) */
body.oio-content-layout-narrow .site-content .container {
    max-width: 800px;
}
body.oio-content-layout-full .site-content .container {
    max-width: 100%;
}
/* Header Cart */
.oio-header-cart .oio-cart-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}
.oio-header-cart .oio-cart-count {
    background: var(--primary-color, #0274be);
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Custom header media (image / video) – layout controlled by Customizer > Header Builder > Header Media Display */
.oio-custom-header-media {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Ensure header media (video/image) is visible on mobile – desktop rows are hidden but media stays */
@media (max-width: 921px) {
    .oio-header-desktop-wrap:has(.oio-custom-header-media),
    .oio-header-desktop-wrap .oio-custom-header-media {
        display: block !important;
        visibility: visible !important;
    }
    .oio-header-desktop-wrap .oio-custom-header-media .wp-custom-header,
    .oio-header-desktop-wrap .oio-custom-header-media .custom-header,
    .oio-header-desktop-wrap .oio-custom-header-media video.oio-header-video {
        display: block !important;
        visibility: visible !important;
    }
}

/* Header cart dropdown (mini cart) */
.oio-header-cart.oio-cart-style-dropdown {
    position: relative;
}
.oio-cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 320px;
    max-width: 90vw;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.oio-header-cart.oio-cart-open .oio-cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.oio-cart-dropdown-inner {
    padding: 12px;
    max-height: 70vh;
    overflow-y: auto;
}
.oio-cart-dropdown-inner .widget_shopping_cart_content ul {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.oio-cart-dropdown-inner .widget_shopping_cart_content ul li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.oio-cart-dropdown-inner .widget_shopping_cart_content .buttons a {
    display: inline-block;
    margin-top: 8px;
    margin-right: 8px;
    padding: 8px 14px;
    background: var(--primary-color, #0274be);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.oio-cart-dropdown-inner .widget_shopping_cart_content .buttons a:hover {
    opacity: 0.9;
    color: #fff;
}

/* Off-Canvas Menu Panel */
.oio-off-canvas-panel {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 100000;
    transition: right 0.3s ease;
    overflow-y: auto;
}
body.oio-off-canvas-open .oio-off-canvas-panel {
    right: 0;
}
body.oio-off-canvas-open .oio-off-canvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 99999;
}
.oio-off-canvas-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
}
.oio-off-canvas-nav {
    padding: 50px 20px 20px;
}
.oio-off-canvas-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.oio-off-canvas-menu li { margin: 0; padding: 0; }
.oio-off-canvas-menu a { display: block; padding: 10px 0; }

/* Banners */
.oio-banner {
    padding: 2rem 0;
    margin-bottom: 1rem;
}
.oio-banner .oio-banner-title { margin: 0 0 0.5em; }
.oio-banner .oio-banner-description { margin: 0; }
.oio-archive-banner,
.oio-single-banner,
.oio-special-banner { background: var(--bg-color, #f5f5f5); }

/* Page Title Banner (per-page image + text) */
.oio-page-title-banner {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.oio-page-title-banner-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
}
.oio-page-title-banner-inner {
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem;
    max-width: 100%;
}
.oio-page-title-banner-inner--align-left { text-align: left; }
.oio-page-title-banner-inner--align-center { text-align: center; }
.oio-page-title-banner-inner--align-right { text-align: right; }
/* Banner flex alignment for text position */
.oio-page-title-banner--align-left { justify-content: flex-start; }
.oio-page-title-banner--align-center { justify-content: center; }
.oio-page-title-banner--align-right { justify-content: flex-end; }
.oio-page-title-banner-title {
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}

/* Page Title Banner: Cover / Fixed / Custom use cover fit */
.oio-page-title-banner--cover,
.oio-page-title-banner--fixed_200,
.oio-page-title-banner--fixed_350,
.oio-page-title-banner--fixed_500,
.oio-page-title-banner--custom {
    background-size: cover;
}

/* Page Title Banner: always full width – ensure parents don't clip */
.site-main:has(.oio-page-title-banner),
.site-content .container:has(.oio-page-title-banner) {
    overflow-x: visible !important;
}

/* Live Search results dropdown */
.oio-live-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-top: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}
.oio-live-search-results.is-visible {
    display: block;
}
.oio-live-search-results .oio-live-search-loading,
.oio-live-search-results .oio-live-search-empty {
    padding: 12px 15px;
    margin: 0;
    color: #666;
}
.oio-live-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.oio-live-search-list li { margin: 0; border-bottom: 1px solid #eee; }
.oio-live-search-list a {
    display: block;
    padding: 10px 15px;
    color: inherit;
    text-decoration: none;
}
.oio-live-search-list a:hover {
    background: rgba(0,0,0,0.04);
}

/* Blog layouts (archive, home, search) */
.oio-blog-layout-2 .site-main > article,
.oio-blog-layout-3 .site-main > article,
.oio-blog-layout-4 .site-main > article {
    margin-bottom: 2rem;
}
.oio-blog-layout-2 .site-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.oio-blog-layout-3 .site-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.oio-blog-layout-4 .site-main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.oio-blog-layout-5 .site-main > article {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    align-items: flex-start;
}
.oio-blog-layout-5 .site-main > article:nth-child(even) { flex-direction: row-reverse; }
.oio-blog-layout-5 .post-thumbnail { flex: 0 0 40%; max-width: 40%; }
.oio-blog-layout-5 .entry-header + .entry-content { flex: 1; }
.oio-blog-layout-6 .site-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    grid-auto-flow: dense;
}
.oio-blog-layout-6 .site-main > article { margin-bottom: 0; }
@media (max-width: 921px) {
    .oio-blog-layout-2 .site-main { grid-template-columns: 1fr; }
    .oio-blog-layout-3 .site-main { grid-template-columns: 1fr; }
    .oio-blog-layout-4 .site-main { grid-template-columns: 1fr; }
    .oio-blog-layout-5 .site-main > article { flex-direction: column !important; }
    .oio-blog-layout-5 .post-thumbnail { max-width: 100%; flex: 0 0 100%; }
}

/* Footer Configurable Text */
.footer-bottom-flex,
.footer-copyright,
.footer-menu a {
    color: var(--footer-bottom-text-color, inherit);
    font-size: var(--footer-bottom-font-size, 14px);
}

/* ------------------------------------------------------------------------- *
 *  Forms & Inputs (Global Reset)
 * ------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    /* User requested safety buffer against overflow */
    padding: 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 4px;
    background: #fff;
    color: var(--text-color);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 15px;
    min-width: 0 !important;
    /* Prevent flex/grid item overflow */
}

textarea {
    resize: vertical;
}

/* ------------------------------------------------------------------------- *
 *  Mobile Textarea/Form Overflow Fix (High Specificity)
 * ------------------------------------------------------------------------- */
#respond,
.comment-form,
.comments-area {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    /* Hard clip of container */
    box-sizing: border-box;
    margin: 0 !important;
    padding-right: 0 !important;
}

#respond textarea,
.comment-form textarea,
.comments-area textarea,
#comment {
    /* Target specific ID provided by user */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    /* Center it */
    box-sizing: border-box !important;
    min-width: 0 !important;
    /* Defeat cols attribute */
    display: block !important;
    min-height: 150px;
}

.comment-form-comment label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* ==============================================
   Mobile App Bar
   ============================================== */
@media (max-width: 921px) {
    .oio-app-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        background: var(--app-bar-bg, #fff);
        border-top: 1px solid var(--app-bar-border, #e2e8f0);
        align-items: center;
        justify-content: space-around;
        min-height: 60px;
        z-index: 9999;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }

    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

@media (min-width: 922px) {
    .oio-app-bar {
        display: none;
    }
}

.oio-app-icon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--app-bar-color, #757575);
    font-size: 10px;
    text-decoration: none;
    height: 100%;
    padding: 8px 0;
    position: relative;
    cursor: pointer;
}

.oio-app-icon svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}

.oio-app-icon.active {
    color: var(--app-bar-active, #0274be);
}

.oio-cart-count {
    position: absolute;
    top: 5px;
    right: 50%;
    margin-right: -15px;
    background: #ff0000;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oio-cart-count:empty {
    display: none;
}

/* Smart Header Logic */
@media (max-width: 921px) {
    .site-header-mobile {
        transition: transform 0.3s ease;
        position: sticky;
        /* Ensure it sticks if sticky mode is on, or relative but transformable */
        top: 0;
        z-index: 1000;
        width: 100%;
    }

    .site-header-mobile.oio-header-hidden {
        transform: translateY(-100%);
    }
}

/* Full Screen Language Modal */
.oio-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.oio-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.oio-modal-content {
    text-align: center;
    position: relative;
    width: 90%;
    max-width: 400px;
}

.oio-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    font-size: 40px;
    color: #333;
    cursor: pointer;
}

.oio-lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.oio-lang-list li {
    margin: 15px 0;
}

.oio-lang-list a {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

.oio-lang-list a.current-lang {
    color: var(--oio-primary-color, #0274be);
}

/* ------------------------------------------------------------------------- *
 *  Mobile App Bar
 * ------------------------------------------------------------------------- */
.oio-mobile-app-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--app-bar-bg, #fff);
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 65px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.oio-app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0px;
    /* Force equal width ignoring content */
    width: 0;
    /* Extra safety */
    min-width: 0;
    height: 100%;
    color: var(--app-bar-color, #666);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    transition: color 0.1s ease;
    padding: 0;
    margin: 0;
    border-radius: 0;
    gap: 5px;
}

.oio-app-icon:hover,
.oio-app-icon:focus {
    color: var(--app-bar-active, #2271b1);
    background-color: rgba(255, 255, 255, 0.1);
}

.oio-app-icon.active {
    color: var(--app-bar-active, #2271b1);
    background-color: transparent;
    box-shadow: none;
    font-weight: 700;
}

/* Icon Sizing */
.oio-app-icon i,
.oio-app-icon span[class*='dashicons'],
.oio-app-icon .oio-emoji-icon {
    font-size: 24px;
    /* Fixed size for all states */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    /* Fixed width container */
    height: 28px;
    /* Fixed height container */
    min-width: 28px;
    min-height: 28px;
    text-align: center;
}

/* Specific fix for Phosphor/Remix if needed */
.oio-app-icon i {
    font-style: normal;
}

/* Cart Badge */
.oio-app-icon .oio-cart-count {
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: 6px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    padding: 2px;
    font-size: 10px;
    line-height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 1px solid #fff;
}

/* Label Locking */
.oio-app-icon>span:not(.oio-cart-count):not(.oio-emoji-icon):not([class*='dashicons']) {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Hide on Desktop */
@media (min-width: 922px) {
    .oio-mobile-app-bar {
        display: none !important;
    }
}

/* ------------------------------------------------------------------------- *
 *  Global Stability Fixes
 * ------------------------------------------------------------------------- */
html {
    overflow-y: scroll;
    /* Force scrollbar track to prevent layout jumps between pages */
}

.oio-mobile-app-bar * {
    box-sizing: border-box;
    /* Strict box model */
}

/* ==============================================
   FIX: Force Sticky & Smart Hide
   ============================================== */
/* Ensure no overflow breaks sticky */
html,
body {
    overflow-x: clip !important;
    overflow-y: auto;
}

/* Base Sticky Class (Will be toggled by JS) */
/* Base Sticky Class (Will be toggled by JS) */
/* Base Sticky Class (Native Sticky) – Top, Main, Bottom, Mobile */
.site-header-top.oio-header-sticky,
.site-header-main.oio-header-sticky,
.site-header-bottom.oio-header-sticky,
.site-header-mobile.oio-header-sticky {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Transparent State (Overlay) - Forces Fixed/Absolute to overlap content */
.site-header-top.oio-header-transparent,
.site-header-main.oio-header-transparent,
.site-header-bottom.oio-header-transparent,
.site-header-mobile.oio-header-transparent {
    position: absolute !important;
    /* Initial scroll away */
    width: 100%;
}

/* Specific case: Sticky AND Transparent */
/* Desktop rows (Top/Main/Bottom) + Mobile behave as one fixed header stack when sticky + transparent are enabled. */
.site-header-top.oio-header-sticky.oio-header-transparent,
.site-header-main.oio-header-sticky.oio-header-transparent,
.site-header-bottom.oio-header-sticky.oio-header-transparent,
.site-header-mobile.oio-header-sticky.oio-header-transparent {
    position: fixed !important;
}

/* Handle Admin Bar for Sticky Header (Top, Main, Bottom, Mobile) */
body.admin-bar .site-header-top.oio-header-sticky,
body.admin-bar .site-header-main.oio-header-sticky,
body.admin-bar .site-header-bottom.oio-header-sticky,
body.admin-bar .site-header-mobile.oio-sticky-active,
body.admin-bar .site-header-mobile.oio-header-sticky {
    top: 32px !important;
}

@media (max-width: 782px) {

    body.admin-bar .site-header-top.oio-header-sticky,
    body.admin-bar .site-header-main.oio-header-sticky,
    body.admin-bar .site-header-bottom.oio-header-sticky,
    body.admin-bar .site-header-mobile.oio-sticky-active,
    body.admin-bar .site-header-mobile.oio-header-sticky {
        top: 46px !important;
    }
}

/* Ensure Wrapper doesn't constrain */
#page {
    overflow: visible !important;
    clip-path: none !important;
}

/* Smart Hide Class - High Priority */
.oio-header-hidden {
    transform: translateY(-100%) !important;
    visibility: hidden;
    transition: transform 0.3s ease-in-out;
}

/* Spacer Logic Removed - Using Native Sticky */

/* ==============================================
   Content offset when Main Header is transparent/fixed (prevents overlap)
   Uses body class from PHP for reliable matching; :has() as fallback.
   ============================================== */
body.oio-main-header-overlay #content,
body:has(.site-header-main.oio-header-transparent) #content {
    padding-top: max(var(--header-main-height, 70px), 70px) !important;
    position: relative;
    z-index: 0;
}

/* When both Top and Main rows overlay, use combined height */
body.oio-top-header-overlay.oio-main-header-overlay #content,
body:has(.site-header-top):has(.site-header-main.oio-header-transparent) #content {
    padding-top: max(
        calc(var(--header-top-height, 40px) + var(--header-main-height, 70px)),
        110px
    ) !important;
}

/* Fallback when :has() not supported: sibling selector */
.site-header-main.oio-header-transparent ~ #content,
.site-header-bottom.oio-header-transparent ~ #content {
    padding-top: max(var(--header-main-height, 70px), 70px) !important;
    position: relative;
    z-index: 1;
}

/* ==============================================
   Mobile Fix: Content Under Transparent Header
   ============================================== */
@media (max-width: 921px) {

    /* Safe fallback using :has() for modern browsers */
    /* Remove :not(.home) to fix overlap on homepage slider too, per user request */
    body:has(.site-header-mobile.oio-header-transparent) #content {
        padding-top: var(--header-mobile-height, 90px) !important;
        position: relative;
        z-index: 1;
    }

    /* Fallback for older browsers (standard sibling) */
    .site-header-mobile.oio-header-transparent~#content {
        padding-top: var(--header-mobile-height, 90px) !important;
    }
}

/* ==============================================
   Micro-Interactions (Enhancements)
   ============================================== */

/* 1. Pulse Effect on Click */
@keyframes oio-click-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.92);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply Pulse to Interactive Icons */
.oio-search-icon:active,
.menu-toggle:active,
.oio-app-icon:active,
.hamburger-box:active {
    animation: oio-click-pulse 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Smooth Dropdown Transitions (Desktop) */
@media (min-width: 922px) {

    /* Ensure sub-menus are block but hidden visually for transition */
    .main-navigation ul ul {
        display: block !important;
        /* Override display:none */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        /* Slide effect */
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

        /* Structural safety */
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        min-width: 200px;
        z-index: 999;
        padding: 10px 0;
        border-radius: 4px;
    }

    /* Show on Hover/Focus */
    .main-navigation ul li:hover>ul,
    .main-navigation ul li:focus-within>ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Nested Sub-Menus (Right Slide) */
    .main-navigation ul ul ul {
        top: 0;
        left: 100%;
        transform: translateX(10px);
    }

    .main-navigation ul ul li:hover>ul {
        transform: translateX(0);
    }

    /* Dropdown Link Styles */
    .main-navigation ul ul li a {
        padding: 10px 20px;
        display: block;
        white-space: nowrap;
    }
}

/* ==============================================
   Dark Mode
   ============================================== */
body.dark-mode {
    --site-bg: #121212;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --border-color: #333333;
    --secondary-color: #a0a0a0;

    /* Headers & Footers */
    --header-top-bg: #1e1e1e !important;
    --header-main-bg: #1e1e1e !important;
    --header-bottom-bg: #1e1e1e !important;
    --header-mobile-bg: #1e1e1e !important;

    --footer-top-bg: #1e1e1e !important;
    --footer-main-bg: #1e1e1e !important;
    --footer-bottom-bg: #121212 !important;

    --app-bar-bg: #1e1e1e !important;
    --app-bar-border: #333333 !important;

    /* Links */
    --link-color: #64b5f6;

    /* Form Elements */
    --input-bg: #2c2c2c;
    --input-border: #444;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--input-bg, #2c2c2c);
    border-color: var(--input-border, #444);
    color: var(--text-color);
}

body.dark-mode .site-header-row,
body.dark-mode .site-footer-row,
body.dark-mode .oio-mobile-app-bar {
    border-color: var(--border-color);
}

/* Dark Mode Toggle Button */
.oio-dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--text-color);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.oio-dark-mode-toggle:hover {
    color: var(--primary-color);
}

.oio-dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icons for Light/Dark State */
.oio-dark-mode-toggle .moon-icon {
    display: block;
}

.oio-dark-mode-toggle .sun-icon {
    display: none;
}

body.dark-mode .oio-dark-mode-toggle .moon-icon {
    display: none;
}

/* ==============================================
   Scroll To Top (Premium)
   ============================================== */
.oio-scroll-top {
    position: fixed !important;
    /* Dimensions & Positioning */
    bottom: var(--scroll-top-offset-bottom, 30px) !important;
    right: var(--scroll-top-right, 30px) !important;
    left: var(--scroll-top-left, auto) !important;
    width: var(--scroll-top-size, 45px) !important;
    height: var(--scroll-top-size, 45px) !important;

    /* Decoration */
    background: var(--scroll-top-bg, #0274be) !important;
    color: var(--scroll-top-color, #fff) !important;
    border: var(--scroll-top-border-width, 0) solid var(--scroll-top-border-color, transparent) !important;
    border-radius: var(--scroll-top-radius, 8px) !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    text-decoration: none !important;

    /* Premium Look */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(5px) !important;

    /* State & Transition */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.oio-scroll-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.oio-scroll-top:hover {
    background: var(--scroll-top-hover-bg, #333) !important;
    color: var(--scroll-top-hover-color, #fff) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
}

.oio-scroll-top:focus {
    color: var(--scroll-top-color, #fff) !important;
    outline: none !important;
}

/* Icon Sizing */
.oio-scroll-top i,
.oio-scroll-top svg {
    font-size: var(--scroll-top-icon-size, 20px) !important;
    width: var(--scroll-top-icon-size, 20px) !important;
    height: var(--scroll-top-icon-size, 20px) !important;
    line-height: 1 !important;
    fill: currentColor !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}

/* Mobile Adjustment (Avoid App Bar) */
@media (max-width: 921px) {
    body:has(.oio-mobile-app-bar) .oio-scroll-top {
        bottom: calc(var(--scroll-top-offset-bottom, 30px) + 70px) !important;
    }
}

/* Ensure header is always above sliders/content on all pages (e.g. product, scroll) */
.site-header-top,
.site-header-main,
.site-header-bottom,
.site-header-mobile,
.oio-header-sticky,
.oio-sticky-wrapper,
.oio-header-desktop-wrap {
    z-index: 99999 !important;
}
/* Keep main content below header so it never overlaps when scrolling */
#content.site-content {
    position: relative;
    z-index: 0;
}