/*
Theme Name: Royal Child
Theme URI: http://fabfactor.store/royal-child
Author: Your Name
Author URI: http://fabfactor.store
Description: Child theme for the Royal Elementor Kit theme
Version: 1.0
Template: royal-elementor-kit
*/

/* -------- HEADING DEFAULTS (WHICH REA THEME DOESN'T HAVE) --------------- */

/* Astra has heading defaults
 * Royal Elementor Kit appears to have no heading defaults ???
 *   (therefore defaulting to User Agent Stylesheet in browser ???)
 
 * h1 = 32px = Home title
 *           = Product titles
 * h2 = 30px = "About" heading (Title off) via REA popup
 * h3 = 28px = ToS headings                via WP Pages
 *           = Privacy headings            via WP Pages
 *           = Returns headings            via Pop Make
 *           = Shipping Info               via Pop Make
 * h4 = 24px = 
 * h5 = 22px = 
 * h6 = 20px = Accordion titles
 *           = Privacy sub headings        via WP Pages
*/

h1 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1.4em;
margin-top: 
margin-bottom:
}

h2 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.4em;
margin-top: 
margin-bottom:
}

h3 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 700; /* Bold */
font-size: 28px;
line-height: 1.4em;
margin-top: 25px;
margin-bottom: 10px;	
}

h4 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 700; /* Bold */
font-size: 24px;
line-height: 1.4em;
margin-top: 25px;
margin-bottom: 10px;	
}

h5 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 22px;
line-height: 1.0em;
margin-top: 25px;
margin-bottom: 10px;
}

h6 {
color: #692f3e;
font-family: Archivo, Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 1.0em;
margin-top: 20px;
margin-bottom: 10px;
}

.center-heading { /* Titles added to footer legals */
text-align: center;
font-weight: 600;
}

.page-id-4308 .page-title { /* Privacy page */
	display: none;
}

.page-id-4328 .page-title { /* Terms page */
	display: none;
}

/* ----------------------- POPUP MAKER (GENERAL) ---------------------------- */

html body #popmake-1511 {
	margin-bottom: 10px !important;
}

.pum-content {
	padding-bottom: 30px;
}

/* For text in footer legals & header shipping using P-Maker. */
.page-in-popup p,
#popmake-1511 p,
#popmake-1540 p,
#popmake-1545 p,
#page-1545 p,
#popmake-1629 p,
#popmake-2134 p,
#popmake-5122 {
color: #692f3e;
font-family: OpenSans, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4em;
margin-top: 0;
margin-bottom: 8px;
}

.page-in-popup ol,
#popmake-1511 ol,
#popmake-1540 ol,
#popmake-1545 ol,
#page-1545 ol {
color: #692f3e;
font-family: OpenSans, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4em;
margin-left: 0px;
margin-bottom: 8px;
padding-left: -10px;
}

.page-in-popup ul,
#popmake-1511 ul,
#popmake-1540 ul,
#popmake-1545 ul,
#page-1545 ul {
color: #692f3e;
font-family: OpenSans, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4em;
margin-left: 0px;
margin-bottom: 8px;
padding-left: -15px;
}

/* ----------------------- POPUP MAKER (INDENTS) ------------------ */

/* Indents in Privacy & Returns Notices section 1.2 */
.indent4 {
    text-indent: 0;
	margin-left: 20px;
  }

/* Indents in Privacy Notice section 2.2 */
.indent2 {
    text-indent: 0;
	margin-left: 20px;
  }

/* Indents in Privacy Notice section 4.1 */
.indent3 {
    text-indent: 0;
	margin-left: 30px;
  }

/* ---------------- POUP MAKER (HYPERLINKS) ------------------ */

.pum-container a {
    color: #0000ff;
}
.pum-container a:hover {
    color: #0000ff;
	text-decoration: underline;
}

/* ------------- POPUP MAKER (TOP ORANGE BUTTON ON PRIVACY POPUP) ---------------------- */

.page-in-popup .button-p,
#popmake-1545 .button-p,
#page-1545 .button-p {
    display: inline-block !important;
    padding: 10px 20px;
    background-color: #e96e08;
	color: #fff !important;
    border: none;
    border-radius: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: initial;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-family: Archivo, Arial, Helvetica, sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}
.page-in-popup .button-p a {
	color: #fff !important;
}

/* Also see next rule */ 

/* -------------------- ENABLES TEXT WRAPPING ON SMALLER SCREENS --------------------------- */

@media (max-width: 600px) {
    #popmake-1545 .button-p,                                        /* Orange button in privacy popup */
	#page-1545 .button-p,
	.woocommerce-variation-add-to-cart .single_add_to_cart_button { /* Add to Cart button */
        white-space: normal;
    }
}

/* Text in top button in Privacy Notice */
#popmake-1545 .button-p a,
#page-1545 .putton-p a{
	color: #fff;
	text-decoration: none;
}
#popmake-1545 .button-p:hover,
#page-1545 .button-p:hover {
    background-color: #bd5906;
	color: #fff !important;
	text-decoration: none;
}

/* ------------------ POPUP MAKER ("ABOUT" POPUP FOR MOBILE ONLY) ------------------------ */

/* Styling the popup content wrapper */
.popup-content {
     width: 80%; /* Adjust as necessary */
     max-width: 400px; /* Ensure it doesn't exceed a specific width */
     border-radius: 10px;	
}

#pum_popup_title_2134 {
    display: none;
}

#popmake-2134 h2 {
    text-align: center; /* Center align the heading */
    font-size: 30px;
	margin-bottom: 10px;
	color: #692f3e;
}

#popmake-2134 img {
    display: block; /* Ensure the image starts on a new line */
    width: 40%;
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto 10px auto; /* Center the image and add bottom margin */
}

#popmake-2134 p {
    text-align: left;
	font-family: OpenSans, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	margin-bottom: 8px;
	margin-left: 10px;
}

/* Default styling for desktop and large screens */
.popup-content {
    width: 600px;
    padding: 20px;
	border-radius: 15px;
    margin: 0 auto;  /* Center the popup */
}

/* Styling for tablets (landscape up to 1250px wide) */
@media (max-width: 1250px) {
    .popup-content {
        width: 500px;
        padding: 15px;
		border-radius: 10px;
    }
}

/* Styling for tablets (portrait up to 1030px wide) */
@media (max-width: 1030px) {
    .popup-content {
        width: 400px;
        padding: 10px;
		border-radius: 10px;
    }
}

/* Styling for mobile devices (screens up to 770px wide) */
@media (max-width: 770px) {
    .popup-content {
        width: 90%; /* Use a percentage to ensure it adapts to screen width */
        padding: 10px;
		border-radius: 8px;
    }
}

/* --------------------- POPUP MAKER (BACK-TO-TOP BUTTON ON FOOTER POPUPS) ------------------------ */

/* Styling for back-to-top button */
.back-to-top-btn {
    position: fixed;
	width: 50px;
	height: 40px;
    bottom: 10px;
    right: 30px;
	font-family: Archivo, Arial, Helvetica, sans-serif;
	color: white;
	font-size: 14px;
    /* display: none; /* Hide the button initially */
	background-color: #9f475e;
	border-width: 3px;
	border-style: solid;
	border-color: white;
	border-radius: 10px;
	cursor: pointer;
	/* Using flexbox for vertical centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top-btn path {
	color: white;
}

.back-to-top-btn:hover {
	background-color: #692f3e;
	border-style: solid;
	border-color: white;
	border-radius: 10px;
}

/* --------------- TICKS IN PRODUCT BENEFITS LIST ------------------ */

ul .benefits-list {
    list-style: none; /* Remove default bullets */
	padding-left: 20px;
}

ul .benefits-list li::before {
    content: "\2713"; /* Hex unicode escape sequence for tick */
    font-weight: bold;
	color: green;
    margin-right: 8px;
}

/* ---------------------------- GLOBAL ------------------------------ */

/* Hyperlinks for all pages */
.page-hyperlinks-color p a {
    color: #0000ff;
	text-decoration: underline;
}
.page-hyperlinks-color p a:hover {
    color: #0000ff;
}

/* Prevents outline left behind on footer buttons */
a:focus {
	outline: none;
}

/* List item styling */
li {
    margin-bottom: 6px; /* Space between list items */
	text-height: 16px;
  }

/* ------------- WP FORMS STYLING -------------------------------------- */

/* WPForms submit button */
.wpf-submit-btn {
	border-radius: 50%;
	background-color: #21a838;
}
.wpf-submit-btn:hov {
	background-color: #177527;
}

/* Change placeholder text color */
.wpf-forms input::placeholder,
.wpf-forms textarea::placeholder {
    color: #692f3e;
}

.wpf-forms input::-webkit-input-placeholder,
.wpf-forms textarea::-webkit-input-placeholder {
    color: #692f3e;
}

.wpf-forms input:-ms-input-placeholder,
.wpf-forms textarea:-ms-input-placeholder {
    color: #692f3e;
}

.wpf-forms input::-ms-input-placeholder,
.wpf-forms textarea::-ms-input-placeholder {
    color: #692f3e;
}

/* Change field border color */
.wpf-forms input,
.wpf-forms textarea,
.wpf-forms select {
    border-color: #692f3e;
}
.head-btn:hover {
	text-decoration: none;
}

/* --------------- ONLY NEEDED IN ASTRA TO RESOLVE ROYAL CONFLICT ------------------------------------ */

/* Remove conflct between quantity triggers in Royal "Product ATC" widget and WooCom */
.woocommerce-js .quantity .plus,
.woocommerce-js .quantity .minus {
    display: none !important;
}

/* ----------------- ANIMATED LOGO STYLING ---------------------------------- */

/* Style animated logo */
#logoAnimation {
    width: 90%; /* percentage width within the snippet widget */
    max-width: 360px;  /* Set a maximum width for larger screens */
    height: auto; /* Maintains the aspect ratio */
	display: block;
	border-radius: 12px;
	overflow: hidden;    /* Ensures video respects rounded corners 8/
	margin: 0 auto;      /* Center the video horizontally */
}

/* Responsive adjustments */

@media (max-width: 1030px) {
    #logoAnimation {
        width: 100%;   /* Ensure full width on smaller screens */
        max-width: none; /* Remove the max-width constraint on smaller screens */
    }
}

@media (max-width: 767px) {
    #logoAnimation {
        width: 80%;   /* Ensure more width on smaller screens */
        max-width: none; /* Remove the max-width constraint on smaller screens */
    }
}

/* --------------------HEADER HAMBURGER MENU ON MOBILE ------------------- */

/* The CSS handles the default hidden state and the toggled visible state, 
 * while the JavaScript manages the class toggling to show or hide the menu. */

/* Hide the container for buttons in mobile view by default */
.mobile-header-buttons-container {
    display: none;
}

/* Styles for the hamburger icon */
.mobile-menu-toggle {
    font-size: 26px;
    cursor: pointer;
    color: #692f3e; /* Ensure the color contrasts with the background */
}

/* Show the menu when toggled */
.mobile-menu-active .mobile-header-buttons-container {
    display: flex;
}

/* ------------ BLOG ARCHIVE GRID ITEMS ON MOBILE ----------------------- */

@media (max-width: 600px) {
  .wpr-grid-image-wrap {
    display: grid;
    place-items: center; /* Centers both horizontally and vertically */
    width: 50%;
    height: auto;
  }
  
  .wpr-grid-image-wrap img {
    max-width: 100%;     /* Ensures the image fits within the container */
    height: auto;
  }
}

/* -------------------- BLOG POST COMMENTS STYLING --------------------------- */

.wpr-comment-reply-title {
	margin-top: 10px;
}

/* ------------------ WOOCOMMERCE STLING --------------------------- */

/* Product description (long) */
.elementor-widget-container .wpr-product-description p {
	color: #692f3e;
	font-family: OpenSans, sans-serif;
	font-weight: 400;
	text-height: 16px;
	line-height: 1.4em;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Gallery thunbnails */
.flex-control-thumbs li {
    border: 2px solid #692f3e; /* Adjust color and width */
	border-radius: 10px;
    padding: 5px; /* Adds spacing inside the border */
    margin: 5px; /* Adds spacing between thumbnails */
}

/* Gallery main image */
/* Targeting the main product image */
.woocommerce-product-gallery__image img {
    border-radius: 15px;
}

/* ---------- ROYAL ADDONS (ACCORDION PANELS) ---------------------- */

/* Additional styling for accordion title */
.wpr-acc-item-title .wpr-acc-title-text span {
    display: flex;
    align-items: center !important; /* Centers content vertically but does not work */
	/* Found REA settings that work instead */
}

.wpr-acc-item-title .wpr-acc-title-text:hover {
	text-decoration: underline;
}

/* Additional styling for the text inside the accordion when active */
.wpr-acc-panel-active .wpr-acc-panel-content p,
.wpr-acc-panel-active .wpr-acc-panel-content li {
	color: #692f3e;
	font-family: OpenSans, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.4em;
	margin-bottom: 8px;
	margin-left: 0px;
}

/* -------------------- ROYAL ADDONS (PRODUCT PAGE) --------------------- */

/* Make attribute label longer on Faucet Water Filter */ 
.product.postid-4529 th.label {
    width: 80%;
}
.product.postid-4529 td {
    width: 70%;
}

/* -------------------- ROYAL PRODUCT ARCHIVE PAGE ----------------------- */

/* Define width and height to improve CLS score in GTmetrix */
@media (min-width: 768px) {
	.wpr-cv-inner .wpr-grid-item-display-block .inner-block img {
    	width: 30%;
		aspect-ratio: 1 / 1;
		max-width: 300px;
	}
}

/* Grid media size on mobiles */
@media (max-width: 767px) {
	.wpr-cv-inner .wpr-grid-item-display-block .inner-block img {
		width: 60%;
		aspect-ratio: 1 / 1;
		max-width: 300px;
	}
}

/* Fix for devices in landscape mode under 767px portrait
 * (Grid Item / Inner Elements For mob landscape (REA min-height incorrect) */
@media (max-width: 767px) and (orientation: landscape) {
	.wpr-grid-item-below-content {
		min-height: 0px !important;
	}
}

/* Fix for devices in the 768px to 990px range
 * (Grid Item / Inner Elements For tab portrait (REA min-height incorrect) */
@media (min-width: 768px) and (max-width: 990px) {
    .wpr-grid-item-below-content {
        min-height: 0px !important;
    }
}

/* ------------------- VILLATHEME REVIEWS STYLING ---------------------------- */

/* Turns off the "All Stars" button */ 
.shortcode-wcpr-filter-container .shortcode-wcpr-filter-button-wrap {
    display:none !important;
}

/* Turns off the "With Images" button */ 
.shortcode-wcpr-filter-container .shortcode-wcpr-filter-button-images {
    display:none !important;
}

/* Turns off the "Verified" button */ 
.shortcode-wcpr-filter-container .shortcode-wcpr-filter-button-verified {
    display:none !important;
}

/* ----------- GALLERY-SWATCH INTERACTION ---------------------- 

@media (max-width: 768px) {
  /* Hide gallery thumbnails on mobile by default
  .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery__image,
  .woocommerce-product-gallery--with-images .flex-control-thumbs {
    display: none !important;
  }

  /* When JS adds 'thumbnails-visible' class, show them (no JS added yet)
  .thumbnails-visible .woocommerce-product-gallery__wrapper,
  .thumbnails-visible .woocommerce-product-gallery__image,
  .thumbnails-visible .woocommerce-product-gallery--with-images .flex-control-thumbs {
    display: block !important;
  }
} */

/* --------------- STYLING FOR SIZE-CHART-LINK ---------------------------- */

.size-chart-link {
  display: block;
  margin: 6px 0;
  font-size: 14px;
  color: #0073aa;
  text-decoration: underline;
  cursor: pointer;
}

.size-chart-link:hover {
  color: #004d80;
}

/* ------------------- STYLING TO ALIGN CONFIRMED COLOR AND SIZE ----------------------- */

th.label {
  display: flex;
  align-items: center;
  gap: 4px; /* optional spacing between label and value */
}

th.label label {
  margin: 0;
  padding: 0;
  font-weight: 500;
  display: inline;
}

.woo-selected-variation-item-name {
  font-family: inherit;
  font-weight: bold;
  font-size: 1rem;
  color: #111;
  display: inline;
  vertical-align: middle;
  padding-left: 2px; /* for spacing after the colon */
}

/* Nudge only the Color selected variation slightly up */
th.label label[for="pa_color"] + .woo-selected-variation-item-name {
  position: relative;
  top: -0.0px; /* adjust this value as needed */
}

/* --------------- STYLING FOR SIZE CHART LINK -------------- */

.size-chart-link {
  display: inline-block;
  margin: 6px 0;
  font-size: 14px;
  color: #0000ff;
  cursor: pointer;
}

.size-chart-link:hover {
  text-decoration: underline;
}

/* --------- MAKE BANK CARDS SIT CLOSER ON PRODUCT PAGES ----------------- */

/* Target payment logos wrapper */
.payment-logos {
  display: flex;              /* row layout */
  justify-content: left;      /* or flex-start */
  align-items: center;        /* vertical align */
  gap: 8px;                   /* even spacing between logos */
  flex-wrap: wrap;            /* allows wrapping on smaller screens */
}

/* Target each image widget inside above wrapper */
.payment-logos .elementor-widget-image {
  flex: 0 0 auto;          /* prevent shrinking or growing */
}

/* Target the SVGs only */
.payment-logos img {
  height: 24px;            /* force uniform height */
  width: auto;             /* preserve aspect ratio */
  display: block;          /* remove inline spacing artifacts */  
}

/* ----------------  TIDY UP CHECKOUT RADIO BUTTON SECTION -------------- */

/* Target labels in checkout payment methods */
.woocommerce-checkout .wc_payment_method label {
    display: inline-flex;       /* flex container for the three items */
    align-items: center;        /* vertical centering */
    gap: 6px;                   /* spacing between radio, text, and icon */
    cursor: pointer;
    line-height: 1;             /* remove extra line-height misalignment */
}

/* Fix radio button vertical alignment */
.woocommerce-checkout .wc_payment_method input[type="radio"] {
    vertical-align: middle;     /* fallback alignment */
    margin: 0;                  /* remove extra default spacing */
    height: 16px;               /* consistent size */
    width: 16px;                
}

/* Fix icon vertical alignment */
.woocommerce-checkout .wc_payment_method img {
    vertical-align: middle;     /* fallback */
    display: inline-block;
    max-height: 24px;           /* same for all icons */
    width: auto;
}

/* --------- SAFARI-SAFE STICKY PRODUCT GALLERY ----------------- */

/* Sticky left product gallery - cross browser including Safari */
.sticky-left {
  position: -webkit-sticky; /* Safari older versions */
  position: sticky;
  /*top: 80px;  /* adjust for fixed header height */
  align-self: flex-start; /* fixes flexbox issues in Safari */
}

/* Optional fix: use 'parent-fix' on the parent container 
   if sticky isn't working (due to overflow settings) */
.sticky-left.parent-fix {
  overflow: visible !important; /* prevent parent from blocking stickiness */
}

/* ----------------- STICKY PRODUCT GALLERY -------------- */
@media (min-width: 767px) {
	.sticky-media {
		position: sticky;
		top: 20px;
		align-self: flex-start;
	}
}

/* ----------------- CART PAGE EXPRESS BUTTON MODS -------------- */

#wc-stripe-express-checkout-element-applePay,
#wc-stripe-express-checkout-element-googlePay
{
	border-radius: 30px;
	overflow: hidden;
	margin:0px !important;
}
.woocommerce-cart #wc-stripe-express-checkout-element {
	margin: 0px !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	margin: 0px 10px !important;
	display: flex !important;
	align-items: center;
}
.woocommerce-cart .wc-proceed-to-checkout {
	flex-wrap: wrap;
	gap: 10px 0px;
}

/* Nudge the <iframe> up to align with Proceed-to-checkout btn */ 
/* .woocommerce-cart .wc-proceed-to-checkout .wc-stripe-express-checkout-element {
  position: relative;
  top: -10px !important; 
}
 */
/* Prevent Proceed-to btn stretched down when express btn added */
/* .woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    margin: auto 10px auto auto !important;
} */

/* ------------- CHANGE MAIN IMAGE ARROWS ------------ */

/* Base arrow box styling */
.wpr-gallery-slider-arrow {
  background: rgba(255,255,255,0.3) !important;
  border: solid !important;
  border-width: 1px !important;
  border-color: rgba(105,47,62,0.3) !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 4px rgba(105,47,62,0.1) !important;
  width: 44px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}

/* Remove Font Awesome icon */
.wpr-gallery-slider-arrow i {
  display: none !important;
}

/* Custom arrows */
.wpr-gallery-slider-prev-arrow::before {
  content: "◂"; /* U+25C2 */
  font-size: 40px !important;
  color: #692f3e;
  line-height: 1;
}

.wpr-gallery-slider-next-arrow::before {
  content: "▸"; /* U+25B8 */
  font-size: 40px !important;
  color: #692f3e;
  line-height: 1;
}

/* Hover effect: reverse colors */
.wpr-gallery-slider-arrow:hover {
  background: #692f3e !important;
}

.wpr-gallery-slider-arrow:hover::before {
  color: #fff;
  transform: scale(1.05);
}