/* ===== Page titles (big H1 with highlight) ===== */
.titlebar-col.col-xs-12 h1{
  font-family:'Poppins',sans-serif;
  font-size:64px;
  font-weight:500;
  line-height:1.2;
  color:#000;
  position:relative;
  z-index:1;
  margin:10px 0;
}
.titlebar-col.col-xs-12 h1::after{
  content:'';
  position:absolute;
  left:0; bottom:-20px;
  width:100%; height:20px;
  background:#F1D59C;
  z-index:-1;
}

/* ===== Typographic smoothing & hyphenation (DE/EN) ===== */
html[lang="de"], html[lang="en"]{
  font-variant-ligatures:normal;
  font-kerning:normal;
  font-feature-settings:"liga" 1,"kern" 1,"calt" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Headings & titles */
h1,h2,h3,h4,h5,h6,
.entry-title,.page-title,
.product_title,.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.elementor-heading-title{
  -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;
  overflow-wrap:break-word; word-break:normal;
  letter-spacing:.01em;
}

/* Body text blocks */
.entry-content,.page-content,
.woocommerce-product-details__short-description,
.woocommerce-product-details__description,
.woocommerce-Tabs-panel,
.elementor-widget-text-editor, p{
  -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto;
  overflow-wrap:break-word; word-break:normal;
}

/* Responsive H1 */
@media (max-width:768px){
  .titlebar-col.col-xs-12 h1{ font-size:36px; line-height:1.25; }
}
@media (max-width:480px){
  .titlebar-col.col-xs-12 h1{ font-size:30px; line-height:1.3; }
}

/* ===== Event / course headings centered ===== */
.event-card,
.event-card .event-title,
.event-card .event-meta,
.event-listing,
.event-listing .event-title,
.event_listing .listing-title,
.event_listing .listing-title a,
.wpem-event-title,
.wpem-event-title a,
.event_title{
  text-align:center;
  justify-content:center;
  align-items:center;
  word-break:break-word;
  overflow-wrap:break-word;
  -webkit-hyphens:auto; hyphens:auto;
}

/* UE list container ko center context do */
.ue_container_list{ text-align:center; }

/* ===== Feature / bullet list: icon beside centered text ===== */
/* is container par class lagni chahiye: training-card-features */
.training-card-features{
  text-align:center;
  margin:16px 0;
  padding:0;
}

/* row center + icon left, text right — sab centered overall */
.training-card-features .ue_list_row{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:10px !important;
  margin:0 auto 16px !important;
  width:auto !important;
}

/* icon */
.training-card-features .ue_list_row_icon{
  flex:0 0 auto;
  line-height:1;
  margin:0 !important;
}

/* text (multi-line bhi center) */
.training-card-features .ue_list_row_text{
  text-align:center !important;
  line-height:1.5;
  width:auto !important;
}

/* plugin spacer off */
.training-card-features .ue_list_row_spacing{
  display:none !important;
}

/* ===== SHOP / CATEGORY GRID CARD TITLES ===== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title{
  font-size: clamp(18px, 1.8vw, 20px);
  line-height: 1.3;
  font-weight: 600;
  margin: .25rem 0 .5rem;
  word-break: normal;
  hyphens: auto;
}

/* ===== SINGLE PRODUCT PAGE TITLE - CLIENT FIX ===== */
/* Match Terms & Conditions page title size (64px) with highlight */
.single-product .product_title{
  font-family: 'Poppins', sans-serif !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #000;
  position: relative;
  z-index: 1;
  margin: 10px 0;
}

/* Highlight stripe - matched to H1 style */
.single-product .product_title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 20px;
  background: #F1D59C;
  z-index: -1;
}

/* Responsive Product Title */
@media (max-width:768px){
  .single-product .product_title{
    font-size: 36px !important;
    line-height: 1.25 !important;
  }
  .single-product .product_title::after{
    height: 14px;
    bottom: -16px;
  }
}

@media (max-width:480px){
  .single-product .product_title{
    font-size: 30px !important;
    line-height: 1.3 !important;
  }
  .single-product .product_title::after{
    height: 12px;
    bottom: -12px;
  }
}

/* ===== STOCK DISPLAY CONTROL - MOBILE FIX ===== */
/* CLIENT FIX: Hide "vorrätig" everywhere including mobile checkout */
.woocommerce .stock,
.woocommerce div.product .stock,
.woocommerce-cart .stock,
.woocommerce-checkout .stock,
.woocommerce-checkout .in-stock,
.woocommerce-checkout .out-of-stock,
tr.cart_item td.product-quantity .stock,
.woocommerce-checkout-review-order-table .stock,
.woocommerce-mini-cart .stock,
.cart_item .stock,
.product-quantity .stock,
span.stock,
span.in-stock,
span.out-of-stock,
p.stock,
.stock.in-stock,
.stock.out-of-stock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Mobile specific - aggressive hiding for checkout */
@media (max-width: 768px) {
  body .woocommerce .stock,
  body .cart_item .stock,
  body .product-quantity .stock,
  body .woocommerce-checkout .stock,
  body td.product-quantity .stock,
  body .woocommerce-cart-form .stock,
  body * .stock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

/* Show stock ONLY on single product page in availability section */
.single-product .availability .stock,
.single-product .product-meta .stock,
.single-product .woocommerce-variation-availability .stock,
.single-product .woocommerce-variation-availability span,
.single-product #andrea-availability .stock,
.single-product #andrea-availability span,
.single-product .availability_status .stock,
.single-product .availability_status span {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    margin: initial !important;
    padding: initial !important;
    width: auto !important;
    position: static !important;
    left: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* ===== ICON & TEXT ALIGNMENT - MOBILE ONLY FIX ===== */
/* CLIENT FIX: Pin icon too far from text on mobile - Desktop unchanged */

/* Mobile specific icon-text spacing fix - ONLY MOBILE */
@media (max-width: 768px) {
  .ue_list_row,
  .training-card-features .ue_list_row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 10px !important;
    margin: 0 auto 12px !important;
  }
  
  .ue_list_row_icon,
  .training-card-features .ue_list_row_icon {
    flex: 0 0 auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .ue_list_row_icon svg,
  .ue_list_row_icon img,
  .ue_list_row_icon i {
    width: 1em !important;
    height: 1em !important;
    font-size: 16px !important;
  }
  
  .ue_list_row_text,
  .training-card-features .ue_list_row_text {
    flex: 1 1 auto !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .ue_list_row {
    gap: 5px !important;
    padding: 0 5px !important;
  }
  
  .ue_list_row_text {
    font-size: 13px !important;
  }
}

/* ===== EVENT DATE DISPLAY - CLIENT FIX ===== */
/* Equal font size for date number and month name */
@media (max-width: 768px) {
  .course-date,
  .event__date,
  .course-top-date,
  .badge-date,
  .date-box,
  .course-date *,
  .event__date *,
  .course-top-date *,
  .badge-date *,
  .date-box * {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    padding: 3px 6px !important;
    max-width: none !important;
  }
}
/* Private Course Subheading Professional Styling */
.private-subheading-section {
    margin: 25px 0 35px 0;
}

.private-subheading-section h3 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 15px 0 !important;
    color: #333 !important;
}

.private-subheading-section p {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    margin: 0 0 15px 0 !important;
    color: #555 !important;
}

.private-subheading-section a {
    display: inline-block;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #007bff !important;
    text-decoration: underline !important;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.private-subheading-section a:hover {
    color: #0056b3 !important;
}

/* Mobile Responsive - CRITICAL */
@media (max-width: 768px) {
    .private-subheading-section {
        display: block !important;
        visibility: visible !important;
        margin: 15px 0 25px 0;
    }
    
    .private-subheading-section h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .private-subheading-section p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    
    .private-subheading-section a {
        font-size: 16px !important;
        display: block !important;
        margin-top: 12px;
    }
}
@media (max-width: 480px) {
  .course-date,
  .event__date,
  .course-top-date,
  .badge-date,
  .date-box,
  .course-date *,
  .event__date *,
  .course-top-date *,
  .badge-date *,
  .date-box * {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

/* Title + Subheading as one visual unit */
.elementor-widget-woocommerce-product-title {
    margin-bottom: 25px;
}

.elementor-widget-woocommerce-product-title .elementor-heading-title {
    display: flex;
    flex-direction: column;
    border-bottom: 3px solid #f5a623;
    padding-bottom: 15px;
}

.elementor-widget-woocommerce-product-title .elementor-heading-title::after {
    content: 'als Einzelkurs';
    font-size: 18px;
    font-weight: 400;
    color: #666;
    margin-top: 8px;
    font-style: italic;
}

@media (max-width: 768px) {
    .elementor-widget-woocommerce-product-title .elementor-heading-title::after {
        font-size: 16px;
    }
}
```

---

### **Option B: Stack Layout with Better Spacing**

**HTML Structure (Elementor):**
```
Section: Product Info
└── Column
    ├── Product Title Widget
    │   Settings:
    │   - Border Bottom: 3px solid #f5a623
    │   - Margin Bottom: 8px
    │
    ├── Text Editor Widget (als Einzelkurs)
    │   Settings:
    │   - Margin Top: 0
    │   - Padding Top: 8px
    │   - Font: 18px, italic
    │
    ├── Product Price
    └── Add to Cart
```

---

# **🚀 IMPLEMENTATION STEPS:**

## **STEP 1: Remove Redundant Text (5 mins)**
```
1. ✅ Elementor → Edit "Individual Courses" template
2. ✅ Find text widget with "(Individual / Private Course)"
3. ✅ DELETE this text
4. ✅ Keep only "als Einzelkurs" (or client's German text)
5. ✅ Update template
```

---

## **STEP 2: Fix Mobile CSS (5 mins)**
```
1. ✅ WordPress → Appearance → Customize → Additional CSS
2. ✅ Add/replace with updated CSS (Fix #2 wala)
3. ✅ Publish
4. ✅ Test mobile view (Chrome DevTools)
```

---

## **STEP 3: Improve Integration (10 mins)**
```
1. ✅ Apply seamless integration CSS (Fix #3 wala)
2. ✅ Adjust title border-bottom
3. ✅ Remove gaps between title and subheading
4. ✅ Test visual flow
```

---

## **STEP 4: Mobile Verification (5 mins)**
```
1. ✅ Chrome DevTools → Mobile (375px)
2. ✅ Check: "als Einzelkurs" visible?
3. ✅ Check: Proper spacing?
4. ✅ Check: Seamless with title?
5. ✅ Screenshot for client

📝 COMPLETE CSS CODE (Copy-Paste Ready):
css/* ========================================
   PRIVATE COURSE SUBHEADING - UPDATED FIX
   ======================================== */

/* Product Title with Bottom Border */
.single-product .product_title,
.elementor-widget-woocommerce-product-title .elementor-heading-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 8px !important;
    border-bottom: 3px solid #f5a623;
}

/* Subheading - Seamless Integration */
.elementor-widget-woocommerce-product-title + .elementor-widget-text-editor {
    margin-top: 0 !important;
    padding-top: 8px;
}

.elementor-widget-woocommerce-product-title + .elementor-widget-text-editor p {
    font-size: 18px;
    line-height: 1.5;
    color: #666;
    font-weight: 400;
    margin: 0 0 20px 0;
    font-style: italic;
}

/* MOBILE - CRITICAL FIX */
@media screen and (max-width: 768px) {
    /* Title */
    .single-product .product_title,
    .elementor-widget-woocommerce-product-title .elementor-heading-title {
        padding-bottom: 10px;
        margin-bottom: 6px !important;
        border-bottom: 2px solid #f5a623;
        font-size: 24px;
    }
    
    /* Subheading Container - Force Display */
    .elementor-widget-woocommerce-product-title + .elementor-widget-text-editor {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding-top: 6px;
        margin-top: 0 !important;
    }
    
    /* Subheading Text - Force Visibility */
    .elementor-widget-woocommerce-product-title + .elementor-widget-text-editor p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 0 0 15px 0 !important;
        color: #666 !important;
        font-weight: 400 !important;
        font-style: italic !important;
    }
}

/* Tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .elementor-widget-woocommerce-product-title + .elementor-widget-text-editor p {
        font-size: 17px;
    }
}
```
/* ===== MOBILE PRICE POSITION FIX ===== */
/* Move price to top of product details on mobile — match desktop hierarchy */
@media (max-width: 768px) {
    .summary.entry-summary {
        display: flex;
        flex-direction: column;
    }
    /* Price moves to top */
    .summary.entry-summary .price,
    .summary.entry-summary .woocommerce-variation-price {
        order: -1;
    }
}