/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Outer wrapper spacing */
.single-product #payment-method-message{
  margin-top: 10px;
	margin-bottom: 15px;
}

/* Make the Stripe iframe behave nicely in the flow */
.single-product #payment-method-message iframe{
  display: block;
  width: 100% !important;
  max-width: 100%;
}

/* off canvas menu tweaks */

.slideout-navigation .main-nav, .slideout-navigation .slideout-widget:not(:last-child) {
	margin-bottom: 80px !important;
}

/* =========================================================
   TPC Off-canvas: style the close row as the header bar
   Inject "MENU" label into the close button row
   ========================================================= */


/* =========================================================
   TPC Off-canvas header fix
   Prevent menu from overlapping custom close/header row
   ========================================================= */

/* Reset the negative margin that hides the header border */
#generate-slideout-menu .main-nav{
  margin-top: 0 !important;
}

/* Close button row styled like the header bar */
#generate-slideout-menu button.slideout-exit{
  background: #2b2b2b;
  color: #ffffff;

  border: 0;
  border-bottom: 5px solid var(--accent, var(--gp-accent-color, #ff6a00));

  width: 100%;
  box-sizing: border-box;
  padding: 15px 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  text-align: left;
}

/* Add MENU text on the left */
#generate-slideout-menu button.slideout-exit::before{
  content: "MENU";
  font-size: 28px;
  line-height: 1;
}

/* Keep icon aligned */
#generate-slideout-menu button.slideout-exit .gp-icon{
  display: inline-flex;
  align-items: center;
}

/* Remove any default vertical nudge on the SVG */
#generate-slideout-menu button.slideout-exit .gp-icon svg{
  top: 0;
}

/* Hide built-in "Close" text without affecting layout */
#generate-slideout-menu button.slideout-exit .screen-reader-text{
  position: absolute;
  left: -9999px;
}

/* ===== Help menu (top bar) - standalone, GP/DC-like submenu fade ===== */

/* Base layout */
.tpc-help-menu{
  position: relative;
}

/* Top-level list */
.tpc-help-menu > ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: center;
  background-color: var(--accent);
}

/* Top-level items */
.tpc-help-menu > ul.menu > li{
  position: relative;
  margin: 0;
  padding: 0;
}

/* Links */
.tpc-help-menu a{
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: color .1s ease-in-out, background-color .1s ease-in-out;
}

/* Caret for items with children */
.tpc-help-menu > ul.menu > li.menu-item-has-children > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tpc-help-menu > ul.menu > li.menu-item-has-children > a:after{
  content: "▾";
  font-size: 11px;
}

/* Submenu dropdown (match primary nav fade: opacity + pointer-events) */
.tpc-help-menu ul.sub-menu{
  list-style: none;
  margin: 0;
  padding: 10px;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: var(--accent);
  z-index: 9999;

  /* Hidden state */
  opacity: 0;
  pointer-events: none;

  /* GP/DC mega fade match (with fallback if var is missing) */
  transition: opacity var(--dc-mega-fade, 0.08s) linear;
}

/* Submenu items */
.tpc-help-menu ul.sub-menu li{
  margin: 0;
  padding: 0;
}

.tpc-help-menu ul.sub-menu a{
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
}

/* Show on hover + keyboard focus */
.tpc-help-menu > ul.menu > li:hover > ul.sub-menu,
.tpc-help-menu > ul.menu > li:focus-within > ul.sub-menu{
  opacity: 1;
  pointer-events: auto;
}

/* Help menu dropdown item hover background */
.tpc-help-menu ul.sub-menu a:hover,
.tpc-help-menu ul.sub-menu a:focus{
  background-color: var(--accent-hover);
}

/* Brands page grid fix: [product_brand_thumbnails_description] */
ul.brand-thumbnails-description{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

ul.brand-thumbnails-description > li{
  /* Ignore the plugin's inline width and use a clean grid */
  width: auto !important;
  flex: 0 0 calc(25% - 24px);
  box-sizing: border-box;
  margin: 0 !important;
  clear: none !important;
  float: none !important;
}

ul.brand-thumbnails-description .term-thumbnail{
  display: block;
}

ul.brand-thumbnails-description .term-thumbnail img{
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive: match GeneratePress breakpoints */
/* Tablet and down: 3 columns */
@media (max-width: 768px){
  ul.brand-thumbnails-description > li{
    flex-basis: calc(33.333% - 24px);
  }
}

/* Mobile and down: 2 columns */
@media (max-width: 480px){
  ul.brand-thumbnails-description > li{
    flex-basis: calc(50% - 24px);
  }
}


/* --- Fix: mini cart drawer above store notice --- */

/* Keep the store notice relatively low */
.woocommerce-store-notice,
#woocommerce-store-notice {
  z-index: 1000 !important;
}

/* Put the drawer overlay above everything (including the notice) */
.wc-block-components-drawer__screen-overlay {
  z-index: 20000 !important;
}

/* Put the actual drawer panel above its overlay */
.wc-block-components-drawer {
  z-index: 20001 !important;
}

/* make primary nav sub menus not have padding so they menu lists aren't as long */

.main-navigation .main-nav ul ul li a {
	padding: 0.6rem 0.75rem;
	font-weight: 600;
}

/* Non-mega dropdown widths only (top level parents only) */
.main-navigation .main-nav > ul > li:not(.mega-menu) > ul.sub-menu{
  padding: 1rem;
  width: 325px;
}

/* Deeper non-mega submenus (only under top-level non-mega parents) */
.main-navigation .main-nav > ul > li:not(.mega-menu) > ul.sub-menu ul.sub-menu{
  width: 275px;
}



@media (min-width: 769px) {
  /* Keep GP container behaviour, do not space-between the whole inside-navigation */
  .main-navigation .inside-navigation {
    justify-content: center;
  }

  /* Make the actual menu take full width of the 1200 container */
  .main-navigation .main-nav {
    width: 100%;
  }
	
  /* Make the actual menu take full width of the 1200 container */
@media screen and (max-width: 1200px) and (min-width: 769px) {
	.main-navigation .main-nav {
    width: 100%;
  }
	}

  /* Distribute top-level items across the full width */
  .main-navigation .main-nav > ul.menu {
    display: flex;
    width: 100%;
    justify-content: space-between; /* use full width */
  }

  /* Prevent SF menu floats interfering */
  .main-navigation .main-nav > ul.menu > li {
    float: none;
  }
}

/* Make containers with ""linked-container" class expand the link within to the size of the container */

.gb-container.linked-container .gb-inside-container {
  position: relative;
}

.gb-container.linked-container a:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

/* Make cart icon accent colour in header */

.header-cart-icon .gb-icon {
  color: var(--accent);
}

/* Make account icon accent colour in header */

.header-account-icon .gb-icon {
  color: var(--accent);
}

/* Add back in some margin to the bottom of the primary menu navigation, after removing it in the customiser > layout > primary nav */

.main-nav {
  margin-top: -20px;
}

/* WOOCOMMERCE STORE NOTICE */

/* Store notice styling */

p.woocommerce-store-notice.demo_store {
  background-color: var(--accent);
  padding: 10px;
  bottom: 0;
  top: auto;
  position: fixed;
  border-left: 10px solid rgba(0, 0, 0, 0.3);
}

/* Make Dismiss link bold */

.woocommerce-store-notice a,
p.demo_store a {
  font-weight: 600;
}

/* Add more bottom padding to store notice to make dismiss easier to click on mobile */

@media (max-width: 768px) {
  p.woocommerce-store-notice.demo_store {
    padding-bottom: 25px;
  }
}

/* Hide / Make mobile menu "Menu" text next to hamburger icon not display */

span.mobile-menu {
  display: none;
}

/* Re-order the mobile menu so that the logo is in the middle, hamburger icon is on the left and cart icon is on the right */

div.site-logo.mobile-header-logo {
  order: 1;
}

#mobile-header button.menu-toggle {
  order: 0;
  font-size: 22px;
}

.header-cart-icon-mobile {
  order: 2;
}

/* Add padding above mobile header */

#mobile-header {
  padding-top: 5px;
}

/* Add padding to the top of mobile menu navigation dropdown menu */

#mobile-header .main-nav {
  padding-top: 15px;
}

/* Make mobile search bar have padding for 1px width difference at tablet / phone mobile breakpoint */

@media (min-width: 767px) and (max-width: 769px) {
  .header-search-bar-for-mobile {
    padding-bottom: 10px;
    padding-top: 5px;
  }

  a.header-cart-icon-mobile {
    font-size: 1.5em;
  }
}

/* Make mobile header logo centred for tablets to large phones */

@media (min-width: 622px) and (max-width: 768px) {
  .mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    margin-left: auto;
  }
}

/* Make header element full width by removing padding */

.nav-below-header .main-navigation .inside-navigation.grid-container,
.nav-above-header .main-navigation .inside-navigation.grid-container {
  padding: 0px;
}

/* Add the padding back in on just the menu items to compensate + add bottom padding to help mobile users be able to select all options */

#menu-handheld-menu.slideout-menu {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
}

/*  Add bottom margin below the custom header element */

.off-canvas-menu-header {
  width: 100%;
  margin-bottom: 20px;
}

/* Make background of website not scrollable when the off canvas panel is open */

.slide-opened body {
  overflow: hidden;
}

/* WP Forms, make Submit button orange accent colour */

/* Make contact form submit button orange accent colour and text white like the rest of the theme buttons */

.wpforms-form button[type=submit] {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover {
  background-color: var(--accent-highlight) !important;
}

/* Make border when submit is clicked orange accent instead of default blue */

div.wpforms-container-full input[type=submit]:focus:after,
div.wpforms-container-full button[type=submit]:focus:after,
div.wpforms-container-full .wpforms-page-button:focus:after {
  border: 2px solid var(--accent) !important;
}

/* Make a button to toggle sidebar filters on mobile */

/* Hide toggle on desktop */
@media (min-width: 769px) {
  #side-toggle,
  #side-toggle + label {
    display: none !important;
  }
}

/* move sidebar above content on mobile */
@media (max-width: 768px) {
  .left-sidebar .site-content {
    display: flex;
    flex-direction: column-reverse;
  }

  /* switch lables on off toggle */
  #side-toggle:checked + label span:nth-child(1),
  #side-toggle:not(:checked) + label span:nth-child(2) {
    display: none;
  }

  /* remove all content after label on check */
  #side-toggle:not(:checked) + label ~ * {
    display: none;
  }

  /* hide input checkbox */
  #side-toggle {
    position: absolute;
    visibility: hidden;
    opacity: 0;
  }

  /* style label to look like a button */
  #side-toggle + label {
    display: block;
    padding: 10px;
    margin: 0px 10px;
    border: 1px solid;
    line-height: 1;
    text-align: center;
    border-radius: 4px;
    color: var(--base-3);
    background-color: var(--accent);
  }
}

/* Make the gap between the show filters and rest of page on mobile smaller */

@media (max-width: 768px) {
  div.widget-area.sidebar.is-left-sidebar div.inside-left-sidebar {
    margin-bottom: 0px;
  }
}

/* Make the gap at the top of the open mobile filters smaller and reduce bottom gap */

@media (max-width: 768px) {
  .footer-widgets .widget:last-child,
  .sidebar .widget:last-child {
    padding-top: 20px;
    padding-bottom: 10px;
  }
}

/* PRIMARY MENU NAVIGATION & SUB MENUS */

/* Add blue border to the bottom of the submenus */

.main-navigation ul ul {
  border-bottom: 3px solid;
  border-bottom-color: var(--accent);
}

/* WOOCOMMERCE MOST POPULAR & LATEST RELEASES SHORTCODE BLOCKS ON HOME PAGE */

/* Reduce padding at bottom of products list and view more / view all buttons etc */

ul.products.columns-4 {
  margin-bottom: 0px;
}

/* Make all button have 3px border radius rounded corners */

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

/* ACCOUNT DASHBOARD AND PAGES */

/* Make delete button in payment methods red */

a.button.delete {
  background-color: var(--error) !important;
}

a.button.delete:hover {
  background-color: var(--error-hover) !important;
}

/* Make cancel request button in orders red */

.woocommerce-button.button.wc-cancel-order {
  background-color: var(--error);
}

.woocommerce-button.button.wc-cancel-order:hover {
  background-color: var(--error-hover);
}

/* Make confirm cancellation button red */

.wc-cancel-main .wc-cancel-buttons .wc-cancel-confirm {
  background-color: var(--error);
}

.wc-cancel-main .wc-cancel-buttons .wc-cancel-confirm:hover {
  background-color: var(--error-hover);
}

@media (max-width: 390px) {
  .wc-cancel-main .wc-cancel-buttons .wc-cancel-confirm {
    margin-top: 10px;
  }
}

/* Add margin to view, cancel request, invoice */

.woocommerce table.my_account_orders .button {
  margin: 5px;
}

/* Make cancellation request sent successfully message match the rest of the success styling */

.wc-cancel-main .wcc_sucess {
  color: var(--base-3) !important;
  background-color: var(--success);
  padding: 15px 20px;
  border-left: 10px solid rgba(0, 0, 0, 0.3);
}

/* Make Payment methods buttons match order buttons */

.woocommerce-MyAccount-paymentMethods.shop_table.shop_table_responsive.account-payment-methods-table .button {
  margin: 5px;
  text-align: center;
}

/* Make orders table responsive and correct widths on mobile */

@media (max-width: 768px) {
  .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-number {
    width: 45%;
  }

  .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-date {
    width: 55%;
  }

  .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-status {
    width: 100%;
  }

  .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-total {
    width: 100%;
  }

  .woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions {
    width: 100%;
  }
}

/* Make payment methods responsive and correct widths on mobile */

@media (max-width: 768px) {
  .woocommerce-PaymentMethod.woocommerce-PaymentMethod--method.payment-method-method {
    width: 100%;
  }

  .woocommerce-PaymentMethod.woocommerce-PaymentMethod--expires.payment-method-expires {
    width: 100%;
  }

  .woocommerce-PaymentMethod.woocommerce-PaymentMethod--actions.payment-method-actions {
    width: 100%;
  }
}

/* Make account dashboard content have margin top from navigation and add a border on mobile */

@media (max-width: 768px) {
  .woocommerce-MyAccount-content {
    margin-top: 20px;
    border-top: 3px solid var(--accent);
    padding-top: 20px;
  }
}

/* Add grey border between orders on mobile */

@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr {
    border-bottom: 3px solid rgba(0, 0, 0, 0.1) !important;
  }
}

/* Remove : before delete button on payment methods on mobile */

@media (max-width: 768px) {
  .woocommerce-PaymentMethod.woocommerce-PaymentMethod--actions.payment-method-actions::before {
    display: none;
  }
}

/* WISHLIST */

/* Reduce wishlist table padding */

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  padding: 10px !important;
}

/* Increase margin at bottom of wishlist page by adding margin to social share on div */

.yith_wcwl_wishlist_footer > div {
  margin-bottom: 60px;
}

/* Make table font size larger */

.shop_table.cart.wishlist_table.wishlist_view.traditional.responsive {
  font-size: 15px;
}

/* Make green in stock text the same green as success messages in rest of the theme */

.wishlist_table .product-stock-status span.wishlist-in-stock {
  color: var(--success);
}

/* Make wishlist remove x / cross red and sqaure, also make mobile trash icon background red */

.woocommerce #content table.wishlist_table.cart a.remove {
  color: var(--base-3) !important;
  background-color: var(--error) !important;
  border-radius: 0;
  border: 0 !important;
}

/* Make add to basket button accent orange & have white text */

.wishlist_table .product-add-to-cart a {
  color: var(--base-3);
  background-color: var(--accent);
}

/* Make add to basket button have padding on desktop */

@media (min-width: 769px) {
  .wishlist_table .product-add-to-cart a {
    min-height: 31px;
    padding: 8px;
  }
}

@media (max-width: 768px) {
  .wishlist_table .product-add-to-cart a {
    margin: 0px;
    padding: 6px 14px;
  }
}

/* Make mobile wishlist table flex */

.additional-info-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 3px solid rgba(0, 0, 0, 0.1) !important;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

.wishlist_table.mobile li .item-wrapper {
  width: 100%;
}

/* Make mobile wishlist remove icon white instead of accent blue */

a.remove_from_wishlist {
  color: var(--base-3);
}

/* Make mobile wishlist add to basket button have padding and re-arrange order to match desktop */

.wishlist_table.mobile li .additional-info-wrapper .move-to-another-wishlist,
.wishlist_table.mobile li .additional-info-wrapper .product-add-to-cart {
  order: 3;
}

/* Make mobile wishlist product title match default GeneratePress inherited font, so that it matches the desktop versions */

.item-details .product-name a {
  font-size: 15px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 1.5;
}

/* Stripe Payments (can still show in newer flows depending on setup) */

/* Remove "- OR -" separator */

#wc-stripe-payment-request-button-separator {
  display: none !important;
}

/* Remove padding above Google Pay G Pay, Apple Pay and add bottom margin */

#wc-stripe-payment-request-wrapper {
  padding-top: 0 !important;
  margin-bottom: 1.25em;
}

/* THANK YOU PAGE */

/* Add margin to bottom of billing address to create space between it and shipping address and add to bottom of shipping address to create space between the end of the page and the footer */

.woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1 {
  margin-bottom: 2em;
}

.woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
    margin-bottom: 40px;
  }
}

@media (max-width: 425px) {
  .woocommerce-columns.woocommerce-columns--2.woocommerce-columns--addresses.col2-set.addresses {
    margin-bottom: 20px;
  }
}

/* Make product table flex and set appropriate widths */

.woocommerce-table__product-name.product-name {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.attachment-shop_thumbnail.size-shop_thumbnail {
  width: 15%;
  height: 15%;
  margin: 0;
}

div.woocommerce-order .woocommerce-table__product-name.product-name a {
  width: 25%;
  margin: 0;
  padding: 0px 10px;
}

.woocommerce-table__product-name.product-name .product-quantity {
  width: 10%;
  margin: 0;
}

.wc-item-meta {
  width: 50%;
  margin: 0;
  padding: 0px 10px;
}

/* Make product table scales mobile appropriate and re-order */

@media (max-width: 768px) {
  .woocommerce-table__product-name.product-name {
    row-gap: 10px;
  }

  .attachment-shop_thumbnail.size-shop_thumbnail {
    width: 30%;
    order: 0;
  }

  div.woocommerce-order .woocommerce-table__product-name.product-name a {
    width: 50%;
  }

  .woocommerce-table__product-name.product-name .product-quantity {
    width: 20%;
    text-align: center;
  }

  .wc-item-meta {
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 425px) {
  .attachment-shop_thumbnail.size-shop_thumbnail {
    width: 60%;
    order: 0;
  }

  div.woocommerce-order .woocommerce-table__product-name.product-name a {
    width: 100%;
    order: 2;
    padding: 0;
  }

  .woocommerce-table__product-name.product-name .product-quantity {
    width: 40%;
    order: 1;
    padding-top: 25%;
  }

  .wc-item-meta {
    order: 3;
  }
}

/* Make thank you order details flex on mobile and set appropriate widths */

@media (max-width: 768px) {
  .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .woocommerce ul.order_details li {
    margin: 10px 0;
  }

  .woocommerce-order-overview__order.order {
    width: 50%;
    padding-right: 20px !important;
  }

  .woocommerce-order-overview__date.date {
    width: 50%;
    padding-left: 20px !important;
    border: 0px !important;
  }

  .woocommerce-order-overview__email.email {
    width: 65%;
    padding-right: 20px !important;
  }

  .woocommerce-order-overview__total.total {
    width: 35%;
    padding-left: 20px !important;
    border: 0px !important;
  }

  .woocommerce-order-overview__payment-method.method {
    width: 100%;
    padding: 0 !important;
  }
}

/* Style thank you text message to match success colors */

.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  color: var(--base-3);
  padding: 20px 30px;
  background-color: var(--success);
  border-left: 10px solid rgba(0, 0, 0, 0.3);
}

/* SINGLE PRODUCT PAGE */

/* Adjust margin spacing around the price */

.woocommerce div.product p.price {
	margin: 0.5em 0;
}

/* Make all of product tab clickable on mobile instead of just the text */

@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
  }
}

/* Make the sale badge appear on the product thumbnail instead of above the product title */

.product ol.flex-control-nav.flex-control-thumbs {
  display: flex;
}

.woocommerce.single-product span.onsale {
  position: absolute;
  left: 0;
  top: 0;
}

/* Hide the original product title below images on mobile so that the hook element product title above images is the only one showing on mobile */

@media (max-width: 768px) {
  .product_title {
    display: none;
  }
}

/* Style the new product title added by a hook elementabove the product images on mobile */

.mobile-product-title {
  margin-bottom: 0;
}

.mobile-product-title-div.hide-on-desktop.hide-on-tablet {
  margin-bottom: 0.5em;
}

/* Style the new product added by a hook element min max variation price above the product images on mobile */

.mobile-product-price {
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 5px;
}

/* Make woocommerce message and error info box a flex box on mobile */

@media (max-width: 768px) {
  .woocommerce-message {
    display: flex;
    flex-wrap: wrap;
  }

  .woocommerce-error {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Make the woocommerce message and error info button full width and bottom margin on mobile*/

@media (max-width: 768px) {
  .woocommerce .woocommerce-error .button,
  .woocommerce .woocommerce-info .button,
  .woocommerce .woocommerce-message .button,
  .woocommerce-page .woocommerce-error .button,
  .woocommerce-page .woocommerce-info .button,
  .woocommerce-page .woocommerce-message .button {
    width: 100%;
    margin-bottom: 12px;
  }
}

/* Make woocommerce info and error message buttons have darker backgrounds */

.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
}

.woocommerce .woocommerce-error .button:hover,
.woocommerce .woocommerce-info .button:hover,
.woocommerce .woocommerce-message .button:hover,
.woocommerce-page .woocommerce-error .button:hover,
.woocommerce-page .woocommerce-info .button:hover,
.woocommerce-page .woocommerce-message .button:hover {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
}

.woocommerce .woocommerce-error .button:active,
.woocommerce .woocommerce-info .button:active,
.woocommerce .woocommerce-message .button:active,
.woocommerce-page .woocommerce-error .button:active,
.woocommerce-page .woocommerce-info .button:active,
.woocommerce-page .woocommerce-message .button:active {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
}

.woocommerce .woocommerce-error .button:focus,
.woocommerce .woocommerce-info .button:focus,
.woocommerce .woocommerce-message .button:focus,
.woocommerce-page .woocommerce-error .button:focus,
.woocommerce-page .woocommerce-info .button:focus,
.woocommerce-page .woocommerce-message .button:focus {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
}

/* Make variation selection text smaller on mobile */

@media (max-width: 768px) {
  .woocommerce div.product form.cart .variations td,
  .woocommerce div.product form.cart .variations th {
    font-size: 12px;
  }

  .woocommerce div.product form.cart .variations select {
    font-size: 12px;
  }
}

/* Make variation selection full width 100% */

.woocommerce div.product form.cart .variations select {
  width: 100%;
}

/* Make final product price come last, align right and larger */

.woocommerce-variation.single_variation {
  display: flex;
  flex-wrap: wrap;
  order: 1;
  width: 100%;
  margin: 0.8em 0;
  text-align: right;
  border-top: 3px solid var(--accent);
  padding: 12px 0 0;
}

/* Make final single product price black and larger and appear after stock count / notice */

.woocommerce-variation-price {
  order: 1;
  width: 75%;
  font-size: 30px;
  font-weight: 700;
  padding: 0 15px 0px 0px;
}

@media (max-width: 425px) {
  .woocommerce-variation-price {
    font-size: 25px;
  }
}

/* Make stock availability notice text-align left and add padding */

.woocommerce-variation-availability {
  width: 25%;
  text-align: left;
  padding: 15px 0 0 15px;
}

/* Make In Stock text same success green */

.woocommerce div.product p.stock.in-stock {
  color: var(--success);
}

/* Space between quantity buttons and add to basket buttons */

.woocommerce-variation-add-to-cart {
  order: 2;
  justify-content: space-between;
  width: 100%;
  row-gap: 20px;
}

.woocommerce div.product form.cart div.quantity {
  width: 30%;
  margin: 0;
}

.woocommerce div.product form.cart .button {
  width: 65%;
  margin-left: 5%;
}

/* Make price on single product page full width */

.woocommerce div.product p.price {
  width: 100%;
}

/* Make minus and plus quantities and the add to basket button container full width */

.woocommerce div.product.do-quantity-buttons form.cart {
  width: 100%;
  margin-bottom: 1.5em;
}

/* Change percentage values of quantity buttons and add to basket on smaller mobile screen */

@media (max-width: 425px) {
  .woocommerce div.product form.cart div.quantity {
    width: 35%;
  }

  .woocommerce div.product form.cart .button {
    width: 60%;
  }
}

/* Make add to wishlist full width and remove top margin */

.yith-wcwl-add-to-wishlist {
  width: 100%;
  margin: 0 0 1.5em 0;
}

/* Make product meta data, SKU etc full width */

.product_meta {
  width: 100%;
}

/* Make quantity buttons plus and minus accent orange and match cart version */

.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after,
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before,
.woocommerce form .quantity.buttons-added .minus,
.woocommerce form .quantity.buttons-added .plus {
  background-color: var(--accent) !important;
  color: var(--base-3) !important;
  font-weight: bold;
}

/* Make the heart for products already in wishlist red instead of black */

.yith-wcwl-icon.fa.fa-heart {
  color: var(--error);
}

.yith-wcwl-icon.fa.fa-heart-o {
  color: var(--error);
}

/* Make Success product added to wishlist message the same green success color and styling */

#yith-wcwl-popup-message {
  font-weight: normal;
  color: var(--base-3);
  background: var(--success);
  border-left: 10px solid rgba(0, 0, 0, 0.3);
}

/* Reduce padding below single product image on mobile */

@media (max-width: 768px) {
  .woocommerce div.product div.images {
    margin-bottom: 0;
  }
}

/* Make product tabs grey and active have an accent blue bottom border */

.woocommerce div.product .woocommerce-tabs ul.tabs {
  background-color: var(--contrast-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--contrast);
  border-bottom: 3px solid var(--accent) !important;
}

/* Make product tabs text slightly less bold */

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-weight: 600;
}

/* Make woocommerce product tab body background grey and add border */

.woocommerce #content div.product .woocommerce-tabs,
.woocommerce div.product .woocommerce-tabs,
.woocommerce-page #content div.product .woocommerce-tabs,
.woocommerce-page div.product .woocommerce-tabs {
  background-color: var(--base-2);
  border: 1px solid var(--base);
}

/* add padding to woocommerce tab body text */

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 10px 15px;
}

/* Add margin on related products to create breathing space from up-sells */

.related.products {
  margin-top: 30px;
}

/* CATEGORY PAGE PRODUCT ARCHIVE PAGES */

/* Make Sale badge align left on thumbnail instead of on the right to match single product page */

.woocommerce ul.products li.product.sales-flash-overlay .inside-wc-product-image .onsale {
  position: absolute;
  right: initial;
}

@media (max-width: 768px) {
  .woocommerce ul.products li.product.sales-flash-overlay .inside-wc-product-image .onsale {
    padding: 6px 11px;
    font-size: 70%;
  }
}

/* Make recently viewed widget images larger */

.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img {
  width: 40%;
}

/* Make notices, error, success messages full width */

.woocommerce-notices-wrapper {
  width: 100%;
}


/* Make flex and style product category title */

header.woocommerce-products-header {
  order: -4;
  width: 100%;
}

@media (max-width: 768px) {
  header.woocommerce-products-header {
    width: 100%;
    order: -5;
  }
}

/* Make flex and style woocommerce nav breadcrumb */

nav.woocommerce-breadcrumb {
  order: -5;
  width: 100%;
}

@media (max-width: 768px) {
  .woocommerce nav.woocommerce-breadcrumb {
    margin: 0 0 0.5em;
  }
}

/* Make flex and style showing results count */

#wc-column-container .woocommerce-result-count {
  order: -3;
  width: 33%;
  padding: 0 12.5px 0 0;
}

@media (max-width: 768px) {
  #wc-column-container .woocommerce-result-count {
    display: flex;
    justify-content: center;
    width: 100%;
    order: 1;
    margin-top: 40px;
  }
}

/* Make pagination / page selection full width and style on mobile */

@media (max-width: 768px) {
  .woocommerce nav.woocommerce-pagination {
    width: 100%;
    margin-top: 0px;
  }
}

/* Make flex and style products per page */

form.form-wppp-select.products-per-page {
  order: -2;
  width: 33%;
  padding: 0 7.5px;
  margin-left: 0px !important;
}

@media (max-width: 768px) {
  form.form-wppp-select.products-per-page {
    width: 50%;
    padding: 0px 5px 0px 0px;
  }
}

select.select.wppp-select {
  margin-left: 0;
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 40px 10px 12px;
  background: 0 0;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Make flex and style order by popularity etc. */

#wc-column-container .woocommerce-ordering {
  order: -1;
  width: 33%;
  padding: 0px 0px 0 12.5px;
}

@media (max-width: 768px) {
  #wc-column-container .woocommerce-ordering {
    width: 50%;
    padding: 0px 0px 0px 5px;
  }

  .woocommerce #wc-column-container .woocommerce-ordering,
  .woocommerce #wc-column-container .woocommerce-result-count {
    margin-bottom: 20px;
  }
}

/* Make category / archive page content flex so it can be re-ordered */

@media (max-width: 768px) {
  #wc-column-container.wc-columns-container.wc-columns-4.wc-tablet-columns-3.wc-mobile-columns-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* Hide fibosearch / default woocommerce search icon in primary nav */

.dgwt-wcas-menu-bar-item {
	display: none;
}

/* Make woo mini cart product counter bubble smaller */

.wc-block-mini-cart__badge {
	font-size: .5em;
}

/* Remove orange background highlight on mini cart icon when active */

/* Remove accent "active" background on Woo mini cart button only */
.wc-block-mini-cart__button,
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:active,
.wc-block-mini-cart__button:focus,
.wc-block-mini-cart__button:focus-visible {
  background-color: transparent !important;
}

/* Style Account and Mini Cart Icons in header and add Cart text to mini cart */

/* Woo mini cart: inherit typography from parent (match GB container settings) */
.wc-block-mini-cart__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: inherit;              /* key line: inherits size, family, weight, etc */
  color: inherit;
  line-height: inherit;
  padding: 0;                 /* let your layout control spacing */
  background: transparent !important;
  box-shadow: none !important;
}

/* Add Cart text that also inherits typography */
.wc-block-mini-cart__button::after {
  content: "Cart";
  font: inherit;
  color: inherit;
}

@media (max-width: 768px) {
.wc-block-mini-cart__button::after {
  display: none;
}
}


/* Keep the icon using your accent, without affecting text */
@media (min-width: 1025px) {
.wc-block-mini-cart__icon {
  fill: var(--accent);
}
}

/* Remove the accent active background when drawer is open */
.wc-block-mini-cart__button[aria-expanded="true"],
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus,
.wc-block-mini-cart__button:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Match GB Account button vertical position (GB button has top padding) */
.wc-block-mini-cart__button {
  padding-top: 20px; /* tweak this if needed */
}

/* If you're using the fallback GB cart link on cart/checkout, match it too */
.header-cart-fallback {
  padding-top: 20px;
}

/* Default: show real mini cart, hide fallback */
.header-cart-fallback {
  display: none;
}

/* On Cart + Checkout: hide Woo mini cart (it is disabled anyway), show fallback link */
.woocommerce-cart .wc-block-mini-cart,
.woocommerce-checkout .wc-block-mini-cart {
  display: none !important;
}

.woocommerce-cart .header-cart-fallback,
.woocommerce-checkout .header-cart-fallback {
  display: inline-flex;
}

/* Make fallback button inherit the GB container typography */
.header-cart-fallback {
  font: inherit;
  color: inherit;
  text-decoration: none;
  align-items: center;
  gap: 0.5em;
}

/* Make the fallback icon match your accent colour */
.header-cart-fallback .gb-icon {
  color: var(--accent);
}

/* Fallback cart button: hidden everywhere by default */
a.header-cart-fallback {
  display: none !important;
}

/* Only show fallback on Cart + Checkout */
.woocommerce-cart a.header-cart-fallback,
.woocommerce-checkout a.header-cart-fallback {
  display: inline-flex !important;
}

/* Hide the Woo mini-cart on Cart + Checkout (it's disabled there anyway) */
.woocommerce-cart .wc-block-mini-cart,
.woocommerce-checkout .wc-block-mini-cart {
  display: none !important;
}

/* Make padding to the left of dropdown menu toggles on menu nav items smaller on tablet */

@media (max-width: 1024px) {
.menu-item-has-children .dropdown-menu-toggle {
	padding-left: 2px;
	padding-right: 0px;
}
}

@media (max-width: 1024px) {}
.main-navigation a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items {
	font-size: 16px;
}


/* Tablet: make search expand and cart right align in the mobile header row */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Stop GP logo auto-margin stealing flex space */
  .mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    margin-right: 0 !important;
  }

  /* Let your hook container fill the remaining header space */
  #mobile-header .gb-container.header-cart-icon-mobile {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Make the inner wrapper a proper row */
  #mobile-header .gb-container.header-cart-icon-mobile .gb-inside-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }

  /* 1st child container (search wrapper) takes the middle space */
  #mobile-header .gb-container.header-cart-icon-mobile .gb-inside-container > .gb-container:first-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 620px;  /* tweak */
    margin: 0 auto;    /* keeps it visually centred */
  }

  /* If fibosearch is inside a GB Headline, force it to behave like a block */
  #mobile-header .gb-container.header-cart-icon-mobile
  .gb-inside-container > .gb-container:first-child .gb-headline {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Make fibosearch fill the wrapper */
  #mobile-header .gb-container.header-cart-icon-mobile
  .gb-inside-container > .gb-container:first-child .dgwt-wcas-search-wrapp,
  #mobile-header .gb-container.header-cart-icon-mobile
  .gb-inside-container > .gb-container:first-child form,
  #mobile-header .gb-container.header-cart-icon-mobile
  .gb-inside-container > .gb-container:first-child input[type="search"] {
    width: 100%;
    max-width: 100%;
  }

  /* Last child container (cart wrapper) gets pushed hard right */
  #mobile-header .gb-container.header-cart-icon-mobile .gb-inside-container > .gb-container:last-child {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
}

/* Phone: hide this header search so your separate mobile search row can take over */
@media (max-width: 768px) {
  #mobile-header .gb-container.header-cart-icon-mobile
  .gb-inside-container > .gb-container:first-child {
    display: none !important;
  }
}

/* Off-canvas width: minimum 250px, prefer 90vw, cap at 420px */
:root {
  --gp-slideout-width: clamp(250px, 90vw, 420px);
}

/* TPC Off-canvas menu hierarchy styling (GeneratePress) */
#generate-slideout-menu {
  --tpc-off0: #ffffff; /* top level */
  --tpc-off1: #f3f3f3; /* level 2 */
  --tpc-off2: #e9e9e9; /* level 3 */
  --tpc-off3: #dedede; /* level 4 */
}

/* Base panel stays white */
#generate-slideout-menu .main-nav,
#generate-slideout-menu .main-nav > ul {
  background: var(--tpc-off0);
}

/* Only tint layers that are actually opened */
#generate-slideout-menu .main-nav > ul > li > ul.sub-menu.toggled-on {
  background: var(--tpc-off1);
	margin-bottom: 10px;
	padding-bottom: 10px;
}
#generate-slideout-menu .main-nav > ul > li > ul.sub-menu.toggled-on > li > ul.sub-menu.toggled-on {
  background: var(--tpc-off2);
	margin-bottom: 10px;
  padding-bottom: 10px;
}
#generate-slideout-menu
  .main-nav
  > ul
  > li
  > ul.sub-menu.toggled-on
  > li
  > ul.sub-menu.toggled-on
  > li
  > ul.sub-menu.toggled-on {
  background: var(--tpc-off3);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

/* Optional indent per depth */
#generate-slideout-menu .slideout-menu > li > ul.sub-menu > li > a {
  padding-left: 22px;
}
#generate-slideout-menu .slideout-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
  padding-left: 34px;
}
#generate-slideout-menu .slideout-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {
  padding-left: 46px;
}

/* Caret breathing room (and keep it transparent so tint shows through) */
#generate-slideout-menu .dropdown-menu-toggle{
  padding-right: 10px !important;
  background: transparent !important;
}

/* Make product filters button have less padding on mobile */

.widget.inner-padding.widget_block {
	padding: 0px
}

.wc-block-product-filters__open-overlay {
	padding: 10px;
}

/* TPC: Mobile wishlist remove button (force visible cross) */
.wishlist_table.mobile a.remove_from_wishlist{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--error);
  color: var(--base-3) !important;
  text-decoration: none;
  font-weight: 400;
}

.wishlist_table.mobile a.remove_from_wishlist::before{
  content: "×";         /* use "×" not "x" */
  font-size: 17px;
}

/* Hide YITH customosiable wishlist title section */

.wishlist-title-container {
	display: none;
}

/* add space between page title and yith wishlist content */

.woocommerce.yith-wcwl-form.wishlist-fragment {
	margin-top: 20px;
}

/* TPC Help & Advice buttons: orange icon, black text */
a.gb-button.tpc-help-btn .gb-button-text{
  color: #000;
}

a.gb-button.tpc-help-btn .gb-icon{
  color: var(--accent); /* your orange accent */
}

/* If the icon is an SVG that uses fill/stroke (belt + braces) */
a.gb-button.tpc-help-btn .gb-icon svg{
  fill: currentColor;
  stroke: currentColor;
}

/* Keep text black on hover/focus, and optionally keep icon orange too */
a.gb-button.tpc-help-btn:hover .gb-button-text,
a.gb-button.tpc-help-btn:focus .gb-button-text,
a.gb-button.tpc-help-btn:active .gb-button-text{
  color: #000;
}

a.gb-button.tpc-help-btn:hover .gb-icon,
a.gb-button.tpc-help-btn:focus .gb-icon,
a.gb-button.tpc-help-btn:active .gb-icon{
  color: var(--accent);
}

/* TPC footer: reorder GB grid columns on mobile */
@media (max-width: 768px) {

  /* GB grid is flex, so reorder the columns */
  .tpc-footer-grid .gb-grid-wrapper {
    display: flex;          /* keep it flex */
    flex-wrap: wrap;
  }

  /* ensure 2 columns */
  .tpc-footer-grid .gb-grid-wrapper > .gb-grid-column {
    width: 50% !important;
  }

  /* Current desktop order is: 1) logo, 2) shop, 3) help, 4) about
     Mobile order you want is: 1) logo, 2) about, 3) shop, 4) help */

  .tpc-footer-grid .gb-grid-wrapper > .gb-grid-column:nth-child(1) { order: 1; }
  .tpc-footer-grid .gb-grid-wrapper > .gb-grid-column:nth-child(4) { order: 2; }
  .tpc-footer-grid .gb-grid-wrapper > .gb-grid-column:nth-child(2) { order: 3; }
  .tpc-footer-grid .gb-grid-wrapper > .gb-grid-column:nth-child(3) { order: 4; }
}