/*
Theme Name:   WiselyAutomotive Child
Template:     twentytwentyfour
Version:      1.0.0
Description:  A child theme of Twenty Twenty-Four
Author:       Martin Karel
*/

/* Import parent theme's stylesheet */
/* @import url("../twentytwentyfour/style.css"); */

/* --- OLD CODE FROM WP CUSTOM CSS GUI --- */

:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}

.my-custom-header {
    position: relative; /* Ensure it has a position other than static */
    z-index: 10;
}

/* CUSTOM CLICKABLE COVER IMAGE TILES */

/* Main container setup */
.custom-cover {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  z-index: 0;
}

/* Image zoom on hover */
.custom-cover:hover img {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}

/* Reset image transform for mobile/touch devices */
.custom-cover img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
  display: block;
}

/* Overlay using ::before so we can layer ::after for click */
.custom-cover::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(56, 190, 193, 0.7); /* Default overlay */
  transition: background 0.3s ease-in-out;
  z-index: 1;
}

/* Lighten overlay on hover */
.custom-cover:hover::before {
  background: rgba(56, 190, 193, 0.5);
}

/* Text container (like Cover block inner content) */
.custom-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

/* Make the link fill the entire block via ::after */
.custom-cover a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* HOME PAGE BUTTONS - NOT WORKING */

.wa-white-button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

/* FOOTER - remove underline from text links */

.no-underline a {
  text-decoration: none;
}

/* --- BUTTONIZER --- */ 

/* Buttonizer Groups
    -0-0-1 = MOBILE SERVICE
    -0-0-20 = WORKSHOP SERVICE ?
    -0-0-39 = CONTACT US
    -0-0-58 = ENQUIRE */

/* Hide Buttonizer by default everywhere */
.buttonizer-group {
    display: none !important;
}

/* Show relevant Buttonizer on MOBILE SERVICE page */
.page-id-204 .buttonizer-group-0-0-1 {
    display: block !important;
}

/* Hide Buttonizer on LONDON WORKSHOP page */
.page-id-494 .buttonizer-group {
    display: none !important;
}

/* Show relevant Buttonizer on ABOUT US page */
.page-id-113 .buttonizer-group-0-0-39 {
    display: block !important;
}

/* Show relevant Buttonizer on STOCK page */
.page-id-2574 .buttonizer-group-0-0-58 {
    display: block !important;
}

/* .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
} */

/* --- NEW CODE IN THE STYLE SHEET --- */

/* WOO COMMERCE SHOP */

/* Remove product description / reviews / etc. tabs on product pages */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: none !important;
}

.wp-block-button__link.wp-element-button.wc-block-components-product-button__button {
    background-color: var(--wp--preset--color--custom-wa-teal);
    text-transform: uppercase;
    font-weight: bold;
}

.wp-block-button__link.wp-element-button.wc-block-components-product-button__button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

/* ADD TO BASKET button */

.single_add_to_cart_button {
    background-color: var(--wp--preset--color--custom-wa-teal);
    text-transform: uppercase;
    font-weight: bold;    
}

.single_add_to_cart_button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);   
}

/* Mini Cart - START SHOPPING button */

.wc-block-mini-cart__shopping-button {
    background-color: var(--wp--preset--color--custom-wa-teal);
    text-transform: uppercase;
    font-weight: bold;
}

.wc-block-mini-cart__shopping-button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

/* Mini Cart - title */

.wp-block-woocommerce-mini-cart-title-label-block{
    text-transform: uppercase;
}

/* BASKET - PROCEED TO CHECKOUT button */
.wc-block-cart__submit-button {
    background-color: var(--wp--preset--color--custom-wa-teal);
    text-transform: uppercase;
    font-weight: bold;
}

.wc-block-cart__submit-button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

/* SEARCH button */

.wp-block-search__button {
    background-color: var(--wp--preset--color--custom-wa-teal);
}

.wp-block-search__button:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

/* Mini Cart - Footer buttons (with items present) */

.wc-block-mini-cart__footer-checkout {
    background-color: var(--wp--preset--color--custom-wa-teal);
    text-transform: uppercase;
}

.wc-block-mini-cart__footer-checkout:hover {
    background-color: var(--wp--preset--color--custom-light-teal);
}

.wc-block-mini-cart__footer-cart {
    text-transform: uppercase;
}

/* CHECKOUT page formatting */

.wc-block-components-checkout-step__title {
    text-transform: uppercase;
}

.wc-block-components-express-payment__title {
    text-transform: uppercase;
}

.wc-block-components-checkout-return-to-cart-button {
    text-transform: uppercase;
}

.wc-block-components-checkout-place-order-button {
    text-transform: uppercase;
}

/* Rounded product thumbnails */

.wc-block-grid__product-image {
    border-radius: 10px;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.wc-block-grid__product-image:hover {
  transform: scale(1.00);
}

/* --- CLICKCUP --- */

.cu-form-head {
    text-transform: uppercase;
    font-weight: bold;
}

.cu-form__submit-button {
    text-transform: uppercase;
    font-weight: bold;
}

/* --- BLOCK AS A BUTTON --- */

.clickable-block {
  display: block;
  text-decoration: none;
  transition: background 0.3s ease;
}

.clickable-block:hover {
  background-color: #005f8d;
}

/* --- SMOOTH SCROLLING BEHAVIOUR --- */

html {
  scroll-behavior: smooth;
}

/* --- PRODUCT CATALOG (for cars) --- */

/* Hide image descriptions in gallery view */

.ewd-ulb-slide-overlay {
    display: none !important;
}

/* Rounded corners on car photos / catalog thumbnails */

.ewd-upcp-product-image {
    border-radius: 10px;
}

/* Make main product image fill the content width */
.ewd-uwp-single-product-main-image {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Ensure the image scales correctly inside the container */
.ewd-uwp-single-product-main-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Change the background colour of the sidebar to WA teal */
.ewd-upcp-catalog-sidebar {
    background-color: var(--wp--preset--color--custom-wa-teal);
    border-radius: 10px;
    color: var(--wp--preset--color--custom-white);
    padding: 1rem;
}

/* Hide the sidebar */
.ewd-upcp-catalog-sidebar {
    display: none !important;
}

/* Hide the catalog view options */
.ewd-upcp-catalog-header-bar {
    display: none !important;
}

/* Make thumbnail catalog view full width */
.ewd-upcp-catalog-display {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;   /* for the flex row */
  margin: 0 !important;
  padding: 0;                  /* optional: remove extra inner padding */
}

/* Stack each custom field on its own line */
.ewd-upcp-catalog-product-custom-field {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  border: 0 !important;         /* removes the vertical pipe/right border */
  float: none !important;       /* kill any floats that keep them inline */
}

/* Hide the first label only (if it's always 'Attention') */
.ewd-upcp-catalog-product-custom-field:first-of-type span {
  display: none !important;
}

/* Style that field as subtitle */
.ewd-upcp-catalog-product-custom-field:first-of-type {
  font-size: 1.2em !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin-top: 0.3em !important;
}

/* Make the description content the same width as the rest of the page */

/* Adjust this to your actual thumbnail-rail width (thumb + gap). 
   From your screenshots it's ~150px. */
:root { --upcp-thumb-rail: 0px; }

@media (min-width: 782px) {
  /* Make the UPCP description start at the true content edge */
  .ewd-upcp-single-product-description,
  .ewd-upcp-single-product-details-description {
    margin-left: calc(var(--upcp-thumb-rail) * -1) !important;
    width: calc(100% + var(--upcp-thumb-rail)) !important;
    max-width: none !important;
  }
}

/* On mobile the thumbnails stack, so no offset needed */
@media (max-width: 781px) {
  .ewd-upcp-single-product-description,
  .ewd-upcp-single-product-details-description {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* MOBILE layout */
@media (max-width: 781px) {

  /* Gallery wrapper becomes a vertical stack */
  .ewd-upcp-single-product-images-div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }

  /* MAIN IMAGE first, full content width */
  .ewd-upcp-single-product-main-image,
  .ewd-uwp-single-product-main-image {          /* fallback alias */
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ewd-upcp-single-product-main-image img,
  .ewd-uwp-single-product-main-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    object-fit: contain;
  }

  /* THUMBNAILS below the main image, horizontal strip */
  .ewd-upcp-single-product-thumbnails {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 4px 0;
    margin: 0;                     /* no unexpected top margin */
  }
  .ewd-upcp-single-product-thumbnails .ewd-upcp-thumbnail-anchor {
    flex: 0 0 84px;
    margin: 0 !important;          /* remove desktop bottom margin */
  }
  .ewd-upcp-single-product-thumbnails .ewd-upcp-single-product-thumbnail {
    width: 84px;
    height: 84px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }
}

/* NEW DESKTOP */

/* DESKTOP: let the main image use all available width */
@media (min-width: 782px) {
  /* The container around the big image */
  .ewd-upcp-single-product-main-image,
  .ewd-uwp-single-product-main-image {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    display: block !important;      /* avoid flex centering effects */
    align-items: stretch !important; /* neutralize any flex parents */
  }

  /* The image itself should drive the height and fill the width */
  .ewd-upcp-single-product-main-image img,
  .ewd-uwp-single-product-main-image img,
  .ewd-upcp-product-image,
  .ewd-uwp-product-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;            /* keep correct proportions */
    display: block;
  }
}

/* PDF EMBED */

.wp-block-file a.wp-block-file__button,
.wp-block-file a:not(.wp-block-file__button) {
  display: none !important;
}

.ewd-upcp-sidebar-toggle {
  display: none !important;
}