/*
Theme Name: Storefront Child
Template: storefront
*/

/* ===========================
   1) WEBFONTS
   =========================== */
@font-face {
    font-family: 'Uncial Antiqua';
    src: url('fonts/UncialAntiqua-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ===========================
   2) GLOBAL STYLES
   =========================== */
body {
    margin: 0;
    padding: 0;
    /* Removed height:100vh; width:100vw; to improve mobile responsiveness */
    position: relative; /* Keep for background video layering if needed */
    font-family: 'Cinzel', serif;
    font-size: 1rem !important;
}

fieldset {
    background-color: transparent;
}

p {
    font-family: 'Cinzel', serif;
}


p.seeker {
    font-size: 1.2rem !important;
}


.bold {
    font-weight: bold;
}

.purple {
    color: #7f54b3 !important;
}

/* taking the price off of the glimpse product */
#product-906 .custom-product-price {
    display: none !important;
}

#content.site-content {
  margin-top: -20px;
  padding-top: 0;
}


#post-855 .alignleft,
#post-397 .alignleft {
  margin-right: 2em !important;
}

@media (max-width: 600px) {
  .wp-image-993,
  .wp-image-879,
  .wp-image-905 {
    width: 90vw !important;
    max-width: 90vw !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}


.custom-shop-text-above .top-space {
  margin-top: 1.8em;
}

.custom-shop-text-above .small-gap {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.custom-shop-text-above .bottom-space {
  margin-top: 0.5em;
}


.wrap-after {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.2em;
  font-weight: 600;
}

.wrap-this {
  display: inline-block;
  white-space: nowrap;
}



.alert {
    font-weight: 900;
}


/* ===========================
   3) LOGIN PAGE CUSTOMIZATIONS
   =========================== */
body.login {
    background-color: #ededff !important;
    font-family: 'Cinzel', serif;
    font-size: 1rem !important;
}

body.login div#login h1 a {
    background-image: url("https://newfortune.ai/wp-content/uploads/2024/11/cropped-SiteIcon.png") !important;
    background-size: contain !important;
    width: 320px !important; 
    height: 84px !important;
    display: block !important;
}

.custom-login-message {
    font-family: 'Cinzel', serif;
    font-size: 1rem !important;
}

/* Center the login container on the page */
body.login div#login {
    width: 600px; /* Adjust to your preference */
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Allow the custom message to use the full width */
body.login .custom-login-message {
    width: 600px !important;
    max-width: none;
    text-align: center;
    margin: 0 auto 20px !important;
}

#loginform {
    background-color: #e0e0ff !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

body.login #login input#wp-submit {
    background-color: #c48c00;
    color: #000000;
    border: none;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: bold;
}

body.login #login input#wp-submit:hover {
    background-color: #b37c00;
    color: #000000;
}

/* .button {
    border-radius: 6px;
} */

/* ===========================
   4) VIDEO BACKGROUND
   =========================== */
#smokevideovbackground {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: -1;
    opacity: 0.03; /* Adjust between 0 and 1 */
}

/* ===========================
   5) PATH BANNERS & CONTAINERS
   =========================== */
.path-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px auto; /* optional vertical spacing */
}

.path-banner {
    background: radial-gradient(
        circle at center,
        rgba(0, 209, 178, 0.5) 15%,
        rgba(0, 209, 178, 0) 100%
    );
    color: #000;
    font-size: clamp(.6rem, 4vw, .9rem) !important;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    padding: 8px;
    margin-bottom: 10px;
    max-width: 100%;
}

.path-banner a {
    font-weight: bold;
    text-decoration: underline;
}

/* ===========================
   6) TYPOGRAPHY & HEADER STYLES
   =========================== */
.mediumtitle {
    font-size: 1.7rem !important;
    text-decoration: underline;
    color: #238ab4;
    font-weight: bold;
}

.wc-block-components-button__text,
.subscription-products {
    font-weight: bold;
}

.site-title a {
    font-family: 'Uncial Antiqua', cursive;
    color: rgb(196, 140, 0) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: clamp(29px, 5vw, 40px); /* Responsive font size */
    white-space: nowrap; /* Prevents line break */
    display: inline-block;
}

.site-description {
    font-size: 1rem !important;
}

h1, h2, h3,
.button,
.wc-block-components-checkout-place-order-button {
    font-family: 'Cinzel', serif;
}

.wc-block-components-express-payment-continue-rule,
.wc-block-components-express-payment__title {
    font-weight: 600;
}

h1 {
    font-size: 2.5rem !important;
    font-weight: 500;
}

h2 {
    font-size: 1.8rem !important;
}

h3 {
    font-size: 1rem !important;
}

/* ===========================
   7) BUTTONS & LINKS
   =========================== */
.button,
.single_add_to_cart_button,
.wc-block-components-checkout-place-order-button,
.wp-element-button {
    border-radius: 6px;
    cursor: pointer;
    background-color: rgba(196, 140, 0, 0.8);
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.enter-app-button {
    /* background-color: #00d1b2; */
    background-color: rgba(0, 209, 178, 0.7);   
}

.enter-app-button:hover {
    background-color: #33c3d3;
}

.coming-soon-button {
    /* background-color: #d3d3d3; */
    background-color: rgba(211, 211, 211, 0.6);
    border: 1px solid #aaa;
}

.coming-soon-button:hover {
    background-color: #33c3d3;
}

/* ===========================
   8) MESSAGES, FORMS, & HEADERS
   =========================== */
.thankYouTitle {
    font-size: 1.7rem !important;
    color: #238ab4;
    font-weight: bold;
}

.emphasis {
    font-weight: 600;
}

.emphasis a {
    font-weight: bold;
}

.custom-hr {
    border: none;
    border-top: 1px solid #238ab4;
    margin: 20px 0;
}

.centerThis {
    text-align: center;
}

/* ===========================
   9) WOOCOMMERCE TWEAKS
   =========================== */
.storefront-sorting,
.posted_in,
.site-info,
mark.count,
.woocommerce-products-header__title,
.sku_wrapper {
    display: none !important;
}

.entry-header,
.woocommerce-products-header {
    display: none !important;
}

.wc-block-checkout__order-notes {
    display: none !important;
}

.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
    display: none !important;
}

#tab-description > h2 {
    display: none !important;
}

.woocommerce-loop-category__title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: rgb(196, 140, 0) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.wc-block-components-express-payment {
    background-color: #e0e0ff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.woocommerce-error,
.woocommerce-message {
    background-color: #238ab4 !important;
}

/* Gift Card / Gifting Tweaks */
.woocommerce_subscription_gifting_checkbox {
    color: #000000 !important;
    background-color: #000000 !important;
}

p.form-row.woocommerce_subscriptions_gifting_recipient_email::after {
    content: "Please ensure the recipient’s email address is accurate, so they can immediately receive a notification inviting them to enjoy their experience.\A\A As the giver, you will oversee subscription details like renewals and cancellations, ensuring uninterrupted access for as long as you choose.";
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-top: 8px;
    white-space: pre-wrap;
}

.woocommerce-MyAccount-content {
    font-size: 1rem !important;
}

.woocommerce-Giftcards.woocommerce-MyAccount-Giftcards-balance-amount {
    font-size: 1rem !important;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h4 {
    font-size: 1.2rem !important;
}

.woocommerce-Giftcards.woocommerce-MyAccount-Giftcards-form input.input-text,
.woocommerce-Giftcards.woocommerce-MyAccount-Giftcards-form button.woocommerce-Button {
    font-size: 0.9rem !important;
}

.woocommerce-giftcards-table th,
.woocommerce-giftcards-table td,
.woocommerce-giftcards-activity-table th,
.woocommerce-giftcards-activity-table td {
    font-size: 0.9rem !important;
}

/* ===========================
   10) DESKTOP CONTAINER WIDTH
   =========================== */
@media (min-width: 769px) {
    .site-content .col-full {
        max-width: 1100px;
        margin: 0 auto;
    }
}
@media (max-width: 768px) {
    .site-content .col-full {
        max-width: 100% !important;
        margin: 0 auto;
        padding: 0 1rem; /* side padding on mobile */
    }
}

/* ===========================
   11) SHOP (HOME) PAGE → 2 COLUMNS (DESKTOP)
   =========================== */
body.woocommerce-shop ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 0;
    padding: 0;
}

@media (min-width: 769px) {
    /* Force 2 columns on larger screens only */
    body.woocommerce-shop ul.products li.product {
        flex: 0 0 450px;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
    }
}

body.woocommerce-shop ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
}

/* ===========================
   12) PRODUCT CATEGORY PAGES → 3 COLUMNS
   =========================== */
body.tax-product_cat ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.tax-product_cat ul.products li.product {
    width: calc(33.33% - 20px) !important;
    max-width: 400px;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* If WooCommerce auto-adds columns-3, override on desktop 
body.tax-product_cat ul.products.columns-3 li.product {
    width: calc(33.33% - 20px) !important;
}
*/

/* ===========================
   13) RESPONSIVE BREAKPOINTS (MOBILE)
   =========================== */
@media (max-width: 768px) {
    /* Single column, center it. */
    body.woocommerce-shop ul.products,
    body.tax-product_cat ul.products {
        flex-direction: column !important;
        align-items: center !important;  /* center the items horizontally */
        justify-content: flex-start !important;
    }

    body.woocommerce-shop ul.products li.product,
    body.tax-product_cat ul.products li.product,
    .products.columns-3 li.product {
        /* Let each item be up to 600px wide, centered. 
           Adjust max-width if you want them bigger or smaller. */
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto 20px auto !important;
        text-align: center !important;
    }
}

/* ===========================
   14) NEUTRALIZE .first/.last CLEARING
   =========================== */
li.product.first,
li.product.last,
.product-category.product.first,
.product-category.product.last {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
}

/* ===========================
   15) RELATED / CROSS-SELL / UPSELL LAYOUTS → 3 COLUMNS
   =========================== */
/* Adjust the "columns-3" layout for related, upsell, and cross-sell products on single-product pages. */
.related ul.products.columns-3,
.upsells.products ul.products.columns-3,
.cross-sells ul.products.columns-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.related ul.products.columns-3 li.product,
.upsells.products ul.products.columns-3 li.product,
.cross-sells ul.products.columns-3 li.product {
    width: calc(33.33% - 20px) !important;
    max-width: 400px;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .related ul.products.columns-3,
    .upsells.products ul.products.columns-3,
    .cross-sells ul.products.columns-3 {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .related ul.products.columns-3 li.product,
    .upsells.products ul.products.columns-3 li.product,
    .cross-sells ul.products.columns-3 li.product {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto 20px auto !important;
    }
}



.responsive-video {
    position: relative;
    width: 100%;
    max-width: 930px;  /* Adjust maximum width as needed */
    margin: 0 auto;    /* Center the video */
    /* Modern approach with aspect-ratio */
    aspect-ratio: 16 / 9;
    /* Fallback using padding-bottom */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}


.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-52%);
    width: 100%;
    height: 100%;
    border: 0;
  }
  



.custom-shop-text-above {
    max-width: 850px;
    margin: 0 auto;
    text-align: left;
    padding-bottom: 30px;
}

.custom-shop-text-above a {
    font-weight: bold;
    text-decoration: none;
    color: blue;
}


/* NEW */
/* _________________________________________________________ */

.custom-shop-text-above .shop-buttons-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* space between buttons */
    justify-content: center;
    margin-top: 1.5em;
}


.custom-shop-text-above .shop-button {
    min-width: 135px;            /* was 190px */
    text-align: center;
    font-size: 0.93rem;          /* was 1rem */
    padding: 0.6em 1em;          /* was 0.85em 1.5em */
    font-weight: bold;
    border: none;
    border-radius: 6px;
    background: rgba(196, 140, 0, 0.9);
    color: #000000;
    box-shadow: 0 2px 6px rgba(196,140,0,0.09);
    transition: background 0.22s, color 0.22s;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}



.custom-shop-text-above .shop-button.highlight {
    background: rgba(196, 140, 0, 0.93);
    color: #000000;
}

.custom-shop-text-above .shop-button.secondary {
    background: #e0e0ff;
    color: #542185;
    border: 1px solid #542185;
}

.custom-shop-text-above .shop-button:hover,
.custom-shop-text-above .shop-button:focus {
    background: #b37c00;
    color: #000000;
}

.custom-shop-text-above .shop-button.secondary:hover,
.custom-shop-text-above .shop-button.secondary:focus {
    background: #c3bbff;
    color: #000;
    border-color: #7f54b3;
}

@media (max-width: 600px) {
    .custom-shop-text-above .shop-buttons-row {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    .custom-shop-text-above .shop-button {
        width: 80%;
        min-width: 0;
    }
}




/* _________________________________________________________ */



.center {
    text-align: center;
}


.largerText {
    font-size: 1.11rem !important;
}

.privacy {
    font-size: 0.8rem !important;
}



.custom-shop-text-above p {
    margin-top: 0;
    margin-bottom: 0.5rem; /* Adjust this value to control the spacing */
}


.gold-rectangle {
    background-color: rgba(196, 140, 0, 0.5); /* Partially transparent gold */
    padding: 10px 15px;
    margin: 10px auto; /* 10px vertical margin and auto horizontal margin to center */
    text-align: center;
    max-width: 333px;
    border-radius: 4px; /* optional, for softer corners */
}



.gold-rectangle a {
    color: #000; /* Adjust if needed */
    font-weight: bold;
    text-decoration: none;
}

.gold-rectangle a:hover {
    text-decoration: underline;
}




#pa_experiences,
#your-products-price {
    background-color: #e0e0ff;
    border: 1px solid #484870;
    /* Increase right padding to create space for the arrow */
    padding: 10px 30px 10px 10px;  
    font-size: 16px;
    color: #000000;
    border-radius: 4px;
    
    /* Remove default styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Add a custom arrow icon and reposition it */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="%23333" d="M0 2l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: calc(100% - 10px) center;
}
  
#pa_experiences option,
#your-products-price option {
    background-color: #e0e0ff;
    color: #000000;
}


 




input::placeholder {
    font-family: 'Cinzel', serif !important;
}


/* Chrome, Safari, Opera */
input::-webkit-input-placeholder {
    font-family: 'Cinzel', serif !important;
}

/* Firefox 19+ */
input::-moz-placeholder {
    font-family: 'Cinzel', serif !important;
}

/* Firefox 4 - 18 */
input:-moz-placeholder {
    font-family: 'Cinzel', serif !important;
}

/* IE 10+ */
input:-ms-input-placeholder {
    font-family: 'Cinzel', serif !important;
}


.button {
    border-radius:6px !important;
}

/* the email field on the invite page */
.email {
    width: 440px !important;
}


p.seeker {
    font-size: 1.2rem !important;
}


.bottomSpace {
    margin-bottom: 6px !important;
}

.topSpace {
    margin-top: -20px !important;
}

.site-footer {
    display: none !important;
}




.gathering-pack-invite {
    margin-top:20px; 
    padding:10px; 
    border:1px solid #ccc; 
    /* background:#f9f9f9; */
    background-color: #e0e0ff;
    border: 1px solid #484870;
}


.invite {
    max-width: 210px; 
    height: auto; 
    display: block; 
    float: left;
    margin-right: 15px;
}



@media (max-width: 768px) {
    
    .invite {
        max-width: 150px;
    }

}



 /* the login on checkout */
.wc-block-components-checkout-step__heading .wc-block-checkout__login-prompt {
    font-size: .8rem !important;
    font-weight: bold !important;
    background-color: #e0e0ff;
    padding: 5px;
    border-radius:6px !important;
}


@media only screen and (max-width: 767px) and (orientation: portrait) {
    .wc-block-components-checkout-step__heading .wc-block-checkout__login-prompt {
      position: relative;
      top: -40px; /* adjust as needed */
    }
  }
  



/* ===========================
   MOBILE LOGIN STYLES (Add this block at the end)
   =========================== */
   @media (max-width: 768px) { /* Adjust breakpoint as needed (e.g., 600px) */
    
	#loginform {
    	max-width: 100% !important;
    	padding: 20px !important; /* Adjust the padding value as needed */
	}


	body.login .screen-reader-text {
    	display: none;
	}

	.wp-login-logo {
    	background-size: contain;
    	background-repeat: no-repeat;
	}

	body.login div#login {
    	width: 90%; /* Use percentage width for responsiveness */
    	max-width: 400px;
    	margin: 40px auto 0 auto;
    	position: relative;
    	top: auto;
    	transform: none;
    	box-sizing: border-box;
	}

	body.login div#login h1 a {
    	background-repeat: no-repeat !important;
    	background-size: contain !important;
    	background-position: center center !important;

    	text-indent: -9999px !important;
    	overflow: hidden !important;
    	display: block !important;

    	width: 100% !important;
    	max-width: 280px !important;
    	height: 80px !important;
    	margin: 0 auto 20px auto !important;
	}

	#loginform {
    	max-width: 100% !important;
	}

	body.login div#login p,
	body.login div#login .user-pass-wrap {
    	margin-bottom: 12px;
	}
    
	body.login #nav,
	body.login #backtoblog {
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
	}
}









/* The overlay that covers the screen */
.mic-check-overlay {
    position: fixed; /* Stay in place even when scrolling */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0, 0, 0, 0.7); /* Increased opacity for better dimming */
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 9999; /* Sit on top (higher than most elements) */
     /* Initially hidden by default */
    /* display: none; */ /* This should NOT be here if JS sets display: flex; JS sets it inline */
    /* Ensure it's display: none; *in the CSS file* */
}


/* The notification box itself */
.mic-check-notification {
    /* Remove display: none; here - overlay handles visibility */
    /* Remove margin-top - flexbox handles centering */
    padding: 30px; /* Increased padding for better spacing */
    border: 1px solid #ccc;
    background-color: #fff; /* White background for contrast */
    border-radius: 8px; /* Slightly larger border-radius */
    font-size: 1em; /* Standard font size */
    text-align: left; /* Align text left within the box */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* More prominent shadow */
    max-width: 500px; /* Limit maximum width on larger screens */
    width: 90%; /* Use 90% width on smaller screens */
    max-height: 80vh; /* Max height relative to viewport height */
    overflow-y: auto; /* Add scroll if content exceeds max height */
    position: relative; /* Needed for potential absolute positioning inside, but not required for flex centering */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Remove fixed height if any was implied */
    line-height: 1.6; /* Improved readability */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .mic-check-notification {
        padding: 20px; /* Slightly less padding on small screens */
        width: 95%; /* Use 95% width on very small screens */
    }
}


.mic-check-notification.error {
    border-color: #0869d1; /* Red border */
    background-color: #ffffff; /* Light red background */
    color: #542185; /* Dark red text */
}

.mic-check-notification.info {
    border-color: #5bc0de; /* Blue border */
    background-color: #d9edf7; /* Light blue background */
    color: #31708f; /* Dark blue text */
}

/* Style for paragraphs within the notification */
.mic-check-notification p {
    margin-top: 0; /* Remove top margin for first paragraph */
    margin-bottom: 10px; /* More space between paragraphs */
    line-height: 1.5; /* Improved readability */
}
.mic-check-notification p:last-child {
     margin-bottom: 0; /* No margin after the last paragraph */
}


/* Style for links within the notification (like guidance links) */
.mic-check-notification a:not(.button) { /* Exclude the proceed button */
    color: inherit; /* Inherit text color */
    text-decoration: underline;
    /* Optional: darker color for links */
    /* color: #0056b3; */
}


/* Style for the "Proceed Anyway" button added by JS */
.mic-check-notification .button.proceed-without-mic {
    /* Ensure it displays like a button */
    display: inline-block; /* Default button display */
    margin-top: 20px; /* Add space above it */
    padding: 10px 15px;
    background-color: #007bff; /* Example: a distinct color */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Remove underline */
    text-align: center; /* Center text */
    font-size: 1em;
    line-height: 1.2;
    transition: background-color 0.3s ease; /* Smooth hover effect */
    /* Ensure button styles are strong enough to override theme default button styles */
    /* !important could be used but try to avoid if possible */
}

.mic-check-notification .button.proceed-without-mic:hover {
    background-color: #0056b3; /* Darker on hover */
    color: #fff;
}

/* Style for the spinner inside the notification */
.mic-check-notification .spinner {
     display: block; /* Make spinner a block element */
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-left-color: #09f; /* Example color */
    animation: spin 1s ease infinite;
    margin: 10px auto; /* Center spinner */
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* Tighter line spacing for tagline on mobile */
@media (max-width: 600px) {
    .custom-shop-text-above .seeker {
        line-height: 1.4 !important;  /* You can try 1.0 or 1.15 if you want */
        /* margin-bottom: 0.2rem !important; /* Reduce space below if needed */
        /* margin-top: 0 !important;        /* Reduce space above if needed */
    }

    .custom-shop-text-above .top-space {
        margin-top: 1.2em;
    }
}


/* make the post image work on mobile */
@media (max-width: 600px) {
    .wp-post-image {
        display: block;
        max-width: 100% !important;
        height: auto;
        margin: 0 auto;
    }
}



/* On smaller screens, the video will take up the full width of its container. */
.responsive-video-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* On larger screens (tablets and desktops), the video will be narrower. */
@media (min-width: 768px) {
    .responsive-video-wrapper {
        width: 78%; /* You can adjust this percentage as needed. */
    }
}





.post-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.nav-previous .arrow-left,
.nav-next .arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    cursor: pointer;
}

.nav-previous .arrow-left {
    border-right: 20px solid #7F54B3;
}

.nav-next .arrow-right {
    border-left: 20px solid #7F54B3;
}


.post-navigation .nav-links a {
  white-space: nowrap;
}


.cat-links {
  display: none;
}




/* added for category pages */


.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.category-grid-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.category-grid-item img {
  display: block;
  margin: 0 auto;
  max-width: 140px;
  height: auto;
  margin-bottom: 0.5rem;
}

.grid-title {
  font-size: 1rem;
  margin: 0;
}


body.category .page-header {
  text-align: center;
}

body.category .page-header .page-title {
  margin-bottom: 0.5rem;
}

body.category .taxonomy-description {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
}

/* body.category .grid-title {
  text-decoration: underline;
} */