/* ==========================================================
   ORIGINAL SITE RULES — these existed before this project,
   keep them here.
   ========================================================== */
.tutor-course-card-footer .enrolled-times,
.tutor-course-card-footer .tutor-course-enrolled-user {
    display: none !important;
}
.woocommerce-tabs {
    display: none !important;
}

/* ==========================================================
   ADVANCED AESTHETICS & SKIN ACADEMY — SITE STYLE OVERRIDE
   Paste this into: Appearance > Customize > Additional CSS
   ========================================================== */

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --aa-ink:#4A4A4A;
  --aa-ink-soft:#5B5B5B;
  --aa-white:#FFFFFF;
  --aa-card:#FAFAFA;
  --aa-grey:#A6A6A6;
  --aa-grey-deep:#8C8C8C;
  --aa-muted:#7A7A7A;
  --aa-line:#D9D9D9;
}

/* 2. BASE COLOUR + TYPE */
body{
  background-color: var(--aa-white) !important;
  color: var(--aa-ink) !important;
  font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3,
.elementor-heading-title{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  color: var(--aa-ink) !important;
}

.elementor-widget-text-editor p{
  color: var(--aa-ink-soft);
}

/* 3. BUTTONS */
.elementor-button,
button.elementor-button,
a.elementor-button,
.woocommerce a.button,
.woocommerce button.button{
  background-color: var(--aa-ink) !important;
  color: var(--aa-white) !important;
  border-radius: 0px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem !important;
  padding: 15px 30px !important;
  border: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background-color: var(--aa-grey-deep) !important;
  transform: translateY(-1px);
  color: var(--aa-white) !important;
}

/* secondary/outline buttons — add class "aa-btn-ghost" in Elementor's Advanced > CSS Classes */
.aa-btn-ghost .elementor-button{
  background: transparent !important;
  border: 1px solid var(--aa-line) !important;
  color: var(--aa-ink) !important;
}
.aa-btn-ghost .elementor-button:hover{
  background: var(--aa-ink) !important;
  color: var(--aa-white) !important;
}

/* 4. COURSE / TUTORLMS CARDS */
.tutor-course-card,
.woocommerce ul.products li.product,
.elementor-posts--skin-cards .elementor-post__card{
  background: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

/* 5. SECTION SPACING */
.elementor-section{
  padding-top: 4vw;
  padding-bottom: 4vw;
}

/* 6. LABELS/EYEBROWS — add class "aa-label" to any Elementor text widget for
      course codes, "CPD", "ProQual Level X" etc. */
.aa-label{
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-grey-deep) !important;
}

/* 7. HAIRLINE RULE — the brand's signature divider, add class "aa-rule" to a
      spacer/divider widget to reuse it as a section break */
.aa-rule{
  width: 64px;
  height: 1px;
  background: var(--aa-ink) !important;
}

/* 8. LINKS */
.elementor-widget-text-editor a{
  color: var(--aa-ink);
  border-bottom: 1px solid var(--aa-ink);
  text-decoration: none;
}

/* ==========================================================
   TRAINING COURSE ARCHIVE / SHOP GRID — WooCommerce restyle
   ========================================================== */

.woocommerce ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product{
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.woocommerce ul.products li.product img{
  border-radius: 0 !important;
  border: 1px solid var(--aa-line) !important;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 16px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  color: var(--aa-ink) !important;
  margin: 0 0 6px !important;
}
.woocommerce ul.products li.product .price{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-muted) !important;
  font-size: 0.92rem !important;
}
.woocommerce ul.products li.product .price ins{
  text-decoration: none;
  color: var(--aa-ink) !important;
}
.woocommerce ul.products li.product .star-rating{
  display: none !important; /* remove default yellow star rating to keep it monochrome */
}
.woocommerce ul.products li.product .button{
  margin-top: 14px !important;
  width: auto !important;
}
.woocommerce span.onsale{
  background: var(--aa-ink) !important;
  color: var(--aa-white) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 6px 12px !important;
  line-height: 1 !important;
  top: 12px !important;
  left: 12px !important;
}

@media (max-width: 900px){
  .woocommerce ul.products{grid-template-columns: repeat(2, 1fr) !important;}
}
@media (max-width: 600px){
  .woocommerce ul.products{grid-template-columns: 1fr !important;}
}

/* ==========================================================
   TRAINING COURSE ARCHIVE — TutorLMS restyle
   (TutorLMS renders courses with its own classes, separate
   from the WooCommerce grid CSS above. Both are included so
   whichever one actually powers your archive page is covered.)
   ========================================================== */

.tutor-grid,
.tutor-course-list{
  display: grid !important;
  gap: 32px !important;
}
.tutor-grid-3{grid-template-columns: repeat(3, 1fr) !important;}
.tutor-grid-2{grid-template-columns: repeat(2, 1fr) !important;}

.tutor-card,
.tutor-course-card{
  background: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.tutor-card img,
.tutor-course-card img{
  border-radius: 0 !important;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.tutor-card-body{padding: 20px !important;}
.tutor-course-name,
.tutor-course-name a{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.1rem !important;
  color: var(--aa-ink) !important;
}
.tutor-course-price,
.tutor-meta-item{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-muted) !important;
  font-size: 0.9rem !important;
}
.tutor-ratings-stars,
.tutor-star-rating{
  display: none !important; /* keep it monochrome, matches the WooCommerce grid choice above */
}
.tutor-course-card .tutor-btn,
.tutor-course-card .tutor-course-loop-cart-btn a{
  background: var(--aa-ink) !important;
  color: var(--aa-white) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none !important;
}
.tutor-course-card .tutor-btn:hover{
  background: var(--aa-grey-deep) !important;
}

/* Optional: hide TutorLMS's default archive hero banner/filters if you'd
   rather use your own page header instead (uncomment to enable) */
/*
.courses-archive-hero-section{ display: none; }
.tutor-course-archive-filters-wrap{ display: none; }
*/

@media (max-width: 900px){
  .tutor-grid-3, .tutor-grid-2{grid-template-columns: repeat(2, 1fr) !important;}
}
@media (max-width: 600px){
  .tutor-grid-3, .tutor-grid-2{grid-template-columns: 1fr !important;}
}

/* ==========================================================
   SINGLE COURSE PAGE — TutorLMS restyle
   (Restyles the automatically-generated course detail page:
   title, price/enrol area, tabs, sidebar. Structure, pricing,
   curriculum and enrolment stay fully functional, only the
   look changes.)
   ========================================================== */

.tutor-course-details-page{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-ink) !important;
}
.tutor-course-details-page h1,
.tutor-course-details-page h2,
.tutor-course-details-page h3,
.tutor-course-top-info .tutor-course-title{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  color: var(--aa-ink) !important;
}

/* Price / enrol sidebar box */
.tutor-single-course-sidebar{
  background: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tutor-single-course-sidebar .tutor-course-price,
.tutor-single-course-sidebar .price{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: var(--aa-ink) !important;
}
.tutor-single-course-sidebar .tutor-btn,
.tutor-single-course-sidebar .tutor-course-add-to-cart button,
.tutor-single-course-sidebar a.button{
  background: var(--aa-ink) !important;
  color: var(--aa-white) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none !important;
}
.tutor-single-course-sidebar .tutor-btn:hover{
  background: var(--aa-grey-deep) !important;
}

/* Curriculum / tab navigation (Overview, Curriculum, Reviews, etc.) */
.tutor-tab-item{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-muted) !important;
}
.tutor-tab-item.is-active{
  color: var(--aa-ink) !important;
  border-color: var(--aa-ink) !important;
}

/* Remove default star ratings again for consistency with the rest of the site */
.tutor-course-details-page .tutor-ratings-stars,
.tutor-course-details-page .tutor-star-rating{
  display: none !important;
}

/* Course thumbnail/banner image */
.tutor-course-top-info img{
  border-radius: 0 !important;
  border: 1px solid var(--aa-line) !important;
}

/* ==========================================================
   WOOCOMMERCE PRODUCT PAGE — restyle (also affects the
   [product_page] shortcode embedded on course pages like
   B12 and Level 5 & 6, since it renders the same markup)
   ========================================================== */

.woocommerce div.product{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-ink) !important;
}
.woocommerce div.product .product_title,
.woocommerce div.product h1,
.woocommerce div.product h2{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  color: var(--aa-ink) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price,
p.price,
.woocommerce-Price-amount{
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--aa-ink) !important;
}

/* Add to cart button, quantity box */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  background: var(--aa-ink) !important;
  color: var(--aa-white) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none !important;
  padding: 15px 30px !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover{
  background: var(--aa-grey-deep) !important;
}
.woocommerce div.product .quantity input.qty{
  border: 1px solid var(--aa-line) !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Product gallery image */
.woocommerce div.product div.images img{
  border-radius: 0 !important;
  border: 1px solid var(--aa-line) !important;
}

/* WAPF (Advanced Product Fields) — the actual plugin powering the
   add-on checkboxes, confirmed via Inspect */
.wapf-fields-wrapper,
.wapf-checkboxes{
  border: 1px solid var(--aa-line) !important;
  background: var(--aa-card) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}
.wapf-field-title,
.wapf-block-title,
.wapf-label{
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--aa-ink) !important;
}
.wapf-checkable{
  padding: 8px 0 !important;
}
.wapf-input-label,
.wapf-label-text{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-ink) !important;
}
.wapf-checkable input[type="checkbox"]{
  accent-color: var(--aa-ink);
}
.wapf-description,
.wapf-field-description{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-muted) !important;
  font-size: 0.85rem !important;
}

/* Remove default star ratings again, keeping things monochrome */
.woocommerce div.product .woocommerce-product-rating,
.woocommerce div.product .star-rating{
  display: none !important;
}

/* ==========================================================
   SEARCH RESULTS PAGE — restyle
   ========================================================== */

.search-results article,
main .search .post,
article.type-post,
article.type-courses{
  padding-bottom: 32px !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid var(--aa-line) !important;
}
.search-results article img,
main .search .post img{
  max-width: 100% !important;
  max-height: 300px !important;
  width: auto !important;
  object-fit: cover !important;
  border: 1px solid var(--aa-line) !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 16px 0 !important;
}
.search-results h1,
.search-results .page-title{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  color: var(--aa-ink) !important;
}
.search-results article h2,
.search-results article .entry-title{
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
  font-size: 1.2rem !important;
}
.search-results article h2 a,
.search-results article .entry-title a{
  color: var(--aa-ink) !important;
  text-decoration: none !important;
}
.search-results article p{
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aa-muted) !important;
}

/* ==========================================================
   HEADER WIDTH FIX — forces the HTML widget holding the nav
   to stretch to full width, since Elementor's own Width/Grow
   setting wasn't taking effect through the panel.
   ========================================================== */

.elementor-element-d424a85{
  width: 100% !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* ==========================================================
   BOXED CONTAINER WIDTH FIX — Elementor's own "boxed" wrapper
   class, confirmed via Inspect to be stuck at a fixed width
   instead of spanning full page width and centring its
   content within that limit. This targets the pattern
   globally, not just the header.
   ========================================================== */

.e-con.e-con-boxed{
  width: 100% !important;
  max-width: 100% !important;
}