/* =============================================
   GLASSMORPHISM CONTENT PANELS - FIXED FOR ZOOM
   This version preserves glassmorphism styling while
   allowing the magnifier zoom tool to work properly
   ============================================= */

/* =============================================
   MAIN CONTENT AREA
   ============================================= */

.site-content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

@media (max-width: 1168px) {
    .site-content {
        margin: 8px auto;
        padding: 0 12px !important;
    }

    .entry-content,
    .page-content,
    .post-content {
        padding: 0 !important;
    }
}

/* =============================================
   GLASSMORPHISM PANELS
   ============================================= */

article .entry-header,
article .entry-footer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0;
}

article .entry-content,
.page article .entry-content,
.single article .entry-content {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

article,
.page article,
.single article {
    background: rgba(255, 255, 255, 0.4) !important;
	background: rgba(255, 255, 255, 0.4) !important;
	backdrop-filter: blur(1.3px) brightness(1.25) !important;
	-webkit-backdrop-filter: blur(1.3px) brightness(1.25) !important;
    border-radius: 4px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.15),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.05) !important;
    padding: 40px !important;
    margin-bottom: 30px;
    position: relative;
    overflow: visible !important;
}

/* Mobile - reduce padding */
@media (max-width: 1168px) {
    article,
    .page article,
    .single article {
        padding: 24px 20px !important;
        border-radius: 4px !important;
        margin-bottom: 20px;
    }
}

/* Remove pseudo-elements that could interfere */
.entry-content::before,
.entry-content::after {
    display: none !important;
}

/* =============================================
   MAGNIFIER ZOOM TOOL - CRITICAL FIXES
   ============================================= */

.magnifier-lens,
#magnifierLens {
    position: absolute !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 50% !important;
    cursor: none !important;
    width: 150px !important;
    height: 150px !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2) !important;
    background-repeat: no-repeat !important;
    display: none;
    background-color: transparent;
    padding: 0 !important;
    margin: 0 !important;
}

.comparison-container,
.entry-content .comparison-container {
    overflow: visible !important;
    position: relative;
}

.image-container,
.entry-content .image-container {
    overflow: visible !important;
    position: relative;
}

.patch-card,
.entry-content .patch-card {
    overflow: visible !important;
}

.entry-content {
    overflow: visible !important;
}

/* =============================================
   FOOTER & SIDEBAR
   ============================================= */

.site-footer {
    background: rgba(250, 250, 250, 0.3) !important;
    backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) brightness(1.3) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1) !important;
    margin-top: 40px;
    padding: 30px 20px;
}

.sidebar .widget,
.widget-area .widget {
    background: rgba(245, 245, 245, 0.35) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    padding: 25px;
    margin-bottom: 25px;
}

/* =============================================
   REMOVE WHITE BOX IN FOOTER
   ============================================= */

.site-footer .widget,
.site-footer .footer-widget,
.site-footer .widget-area,
.site-footer .footer-widgets,
.site-footer .footer-widget-area,
.site-footer .inside-footer-widgets,
.footer-widgets-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.site-footer .inside-footer,
.site-footer .footer-inner,
.site-footer .ast-footer-widget-area,
.site-footer .footer-bar,
.site-footer .site-info {
    background: transparent !important;
}

/* =============================================
   WOOCOMMERCE
   ============================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: rgba(245, 245, 245, 0.35) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    padding: 20px;
    transition: all 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
    background: rgba(250, 250, 250, 0.45) !important;
    border-color: rgba(212, 184, 150, 0.6) !important;
}

/* =============================================
   FORMS
   ============================================= */

form,
.woocommerce form,
.wpcf7-form {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.site-content > form,
body > form {
    background: rgba(245, 245, 245, 0.35) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    padding: 30px !important;
}

input[type="text"]:not(.ctp-scoped *),
input[type="email"]:not(.ctp-scoped *),
input[type="password"]:not(.ctp-scoped *),
input[type="search"]:not(.ctp-scoped *),
input[type="tel"]:not(.ctp-scoped *),
input[type="url"]:not(.ctp-scoped *),
input[type="number"]:not(.ctp-scoped *),
textarea:not(.ctp-scoped *),
select:not(.ctp-scoped *) {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    transition: all 0.3s ease;
    color: #1a1a1a !important;
}

input[type="text"]:not(.ctp-scoped *):focus,
input[type="email"]:not(.ctp-scoped *):focus,
input[type="password"]:not(.ctp-scoped *):focus,
textarea:not(.ctp-scoped *):focus,
select:not(.ctp-scoped *):focus {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(212, 184, 150, 0.8) !important;
    box-shadow: 0 0 20px rgba(212, 184, 150, 0.3) !important;
    outline: none !important;
}
button:not(.ctp-scoped *),
.button:not(.ctp-scoped *),
input[type="submit"]:not(.ctp-scoped *),
input[type="button"]:not(.ctp-scoped *),
.wp-block-button__link:not(.ctp-scoped *),
.woocommerce a.button:not(.ctp-scoped *),
.woocommerce button.button:not(.ctp-scoped *) {
    background: rgba(80, 80, 80, 0.6) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease;
    color: #fff !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}

button:not(.ctp-scoped *):not(.swatch):hover,
.button:not(.ctp-scoped *):hover,
input[type="submit"]:not(.ctp-scoped *):hover,
.woocommerce a.button:not(.ctp-scoped *):hover {
    background: rgba(224, 215, 186, 0.7) !important;
    border-color: rgba(224, 215, 186, 0.9) !important;
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(224, 215, 186, 0.4),
        0 0 15px rgba(224, 215, 186, 0.3) !important;
}

/* =============================================
   COMMENTS
   ============================================= */

.comments-area,
#comments {
    background: rgba(245, 245, 245, 0.35) !important;
    backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) brightness(1.1) !important;
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    padding: 30px;
    margin-top: 30px;
}

.comment-list .comment {
    background: rgba(250, 250, 250, 0.3) !important;
    border-radius: 15px !important;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* =============================================
   TEXT STYLING
   ============================================= */

article,
.entry-content,
.site-footer {
    color: #1a1a1a;
}

article > *,
article p,
article li,
article span,
article div:not(.comparison-container):not(.patch-card):not(.image-container):not(.magnifier-lens),
.entry-content p,
.entry-content li,
.entry-content span,
.site-footer,
.site-footer * {
    color: #1a1a1a;
}

article h1, article h2, article h3,
article h4, article h5, article h6,
.entry-title {
    color: #0a0a0a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

article a:not(.patch-card a) {
    color: #8b6914 !important;
}

article a:not(.patch-card a):hover {
    color: #a67c00 !important;
}

/* =============================================
   THEME OVERRIDES - GENERATEPRESS
   ============================================= */

.inside-article {
    background: transparent !important;
    overflow: visible !important;
}

.generate-columns-container,
.site-main {
    overflow: visible !important;
}

#page,
#content,
.site,
.site-inner,
#main,
.content-area {
    background: transparent !important;
    overflow: visible !important;
}
/* =============================================
   SPACING - HEADER TO CONTENT
   ============================================= */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.site-header {
    position: relative !important;
    z-index: 999 !important;
    margin-bottom: 0 !important;
}
.site-content,
#content,
main {
    margin-top: 40px !important;
    padding-top: 0 !important;
}
/* REMOVED: body.page min-height rule — caused vinyl texture gap below footer */
article,
.page article,
.single article {
    margin-top: 0 !important;
}
body::after {
    top: -100% !important;
    z-index: -1 !important;
}
@media (max-width: 1168px) {
    .site-content,
    #content,
    main {
        margin-top: 6px !important;
    }
}

body {
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: #b8b8b8 !important; /* ← ADD THIS */
}

/* =============================================
   ANIMATED BORDER - ALL 4 SIDES
   ============================================= */

@media (min-width: 1169px) {

    .article-border-wrapper {
        position: relative;
        display: block;
        margin-bottom: 20px;
    }

    article::before,
    .page article::before,
    .single article::before {
        content: '';
        position: absolute;
        top: 0;
        left: 6px;
        right: 6px;
        width: auto;
        height: 7px;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(
            90deg,
            rgba(104, 143, 158, 0.5)  0%,
            rgba(255, 255, 255, 0.05) 18%,
            rgba(255, 255, 255, 0.9)  25%,
            rgba(255, 255, 255, 0.05) 32%,
            rgba(104, 143, 158, 0.5)  44%,
            rgba(104, 143, 158, 0.5)  56%,
            rgba(255, 255, 255, 0.05) 68%,
            rgba(255, 255, 255, 0.9)  75%,
            rgba(255, 255, 255, 0.05) 82%,
            rgba(104, 143, 158, 0.5)  100%
        );
        background-size: 200% 100%;
        box-shadow: 0 0 14px rgba(104, 143, 158, 0.5);
        animation: sweepH 9.6s linear infinite;
    }

    article::after,
    .page article::after,
    .single article::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 6px;
        right: 6px;
        width: auto;
        height: 7px;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(
            90deg,
            rgba(104, 143, 158, 0.5)  0%,
            rgba(255, 255, 255, 0.05) 18%,
            rgba(255, 255, 255, 0.9)  25%,
            rgba(255, 255, 255, 0.05) 32%,
            rgba(104, 143, 158, 0.5)  44%,
            rgba(104, 143, 158, 0.5)  56%,
            rgba(255, 255, 255, 0.05) 68%,
            rgba(255, 255, 255, 0.9)  75%,
            rgba(255, 255, 255, 0.05) 82%,
            rgba(104, 143, 158, 0.5)  100%
        );
        background-size: 200% 100%;
        box-shadow: 0 0 14px rgba(104, 143, 158, 0.5);
        animation: sweepH 9.6s linear infinite reverse;
    }

    .article-border-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 7px;
        height: 100%;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(
            180deg,
            rgba(104, 143, 158, 0.5)  0%,
            rgba(255, 255, 255, 0.05) 18%,
            rgba(255, 255, 255, 0.9)  25%,
            rgba(255, 255, 255, 0.05) 32%,
            rgba(104, 143, 158, 0.5)  44%,
            rgba(104, 143, 158, 0.5)  56%,
            rgba(255, 255, 255, 0.05) 68%,
            rgba(255, 255, 255, 0.9)  75%,
            rgba(255, 255, 255, 0.05) 82%,
            rgba(104, 143, 158, 0.5)  100%
        );
        background-size: 100% 200%;
        box-shadow: 0 0 14px rgba(104, 143, 158, 0.5);
        animation: sweepV 9.6s linear infinite;
    }

    .article-border-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 7px;
        height: 100%;
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(
            180deg,
            rgba(104, 143, 158, 0.5)  0%,
            rgba(255, 255, 255, 0.05) 18%,
            rgba(255, 255, 255, 0.9)  25%,
            rgba(255, 255, 255, 0.05) 32%,
            rgba(104, 143, 158, 0.5)  44%,
            rgba(104, 143, 158, 0.5)  56%,
            rgba(255, 255, 255, 0.05) 68%,
            rgba(255, 255, 255, 0.9)  75%,
            rgba(255, 255, 255, 0.05) 82%,
            rgba(104, 143, 158, 0.5)  100%
        );
        background-size: 100% 200%;
        box-shadow: 0 0 14px rgba(104, 143, 158, 0.5);
        animation: sweepV 9.6s linear infinite reverse;
    }

    @keyframes sweepH {
        0%   { background-position: 200% 0; }
        100% { background-position: 0%   0; }
    }

    @keyframes sweepV {
        0%   { background-position: 0 200%; }
        100% { background-position: 0 0%;   }
    }
}

/* =============================================
   Z-INDEX STACK
   ============================================= */

article,
.page article,
.single article {
    position: relative;
    z-index: 1;
}

article > *,
.entry-content,
.entry-content > * {
    position: relative;
    z-index: 2;
}

/* =============================================
   Wrapper glassmorphism effect on tablet/mobile
   ============================================= */

@media (max-width: 1168px) {
    article,
    .page article,
    .single article {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(1px) brightness(1.2) !important;
        -webkit-backdrop-filter: blur(1px) brightness(1.2) !important;
        padding: 24px 20px !important;
        border-radius: 4px !important;
        margin-bottom: 20px;
    }
}

/* =============================================
   No wrapper / background on small mobile
   ============================================= */

@media (max-width: 500px) {
    .site-content {
        margin: 0 auto !important;
        padding: 0 !important;
    }

    article,
    .page article,
    .single article {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(1px) brightness(1.2) !important;
        -webkit-backdrop-filter: blur(1px) brightness(1.2) !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 20px 16px !important;
    }
}

	/* =============================================
	Opaque paragraph wrapper and blue border
   ============================================= */
	

body:not(.woocommerce-checkout) .entry-content p,
body:not(.woocommerce-checkout) .page-content p,
body:not(.woocommerce-checkout) .wp-block-post-content p {
    position: relative;                              /* ← this is the only new line */
    background-color: rgb(238, 238, 238, 0.9);
    border: 2.5px solid rgba(182, 204, 214, 0.9);
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 8px;
}

/* Scroll-activated shimmer through the border */
body:not(.woocommerce-checkout) .entry-content p::after,
body:not(.woocommerce-checkout) .page-content p::after,
body:not(.woocommerce-checkout) .wp-block-post-content p::after {
    content: '';
    position: absolute;
    inset: -2.5px;
    border-radius: 4px;
    padding: 2.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 45%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.6) 55%,
        transparent 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    animation: border-shimmer linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 45%;
}

@keyframes border-shimmer {
    0%   { opacity: 1; background-position: 100% 0; }
    80%  { opacity: 1; background-position: 0% 0; }
    100% { opacity: 0; background-position: 0% 0; }
}

/* =============================================
   Strip paragraph panel style from my-account
   login & register forms only
   ============================================= */

.woocommerce-form-login p,
.woocommerce-form-register p {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
}

.woocommerce-form-login p::after,
.woocommerce-form-register p::after {
    display: none !important;
}

/* =============================================
   Strip paragraph panel style from my-account
   login, register, address & account edit forms
   ============================================= */

.woocommerce-form-login p,
.woocommerce-form-register p,
.woocommerce-address-fields p,
.woocommerce-EditAccountForm p {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
}

.woocommerce-form-login p::after,
.woocommerce-form-register p::after,
.woocommerce-address-fields p::after,
.woocommerce-EditAccountForm p::after {
    display: none !important;
}