/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme. Managed with professional refactoring pipeline.
Template: betheme
Version: 1.6.2
*/

/* ==========================================================================
   1. Global settings and variables
   ========================================================================== */

:root {
  /* System Defaults */
  --primary-color: #0073aa;
  --success-color: #46b450;
  --danger-color: #dc3232;
  --border-radius: 8px;
  --transition-speed: 0.3s;

  /* Brand Colors & UI States */
  --brand-color: #dd3333;
  --brand-color-hover: #b91c1c;
  --brand-shadow: rgba(221, 51, 51, 0.25);
  --input-border: #cbd5e1;
  --input-bg: #f8fafc;
  --text-dark: #1e293b;
}

/* --- Global Resets --- */
#Footer .footer_copy {
  border-top: 1px solid #c0c0c0;
}

.header-classic #Top_bar:not(.is-sticky) {
  background-color: transparent !important; /* Необхідно для ядра BeTheme */
}

/* ==========================================================================
   2. PLUGINS OVERRIDES
   ========================================================================== */

/* --- 2.1. YourChannel (YouTube Gallery) UI/UX --- */
.yrc-shell {
  
  .yrc-brand {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: auto !important;
    margin-bottom: 30px !important;
    padding: 25px 30px !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05) !important;

  }

  /* Reset forced absolute tracking positions */
  :is(.yrc-name, .yrc-stats).pb-absolute {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  .yrc-name {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;

    img {
      width: 75px !important;
      height: 75px !important;
      object-fit: cover !important;
      border: 3px solid #ff0000 !important;
      border-radius: 50% !important;
      box-shadow: 0 4px 15px rgba(255, 0, 0, 0.15) !important;
    }

    a {
      display: inline-flex !important;
      align-items: center !important;
      gap: 12px !important;
      color: var(--text-dark) !important;
      font-family: system-ui, -apple-system, sans-serif !important;
      font-size: 24px !important;
      font-weight: 700 !important;
      text-decoration: none !important;
      transition: color var(--transition-speed) ease !important;

      &:hover {
        color: #ff0000 !important;
        &::after { background-color: #cc0000; }
      }

      /* Custom platform badge text */
      &::after {
        content: 'YouTube';
        padding: 4px 10px;
        background-color: #ff0000;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 8px;
        transition: background-color var(--transition-speed) ease;
      }
    }
  }

  .yrc-stats {
    display: flex !important;
    gap: 20px !important;
    padding: 12px 24px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;

    span.pb-block {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      color: #475569 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
    }
  }

  .yrc-menu-items {
    display: flex !important;
    gap: 32px !important;
    margin-bottom: 30px !important;
    border-bottom: 2px solid #e2e8f0 !important;
  }

  .yrc-menu-item {
    padding: 0 0 12px 0 !important;
    color: #64748b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-bottom: 3px solid transparent !important;
    transition: all var(--transition-speed) ease !important;
    white-space: nowrap !important; /* Унеможливлює розрив тексту кнопок меню на мобілках */

    &:is(.yrc-active, :hover) {
      color: #d51a1a !important;
      border-bottom-color: #ff0000 !important;
    }
  }

  /* Grid для відео та плейлистів */
  :is(.yrc-core, .yrc-item-list) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  :is(.yrc-item, .yrc-playlist-item) {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease !important;

    &:hover {
      transform: translateY(-8px) !important;
      
      :is(.yrc-thumb img, .yrc-video-thumb) {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
      }
    }
  }

  :is(.yrc-item-title, .yrc-title) {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-top: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  :is(.yrc-thumb img, .yrc-video-thumb) {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  }
}

/* --- 2.2. Floatton & Contact Form 7 Isolation --- */
html body {
  
  /* Container and trigger button targeting inline JS styles */
  .floatton-container[style] {
    left: 20px !important;
    right: auto !important;
    bottom: 85px !important;
    border-radius: 16px !important;
    box-shadow: 0px 12px 35px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 25px !important;
    background: #ffffff !important;

    /* CF7 inputs fields */
    .wpcf7-form-control:not([type="submit"]) {
      width: 100% !important;
      height: 46px !important;
      border: 2px solid var(--input-border) !important;
      border-radius: var(--border-radius) !important;
      padding: 0 14px !important;
      font-size: 16px !important; /* Mobile UX: 16px запобігає авто-зуму на iOS Safari */
      color: var(--text-dark) !important;
      background-color: var(--input-bg) !important;
      display: block !important;
      margin-top: 5px !important;
      margin-bottom: 15px !important;
      box-sizing: border-box !important;
      transition: border-color var(--transition-speed) ease-in-out, box-shadow var(--transition-speed) ease-in-out, background-color var(--transition-speed) ease-in-out;

      &:focus {
        border-color: var(--brand-color) !important;
        box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.15) !important;
        background-color: #ffffff !important;
        outline: none !important;
      }
    }

    .wpcf7-form label {
      font-size: 13px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
      color: var(--text-dark) !important;
      display: block !important;
      margin-bottom: 4px !important;
    }

    .wpcf7-submit {
      width: 100% !important;
      height: 50px !important;
      background-color: var(--brand-color) !important;
      color: #ffffff !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      border: none !important;
      border-radius: var(--border-radius) !important;
      cursor: pointer !important;
      box-shadow: 0px 4px 12px var(--brand-shadow) !important;
      margin-top: 10px !important;
      transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;

      &:hover {
        background-color: var(--brand-color-hover) !important;
      }
      &:active {
        transform: scale(0.98) !important;
      }
    }
  }

  button.floatton-btn[style] {
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    border-radius: 50% !important;
    box-shadow: 0px 5px 15px rgba(221, 51, 51, 0.4) !important;
  }
}

/* --- 2.3. YITH WooCommerce Plugins Overrides --- */

.sidebar .widget.yith-woocommerce-ajax-product-filter ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;

  li {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #f4f4f5 !important;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    width: auto !important;
    flex: 0 0 auto !important;
    float: none !important;
    clear: none !important;

    a {
      color: #475569 !important;
      text-decoration: none !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      display: inline-block !important;
      white-space: nowrap !important;
    }

    small.count {
      background: #e4e4e7 !important;
      color: #71717a !important;
      border-radius: 50% !important;
      min-width: 20px;
      height: 20px;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 11px !important;
      margin-left: 8px !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
    }

    /* Combined Hover and Active (Chosen) states */
    &:is(:hover, .chosen) {
      background: #0056b3 !important;
      border-color: #0056b3 !important;

      a {
        color: #ffffff !important;
      }
    }

    /* Specific hover transformation */
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 86, 179, 0.12) !important;
      
      small.count {
        background: #0056b3 !important; /* Fallback/Specific color if needed, but white looks better */
        color: #ffffff !important;
      }
    }

    /* Specific active state adjustments */
    &.chosen small.count {
      background: rgba(255, 255, 255, 0.2) !important;
      color: #ffffff !important;
    }
  }
}

/* ==========================================================================
   3. CUSTOM COMPONENTS AND LAYOUTS
   ========================================================================== */

/* --- 3.1. Blog Cards Redesign --- */

.blog_wrapper .posts_group {
  
  .post {
    background: #fff;
    border-radius: 12px !important; /* Keeping important due to WPBakery/Theme potential overrides */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-7px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;

      .image_wrapper img {
        transform: scale(1.05);
      }
    }
  }

  .post-desc_wrapper {
    padding: 25px 20px !important;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .post-title {
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px;
  }

  .post-excerpt {
    color: #475569 !important;
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 20px !important;
    flex-grow: 1;
  }

  .image_wrapper {
    
    img {
      transition: transform 0.5s ease;
      width: 100%;
      display: block;
    }

    /* Hide theme default masks and links gracefully */
    :is(.mask, .image_links, a::before, a::after) {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
  }

  .image_frame {
    border: none !important;
    padding: 0 !important;
  }

  .post-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: auto !important;

    /* Hide redundant icons */
    :is(.icon-doc-text, .post-links i) {
      display: none !important;
    }

    .post-more {
      background-color: #0284c7 !important;
      color: #ffffff !important;
      padding: 8px 20px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2) !important;

      &:hover {
        background-color: #0369a1 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(2, 132, 199, 0.3) !important;
      }
    }
  }

  .button-love {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;

    a {
      color: inherit !important;
      text-decoration: none !important;
    }

    .label {
      display: none !important;
    }

    &:is(:hover, .loved) {
      color: #ef4444 !important;
    }
  }
}

/* --- 3.2. Blog General Layouts & Filters --- */

.section-filters {
  display: none !important;
}

/* --- 3.3. Single Post Redesign --- */

.single-post {
  
  /* Hide sidebar and stretch content */
  .sidebar,
  .share_wrapper,
  .post-nav.minimal {
    display: none !important;
  }

  .sections_group {
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
  }

  #Subheader {
    padding: 40px 0 20px 0 !important;
    background: none !important;
    min-height: auto !important;

    .title {
      color: var(--text-dark) !important;
      font-size: 36px !important;
      font-weight: 700 !important;
      text-shadow: none !important;
      text-align: center !important;
      margin-bottom: 0 !important;
    }
  }

  .single-photo-wrapper {
    text-align: center !important;
    margin: 0 auto 40px auto !important;
    max-width: 900px !important;

    img {
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
      width: 100% !important;
      height: auto !important;
    }

    /* Remove overlay and zoom icon on hover */
    :is(.mask, .image_links) {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
    }
  }

  .post-wrapper-content {
    max-width: 800px !important;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
  }
}

/* ==========================================================================
   04. LAYOUT & GRID SYSTEM
   ========================================================================== */

/* Об'єднана сітка для карток (Обладнання та Промо) */
:is(.med-equipment-grid, .med-promo-grid) {
  display: grid !important; /* Переходимо з Flexbox на сучасний Grid */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important; /* Адаптивність без медіа-запитів */
  gap: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 60px !important;
  align-items: stretch !important;

  /* Remove framework redundant empty paragraphs and breaks from flow */
  > :is(p, br) {
    display: none !important;
  }
}

/* ==========================================================================
   05. HEADER & TOP BAR
   ========================================================================== */

/* --- 05.1. Header Social Bar & Layout Fixes --- */
.med-header-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 18px !important; /* Уніфіковано та зведено в одне правило */

  .med-social-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    svg {
      pointer-events: none;
      fill: #fff !important;
    }

    /* Соціальні мережі - об'єднання стилів */
    &.inst {
      background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    }

    &.fb {
      background: #1877f2;
    }

    &.tt {
      /* Дубльовані декларації видалено, залишено фінальний чистий градієнт */
      background: linear-gradient(135deg, #25F4EE 0%, #000 45%, #FE2C55 100%);
    }

    &:hover {
      transform: translateY(-2px) scale(1.1);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
      color: #fff;
    }
  }
}

/* Вирівнювання правої частини Top Bar в BeTheme */
.top_bar_right_wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;

  > :is(a#header_cart, .med-header-social) {
    float: none !important; /* Відмовляємося від застарілих флоатів теми на користь флексу */
  }
}

/* --- 05.2. SVG Header Cart Customization --- */
#Top_bar #header_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  i.icon-bag-fine::before {
    content: "" !important;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-top: -4px;
  }

  span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 1;
    border-radius: 50% ;
    margin-left: 4px;
  }
}

/* ==========================================================================
   06. NAVIGATION & MENUS
   ========================================================================== */

/* --- 06.1. Main Navigation Menu Links --- */
#Top_bar #menu > ul {
  margin: 0 !important;
  padding: 0 !important;

  > li {
    margin: 0 !important;
    padding: 0 !important;

    > a {
      position: relative;
      padding: 18px 14px !important;
      font-weight: 600 !important;
      font-size: 16px !important;
      color: #334155 !important;
      transition: color var(--transition-speed) ease !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;

      &::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2.5px;
        background-color: #1976d2;
        border-radius: 2px;
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 0;
      }
    }

    /* Об'єднаний стан для активних елементів */
    &:is(:hover, .current-menu-item, .current-menu-ancestor) > a {
      color: #1976d2 !important;

      &::after {
        width: 26px;
        opacity: 1;
      }
    }
  }
}

/* --- 06.2 & 06.3. Dropdown Menu Fixes & Hover Traps --- */
/* Mobile Safety: Загортаємо десктопну логіку ховер-пасток у медіа-запит, щоб не зламати тач-інтерфейс мобілок */
@media (min-width: 769px) {
  #Top_bar {
    
    :is(#menu ul li, .menu > li) {
      
      /* Загальні правила для підменю тем та плагінів */
      ul:is(.sub-menu, .menu_children),
      & > ul {
        top: 100% !important;
        margin-top: -15px !important; /* Уніфіковано конфліктні -22px та -15px */
        transition: all 0.25s ease-in-out !important;
        background-color: #ffffff !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        padding: 12px 0 !important;
        min-width: 250px !important;
        width: max-content !important;

        /* Невидимий міст, що запобігає падінню дропдауну */
        &::before {
          content: "" !important;
          position: absolute !important;
          top: -30px !important;
          left: 0 !important;
          right: 0 !important;
          height: 30px !important;
          background: transparent !important;
          display: block !important;
          z-index: 9999 !important;
        }

        /* Стилізація внутрішніх посилань дропдауну */
        > li > a {
          color: #334155 !important;
          font-size: 15px !important;
          font-weight: 500 !important;
          padding: 12px 25px !important;
          border-bottom: none !important;
          background-color: transparent !important;
          transition: all 0.2s ease !important;
          white-space: nowrap !important;
        }

        /* Ефекти наведення на пункти підменю */
        > li:is(:hover, .current-menu-item) > a {
          color: #0284c7 !important;
          background-color: #f0f9ff !important;
          padding-left: 30px !important;
        }
      }

      /* Стан відображення підменю при наведенні */
      &:hover > :is(ul.sub-menu, ul.menu_children, ul) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    }

    /* Шеврон батьківського пункту меню */
    .menu > li.menu-item-has-children > a:after {
      margin-left: 8px !important;
      font-size: 12px !important;
      color: inherit !important;
    }
  }
}

  /* 
    Магія CSS :has() 
    Якщо в кошику є кнопка "Оновити" БЕЗ атрибута disabled (юзер змінив кількість),
    ми "вбиваємо" клікабельність кнопки оформлення замовлення.
  */
  .woocommerce:has(button[name="update_cart"]:not([disabled])) .wc-proceed-to-checkout {
    opacity: 0.3 !important;
    pointer-events: none !important; /* Фізично блокує натискання */
    filter: grayscale(100%) !important;
    transition: opacity 0.3s ease !important;
  }

  /* 
    Додатковий UX: Підсвічуємо кнопку "Оновити кошик", щоб юзер зрозумів, 
    що саме зараз від нього вимагається.
  */
  .woocommerce:has(button[name="update_cart"]:not([disabled])) button[name="update_cart"] {
    background: #0284c7 !important; /* Робимо її яскраво-синьою або зміни на свій брендовий */
    color: #ffffff !important;
    border-color: #0284c7 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
    transition: all 0.3s ease !important;
  }

/* Ховаємо кнопку "Повернутися", якщо ми вже знаходимося в корені каталогу */
  body.post-type-archive-product .med-back-nav {
      display: none !important;
  }

/* Актуальний CSS для Call Now Button v2.0+ */

/* Правий кут та відступи */
.cnb-container {
    bottom: 20px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 999 !important; 
}

/* Ховаємо кнопкову панель ТІЛЬКИ на сторінках магазину WooCommerce */
.woocommerce-cart .cnb-container,
.woocommerce-checkout .cnb-container,
.single-product .cnb-container,
.archive.post-type-archive-product .cnb-container {
    display: none !important;
}

/* Приховуємо системні поля адреси, залишаючи їх у DOM для логіки WooCommerce та плагінів доставки */
#billing_city_field,
#billing_state_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_postcode_field,
#billing_company_field {
  display: none !important;
}

/* Повне знищення блоку доставки та тексту пункту призначення ВИКЛЮЧНО на сторінці кошика */
body.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals,
body.woocommerce-cart p.woocommerce-shipping-destination {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* ==========================================================================
   09. COMPONENTS & UI ELEMENTS (GENERAL)
   ========================================================================== */

/* --- 09.1. Image & Certificate Galleries (CSS Grid) --- */
.column_image_gallery .gallery {
  display: grid !important; /* Перебиваємо дефолтні inline-флоати Muffin галереї */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 24px;
  margin: 0;
  padding: 0;

  .gallery-item {
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100%;

    &:hover {
      .image_wrapper {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(2, 132, 199, 0.12);
        border-color: #e0f2fe;
      }
      img {
        transform: scale(1.05);
      }
    }
  }

  .image_wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f1f5f9;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img {
    border: none !important;
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* --- 09.2. Medical Photo Gallery Grid --- */
.med-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    }
  }
}

/* --- Fix WPBakery Column Heights (Щоб усі картки в ряду були однакової висоти) --- */
.med-services-grid {
  display: flex !important;
  flex-wrap: wrap;

  & > .vc_column_container {
    display: flex;
    
    & > .vc_column-inner {
      display: flex;
      flex-direction: column;
      width: 100%;

      & > .wpb_wrapper {
        height: 100%;
      }
    }
  }
}

/* --- 09.3. Service & Information Cards --- */
.med-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid #f1f5f9;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(2, 132, 199, 0.08);
    border-color: #e0f2fe;

    .med-icon-wrapper {
      transform: scale(1.08);
      background-color: #e0f2fe;
    }
  }

  h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    margin-top: 0;
  }

  p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
  }

  /* icons */
  .med-icon-wrapper {
    margin-bottom: 20px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    background-color: #f0f9ff;
    border-radius: 12px;
    transition: all 0.3s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px 26px;

    /* 1. Європейська якість (star)*/
    &.icon-quality {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
    }

    /* 2. Підбір окуляр та лінз (glasses) */
    &.icon-glasses {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='15' r='4'/%3E%3Ccircle cx='18' cy='15' r='4'/%3E%3Cpath d='M14 15a2 2 0 0 0-4 0'/%3E%3Cpath d='M2.5 13 5 7c.7-1.3 1.4-2 3-2'/%3E%3Cpath d='M21.5 13 19 7c-.7-1.3-1.4-2-3-2'/%3E%3C/svg%3E");
    }

    /* 3. Індивідуальний підхід (heart) */
    &.icon-approach {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
    }

    /* 4. Амбулаторна офтальмологія (eye) */
    &.icon-ophthalmology {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    }

    /* 5. Хірургічний супровід (defense) */
    &.icon-surgery {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10'/%3E%3Cpath d='M8 11h8'/%3E%3Cpath d='M12 7v8'/%3E%3C/svg%3E");
    }
  }

  /* accent card */
  &.med-card-featured {
    background: #f8fafc;
    border-left: 4px solid var(--primary-color, #0284c7);
  }

  .med-feature-list {
    list-style: none;
    padding-left: 0;
    margin-top: 15px;

    li {
      position: relative;
      padding-left: 24px;
      margin-bottom: 10px;
      color: #475569;

      &::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #0284c7;
        font-weight: bold;
      }
    }
  }
}

/* --- 09.4. Equipment & Promotional Cards --- */
.med-equipment-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.1);
    border-color: #0284c7;
  }

  h3 {
    color: #0284c7;
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
  }

  .med-equipment-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .med-equipment-desc {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 15px;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .med-equipment-note {
    font-size: 13.5px;
    color: #64748b;
    font-style: italic;
    background: #f8fafc;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    margin-top: auto;
    overflow-wrap: break-word;
  }

  .med-equipment-footer {
    border-top: 1px dashed #cbd5e1;
    padding-top: 20px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;

    .med-equipment-price {
      font-size: 22px;
      font-weight: 800;
      color: #1e293b;
    }

    .med-equipment-course {
      font-size: 13px;
      color: #be123c;
      font-weight: 600;
      background: #ffe4e6;
      padding: 6px 12px;
      border-radius: 20px;
    }
  }
}


.med-promo-card {
  background-color: #fff1f2;
  border-left: 5px solid #e11d48;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(225, 29, 72, 0.05);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, background-color 0.4s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(225, 29, 72, 0.15);
    background-color: #ffffff;

    .med-promo-price {
      background: #e11d48;
      color: #ffffff;
      border-color: #e11d48;
      transform: scale(1.02);
    }
  }

  h3 {
    color: #e11d48;
    font-size: 22px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    overflow-wrap: break-word;
  }

  .med-promo-desc {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    min-width: 0;

    p { 
      margin: 0; 
    }

    .promo-gift {
      color: #be123c;
      font-weight: 600;
      background: #ffe4e6;
      padding: 8px 12px;
      border-radius: 8px;
      display: inline-block;
      width: max-content;
      max-width: 100%;
      box-sizing: border-box;
      overflow-wrap: break-word;
    }

    .promo-contacts {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 10px;
      font-size: 14px;
      color: #334155;
      background: #f1f5f9;
      padding: 12px;
      border-radius: 8px;
      min-width: 0;
      overflow-wrap: break-word;
    }
  }

  .med-promo-price {
    font-size: 24px;
    font-weight: 800;
    color: #e11d48;
    margin-top: auto;
    padding: 12px;
    background: #ffffff;
    border-radius: 10px;
    text-align: center;
    border: 2px dashed rgba(225, 29, 72, 0.3);
    transition: all 0.3s ease;
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* --- 09.5. Unified Price List Component --- */
.med-price-list-wrapper {
  max-width: 900px;
  margin: 0 auto 60px auto;
}

.med-price-list {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  margin-bottom: 40px;
  border: 1px solid #f1f5f9; /* Об'єднано базову та альтернативну карти прайсів */

  :is(.med-price-main-title, .med-price-heading) {
    text-align: center;
    color: #1e293b;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
  }

  .med-price-category {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 35px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f5f9;

    &:first-of-type {
      margin-top: 0;
    }
  }

  .med-price-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .med-price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    padding: 16px 24px;
    margin-bottom: 10px;
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    gap: 15px;
    position: relative;
    z-index: 1;

    &:hover {
      background-color: #ffffff;
      border-left-color: #0284c7;
      transform: translateX(5px);
      box-shadow: 0 8px 20px rgba(2, 132, 199, 0.08);
    }

    .med-price-title {
      font-size: 16px;
      color: #334155;
      font-weight: 500;
      line-height: 1.4;
    }

    .med-price-value {
      font-size: 18px;
      color: #0284c7;
      font-weight: 700;
      white-space: nowrap;
    }
  }
}

/* --- 09.6. Page Structural Component Headers --- */
.med-page-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 15px;
  font-family: system-ui, -apple-system, sans-serif;

  .med-intro-block {
    text-align: center;
    margin-bottom: 50px;
  }

  .med-heading {
    color: #1e293b;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
  }

  .med-subtitle {
    font-size: 18px;
    color: #475569;
    margin-bottom: 35px;
  }

  .med-services-list {
    background-color: #f8fafc;
    border-radius: 16px;
    padding: 35px;
    text-align: left;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

    ul {
      columns: 2;
      column-gap: 40px;
      list-style-type: none;
      padding-left: 0;
      margin-bottom: 25px;

      li {
        color: #334155;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 12px;
        position: relative;
        padding-left: 28px;
        break-inside: avoid;

        &::before {
          content: '✓';
          position: absolute;
          left: 0;
          color: #0284c7;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }

    .med-services-note {
      font-style: italic;
      color: #64748b;
      font-size: 15px;
      padding-top: 20px;
      border-top: 1px dashed #cbd5e1;
    }
  }
}

/* ==========================================================================
   10. WOOCOMMERCE
   ========================================================================== */

/* --- 10.1. Shop, Archive & Single Product Pages --- */
.woocommerce, .woocommerce-page {

  &.archive #Content {
    padding-top: 30px !important;
  }

  /* Продуктова сітка каталогу */
  ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;

    &::before, &::after { display: none !important; } /* Clearfix більше не потрібен */

    li.product {
      width: 100% !important;
      margin: 0 !important;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid #f0f0f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        
        .button { background-color: #004494 !important; }
      }

      img {
        width: 100%;
        height: 220px !important;
        object-fit: contain;
        padding: 15px;
        margin-bottom: 0 !important;
        background-color: #fafafa;
        box-sizing: border-box;
      }

      .woocommerce-loop-product__title, .woocommerce-loop-category__title {
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #2c3e50 !important;
        padding: 15px 15px 10px !important;
        margin: 0 !important;
        text-align: center;
      }

      mark {
        background: none;
        color: #7f8c8d;
        font-size: 13px;
        font-weight: 400;
      }

      .price {
        color: #0056b3 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-align: center;
        display: block;
        padding: 0 15px 15px !important;
        margin-bottom: auto !important;
      }

      .button {
        margin: 0 15px 15px !important;
        display: block;
        text-align: center;
        background-color: #0056b3 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 12px 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        transition: background-color 0.2s ease;
      }
    }
  }

  /* Бічна панель магазину */
  .sidebar {
    padding-left: 20px;

    .widget {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      margin-bottom: 25px;
      border: 1px solid #f0f0f0;

      .widget-title {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin-bottom: 15px !important;
        padding-bottom: 10px;
        border-bottom: 2px solid #f0f0f0;
      }
    }

    /* Уніфікація нативних фільтрів: повне злиття копіпасту з YITH */
    .widget_layered_nav ul {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      padding: 0 !important;
      margin: 0 !important;

      li {
        list-style: none !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        background: #f4f4f5 !important;
        border-radius: 20px !important;
        border: 1px solid transparent !important;
        transition: all 0.2s ease !important;
        cursor: pointer;
        
        a {
          color: #475569 !important;
          text-decoration: none !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          white-space: nowrap !important;
        }

        .count {
          background: #e4e4e7 !important;
          color: #71717a !important;
          border-radius: 50% !important;
          min-width: 20px;
          height: 20px;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          font-size: 11px !important;
          margin-left: 8px !important;
          font-weight: 600 !important;
        }

        &:hover {
          background: #ffffff !important;
          border-color: #0056b3 !important;
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 86, 179, 0.12) !important;

          a { color: #0056b3 !important; }
          .count { background: #0056b3 !important; color: #ffffff !important; }
        }

        &.chosen {
          background: #0056b3 !important;
          border-color: #0056b3 !important;
          
          a { color: #ffffff !important; }
          .count { background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; }
        }
      }
    }

    /* Віджет фільтра цін */
    .widget_price_filter {
      .price_slider_wrapper .ui-widget-content {
        background: #e0e0e0 !important;
        border-radius: 4px;
      }
      .ui-slider .ui-slider-range {
        background: #0056b3 !important;
      }
      .ui-slider .ui-slider-handle {
        background: #ffffff !important;
        border: 2px solid #0056b3 !important;
        border-radius: 50% !important;
        width: 16px !important;
        height: 16px !important;
        top: -5px !important;
      }
      .price_slider_amount .button {
        background: #0056b3 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 8px 20px !important;
        font-weight: 600 !important;
        float: left !important;
      }
    }
  }

  /* Внутрішня картка товару */
  div.product {
    .product_title {
      font-size: 32px !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
      color: #2c3e50 !important;
      margin-bottom: 15px !important;
    }

    p.price {
      font-size: 26px !important;
      color: #0056b3 !important;
      font-weight: 700 !important;
      margin-bottom: 25px !important;
    }

    /* Форма вибору варіацій та покупки */
    form.cart {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #f0f0f0;

      button.quick-buy-btn { display: none !important; }

      table.variations {
        width: 100%;
        border: none !important;
        margin-bottom: 20px;

        td {
          padding: 10px 0 !important;
          border: none !important;
          vertical-align: middle;
          background: transparent !important;

          &.label {
            width: 30%;
            font-weight: 600;
            color: #2c3e50;
          }
        }

        select {
          width: 100%;
          padding: 12px 15px !important;
          border: 1px solid #e0e0e0 !important;
          border-radius: 8px !important;
          background-color: #fafafa !important;
          font-size: 15px !important;
          color: #2c3e50 !important;
          appearance: auto !important;
          cursor: pointer;

          &:focus {
            border-color: #0056b3 !important;
            background-color: #ffffff !important;
            outline: none !important;
          }
        }
      }

      .reset_variations {
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        color: #e74c3c;
      }

      .single_variation_wrap { margin-top: 20px; }

      /* Контейнер кнопок додавання в кошик */
      .woocommerce-variation-add-to-cart {
        display: flex !important;
        gap: 12px !important;
        align-items: stretch !important;
        flex-wrap: wrap;
      }

      .quantity {
        margin: 0 !important;
        
        input.qty {
          width: 70px !important;
          height: 50px !important;
          border: 1px solid #e0e0e0 !important;
          border-radius: 8px !important;
          text-align: center;
          font-size: 16px;
          font-weight: 600;
          background: #fafafa !important;
          padding: 0 !important;

          &:focus {
            border-color: #0284c7 !important;
            background: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
            outline: none !important;
          }
        }
      }

      /* Головна кнопка купівлі */
      button.single_add_to_cart_button:not(.clickBuyButton) {
        flex: 1;
        height: 50px !important;
        background-color: #0056b3 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        border: 2px solid #0056b3 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: none !important;
        padding: 0 15px !important;
        margin: 0 !important;
        transition: background-color 0.3s ease !important;

        &:hover {
          background-color: #004494 !important;
          border-color: #004494 !important;
        }
      }

      /* Кнопка Швидкого замовлення в 1 клік */
      button.clickBuyButton {
        flex: 1;
        height: 50px !important;
        background-color: transparent !important;
        color: #0056b3 !important;
        border: 2px solid #0056b3 !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        padding: 0 15px !important;
        margin: 0 !important;
        transition: all 0.3s ease !important;

        &:hover {
          background-color: #f0f4f8 !important;
        }
      }
    }
  }
}

/* --- 10.2. Модальне вікно Швидкого замовлення (BuyOneClick) --- */
#formOrderOneClick {
  .overlay { background: rgba(0, 0, 0, 0.6) !important; }

  .popup {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    padding: 40px 30px !important;
    border: none !important;
    width: 90% !important;
    max-width: 400px !important;
    text-align: center;
    box-sizing: border-box;
  }

  .close_order {
    background: #f0f4f8 !important;
    color: #2c3e50 !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    top: 15px !important;
    right: 15px !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;

    &:hover {
      background: #e74c3c !important;
      color: #ffffff !important;
    }
  }
}

#buyoneclick_form_order {
  h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2c3e50 !important;
    margin: 0 0 25px 0 !important;
    line-height: 1.3 !important;
    word-break: normal !important;
  }

  input.buyvalide {
    width: 100% !important;
    padding: 15px 20px !important;
    margin-bottom: 15px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 16px !important; /* Унеможливлює зум в iOS Safari */
    color: #2c3e50 !important;
    background-color: #fafafa !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;

    &:focus {
      border-color: #0056b3 !important;
      background-color: #ffffff !important;
      outline: none !important;
    }
  }

  button.buyButton0kForm {
    width: 100% !important;
    background: #0056b3 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.2) !important;
    transition: background 0.3s ease !important;
    cursor: pointer;

    &:hover { background: #004494 !important; }
  }
}

/* --- 10.3. Cart Page --- */
.woocommerce-cart {

  /* Таблиця кошика */
  table.cart {
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    width: 100%;

    th {
      background-color: #fafafa !important;
      color: #2c3e50 !important;
      font-weight: 600 !important;
      text-transform: uppercase;
      font-size: 13px !important;
      padding: 15px !important;
      border-bottom: 1px solid #f0f0f0 !important;
    }

    td {
      padding: 20px 15px !important;
      border-bottom: 1px solid #f0f0f0 !important;
      vertical-align: middle;
      background-color: #ffffff !important;
    }

    tr:last-child td { border-bottom: none !important; }

    .product-thumbnail img {
      border-radius: 8px;
      max-width: 80px;
      height: auto;
      border: 1px solid #f0f0f0;
      padding: 5px;
    }

    .product-name a {
      color: #2c3e50 !important;
      font-weight: 600;
      text-decoration: none;
      font-size: 16px;
      
      &:hover { color: #0056b3 !important; }
    }

    .product-remove a.remove {
      color: #e74c3c !important;
      border: 1px solid #e74c3c !important;
      border-radius: 50% !important;
      display: inline-flex !important;
      justify-content: center;
      align-items: center;
      width: 28px !important;
      height: 28px !important;
      font-size: 18px !important;
      background: transparent !important;
      transition: all 0.2s ease;

      &:hover {
        background: #e74c3c !important;
        color: #ffffff !important;
      }
    }

    td.actions {
      background: #fafafa !important;
      padding: 20px !important;

      .coupon .input-text {
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        padding: 12px 15px !important;
        min-width: 180px;
      }

      .button {
        border-radius: 8px !important;
        padding: 12px 25px !important;
        font-weight: 600 !important;
        text-transform: none !important;
      }
    }
  }

  /* Блок підсумків кошика */
  .cart-collaterals {
    
    .cart_totals {
      background: #ffffff !important;
      border: 1px solid #f0f0f0 !important;
      border-radius: 12px !important;
      padding: 30px !important;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
      width: 100% !important;
      box-sizing: border-box;
    }

    h2 {
      font-size: 22px !important;
      border-bottom: 2px solid #f0f0f0 !important;
      padding-bottom: 15px !important;
      margin-bottom: 20px !important;
      font-weight: 600 !important;
    }

    table {
      th, td {
        padding: 15px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: transparent !important;
      }

      tr.order-total {
        th, td {
          border-bottom: none !important;
          font-size: 20px !important;
          color: #0056b3 !important;
          font-weight: 700 !important;
        }
      }
    }
  }

  .wc-proceed-to-checkout .checkout-button {
    background-color: #0056b3 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 20px !important;
    display: block !important;
    transition: background-color 0.3s ease !important;

    &:hover { background-color: #004494 !important; }
  }

  /* Приховуємо стандартні нотіси успіху, якщо вони дублюються */
  .woocommerce-notices-wrapper .woocommerce-message { display: none !important; }
}

/* Глобальна уніфікована таблиця shop_table для кошика/замовлень */
.woocommerce table.shop_table {
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.05) !important;
  background: #ffffff !important;
  margin-bottom: 40px !important;
  border-collapse: separate !important;

  th {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding: 20px 15px !important;
    background: #f8fafc !important;
  }

  td {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 15px !important;
    vertical-align: middle !important;

    &.product-name a {
      font-family: system-ui, -apple-system, sans-serif !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #1e293b !important;
      text-decoration: none !important;
      transition: color 0.2s ease !important;

      &:hover { color: #0284c7 !important; }
    }

    &.product-price {
      font-family: system-ui, -apple-system, sans-serif !important;
      color: #475569 !important;
      font-weight: 500 !important;
    }

    &.product-subtotal {
      font-family: system-ui, -apple-system, sans-serif !important;
      color: #0284c7 !important;
      font-weight: 700 !important;
      font-size: 16px !important;
    }

    &.product-remove a.remove {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      background: #fee2e2 !important;
      color: #ef4444 !important;
      font-size: 24px !important;
      border: none !important;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

      &:hover {
        background: #ef4444 !important;
        color: #ffffff !important;
        transform: scale(1.15) rotate(90deg) !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
      }
    }

    &.actions {
      background: #ffffff !important;
      padding: 24px 20px !important;
      text-align: right !important;

      button[name="update_cart"] {
        background: #f1f5f9 !important;
        color: #475569 !important;
        font-family: system-ui, -apple-system, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 12px 28px !important;
        border-radius: 12px !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        text-transform: none !important;

        &:hover:not(:disabled) {
          background: #0284c7 !important;
          color: #ffffff !important;
          transform: translateY(-3px) !important;
          box-shadow: 0 8px 20px rgba(2, 132, 199, 0.2) !important;
        }

        &:disabled {
          opacity: 0.5 !important;
          cursor: not-allowed !important;
          display: none !important; /* Авто-заміна на мед-кнопку оформлення */
        }
      }
    }
  }
}

.woocommerce-cart .cart-empty.alert {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 40px 0 30px 0 !important;
  text-align: center !important;

  i, .close { display: none !important; }

  .alert_wrapper {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }
}

/* --- 10.4. Checkout Page --- */
.woocommerce-checkout {
  
  form.checkout {
    &::before, &::after { display: none !important; }

    .form-row {
      label {
        font-weight: 600 !important;
        color: #2c3e50 !important;
        margin-bottom: 8px !important;
        display: inline-block;
      }

      input.input-text, textarea {
        border: 1px solid #e0e0e0 !important;
        border-radius: 8px !important;
        padding: 12px 15px !important;
        background-color: #fafafa !important;
        color: #2c3e50 !important;
        transition: all 0.3s ease;
        box-sizing: border-box;

        &:focus {
          background-color: #ffffff !important;
          border-color: #0056b3 !important;
          box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1) !important;
        }
      }
    }
  }

  /* Випадаючі списки Select2 */
  .select2-container {
    .select2-selection {
      border: 1px solid #e0e0e0 !important;
      border-radius: 8px !important;
      padding: 12px 15px !important;
      background-color: #fafafa !important;
      color: #2c3e50 !important;
      height: auto !important;
    }
    &.select2-container--open .select2-selection {
      background-color: #ffffff !important;
      border-color: #0056b3 !important;
      box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1) !important;
    }
  }

  /* Таблиця огляду замовлення */
  .woocommerce-checkout-review-order-table {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;

    th, td {
      padding: 15px 20px !important;
      border-bottom: 1px solid #f0f0f0 !important;
      background: transparent !important;
    }

    tr.order-total {
      th, td {
        font-size: 20px !important;
        color: #0056b3 !important;
        font-weight: 700 !important;
      }
    }
  }

  /* Блок вибору методів оплати */
  #payment {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    padding: 20px !important;

    ul.payment_methods {
      border-bottom: 1px solid #f0f0f0 !important;
      padding: 0 0 20px 0 !important;
      margin: 0 0 20px 0 !important;
      list-style: none;

      li {
        background: #fafafa;
        border-radius: 8px;
        padding: 15px !important;
        margin-bottom: 10px !important;
        border: 1px solid #e0e0e0;
        transition: border-color 0.3s ease;

        &:hover { border-color: #c4c4c4 !important; }
      }
    }

    div.payment_box {
      background-color: #f0f4f8 !important;
      color: #2c3e50 !important;
      border-radius: 8px !important;
      padding: 15px !important;
      margin-top: 10px !important;
      
      &::before { display: none !important; } /* Прибираємо застарілу стрілочку */
    }

    .place-order {
      padding: 20px 0 0 0 !important;

      .button {
        background-color: #0056b3 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 18px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        width: 100% !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        transition: transform 0.2s ease, background-color 0.3s ease !important;

        &:hover {
          background-color: #004494 !important;
          transform: translateY(-2px) !important;
        }
      }
    }
  }

  /* Двоколонковий адаптивний чекаут */
  .col2-set {
    &::before, &::after { display: none !important; }

    .col-1, .col-2 {
      width: 100% !important;
      float: none !important;
      padding: 0 !important;
      margin-bottom: 20px !important;
    }
  }
}

/* Інтеграція специфічних полей чекауту (Нова Пошта та SmartyParcel) */
body.woocommerce-checkout {
  
  form.checkout {
    /* ВИПРАВЛЕНО: Прибрано випадковий функціональний wrapper 'var()' із переліку селекторів */
    input[type="text"], input[type="email"], input[type="tel"], textarea,
    .select2-container .select2-selection--single {
      width: 100% !important;
      min-height: 50px !important;
      padding: 12px 18px !important;
      background: #ffffff !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 8px !important;
      color: #333333 !important;
      font-size: 16px !important;
      box-shadow: none !important;
      transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    input:focus, textarea:focus {
      border-color: #2c3e50 !important;
      box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1) !important;
      outline: none !important;
    }
  }

  .select2-container .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    background-color: #f7f7f7 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    height: 50px !important;

    .select2-selection__rendered {
      color: #444 !important;
      font-size: 16px !important;
      padding-left: 15px !important;
    }

    .select2-selection__arrow {
      height: 48px !important;
      right: 10px !important;
    }
  }

  /* Ліва/Права липка колонка огляду замовлення */
  #order_review {
    background: #f8f9fa !important;
    padding: 35px !important;
    border-radius: 16px !important;
    position: sticky !important;
    top: 100px !important;
    border: 1px solid #eaeaea !important;
    box-sizing: border-box;

    table.shop_table {
      border: none !important;
      border-collapse: collapse !important;
      margin-bottom: 25px !important;
      box-shadow: none !important;

      th, td {
        border-top: none !important;
        border-bottom: 1px solid #eaeaea !important;
        padding: 15px 0 !important;
        background: transparent !important;
      }

      tr.cart_item td.product-name {
        font-weight: 500 !important;
        color: #2c3e50 !important;
      }
    }

    #payment {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      box-shadow: none !important;
      
      ul.payment_methods {
        border-bottom: none !important;
        padding: 0 !important;
        
        li { background: #ffffff !important; border: 1px solid #eaeaea !important; }
      }
    }
  }

  /* Кастомні плагіни доставки (Нова Пошта / SmartyParcel) */
  #wcus-shipping-fields, .wcus-checkout-fields-wrapper, #wcus-checkout-fields {
    
    .form-row { margin-bottom: 20px !important; }
    
    label {
      font-weight: 600 !important;
      margin-bottom: 8px !important;
      display: block !important;
      color: #333 !important;
      font-size: 14px !important;
    }

    .wcus-select, .wcus-select-control, select, select[name^="wcus_"] {
      background-color: #f7f7f7 !important;
      border: 1px solid #e5e5e5 !important;
      border-radius: 8px !important;
      min-height: 50px !important;
      padding: 0 15px !important;
      color: #444 !important;
      font-size: 16px !important;
      width: 100% !important;
      box-shadow: none !important;
      outline: none !important;
      cursor: pointer !important;
      appearance: none !important;
      -webkit-appearance: none !important;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
      background-repeat: no-repeat !important;
      background-position: right 15px center !important;
      background-size: 16px !important;

      &:focus {
        border-color: #2c3e50 !important;
        background-color: #ffffff !important;
      }
    }

    button.button {
      background: #f4f4f4 !important;
      color: #333 !important;
      border-radius: 6px !important;
      border: 1px solid #ddd !important;
      padding: 8px 15px !important;
    }

    .wcus-radio-group label {
      background: #ffffff !important;
      border: 1px solid #e0e0e0 !important;
      border-radius: 8px !important;
      padding: 12px 18px !important;
      margin-bottom: 10px !important;
      display: block !important;
      transition: all 0.2s ease;

      &:hover {
        border-color: #2c3e50 !important;
        box-shadow: 0 2px 6px rgba(44, 62, 80, 0.1) !important;
      }
    }
  }
}

/* Оформлення кастомних випадаючих списків Нової Пошти на Checkout */
.wcus-checkout-np-fields .zen-ui-select {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important; /* Колір рамки, як у стандартних полів */
  border-radius: 4px !important; /* Легке заокруглення */
  padding: 12px 15px !important; /* Внутрішні відступи для дихання */
  min-height: 48px !important; /* Висота для зручного натискання на мобільних */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important; /* Відступ між селектами */
  cursor: pointer !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important; /* Легка внутрішня тінь для об'єму */
}

/* Стилізація тексту всередині випадаючого списку */
.wcus-checkout-np-fields .zen-ui-select_value {
  color: #555555 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* Стилізація іконки стрілочки */
.wcus-checkout-np-fields .zen-ui-select svg {
  fill: #888888 !important;
  width: 14px !important;
  height: 14px !important;
}

/* Відступ під заголовком "Вкажіть адресу доставки" */
.wcus-checkout-np-fields h3 {
  margin-bottom: 20px !important;
}

/* --- 10.5. Notifications / Notices (Premium Toast Module) --- */
.woocommerce-notices-wrapper {
  
  .woocommerce-message {
    position: fixed !important;
    top: 30px !important;
    right: 30px !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    padding: 16px 24px !important;
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    width: auto !important;
    max-width: 450px !important;
    margin: 0 !important;
    animation: slideInRightToast 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;

    &::before { display: none !important; }

    .button.wc-forward {
      background: #0284c7 !important;
      color: #ffffff !important;
      border-radius: 10px !important;
      padding: 10px 18px !important;
      font-weight: 600 !important;
      font-size: 13px !important;
      text-decoration: none !important;
      white-space: nowrap !important;
      border: none !important;
      transition: all 0.3s ease !important;
      order: 2 !important;

      &:hover {
        background: #0369a1 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(2, 132, 199, 0.25) !important;
      }
    }
  }
}

@keyframes slideInRightToast {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* ==========================================================================
   11. BETHEME OVERRIDES & THEME-SPECIFIC FIXES
   ========================================================================== */

/* Приховування субхедерів на категоріях та картках товарів через нативний :is() */
body:is(.archive.tax-product_cat, .single-product) {
  
  :is(.subheader, #Subheader, .mfn-subheader) {
    display: none !important; /* Необхідно для повного відключення рендерингу в BeTheme */
  }

  #Content {
    padding-top: 40px !important;
  }
}

#Subheader .title {
  text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   12. CUSTOM MEDICAL COMPONENTS (CLINIC-SPECIFIC UI)
   ========================================================================== */

/* --- 12.1 & 12.11. WooCommerce Medical Overrides & Buttons --- */
.woocommerce, .woocommerce-page {

  /* Кнопка "Продовжити покупки" */
  .med-continue-shopping {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #0284c7 !important;
    border: 2px solid #0284c7 !important;
    border-radius: 8px !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin-right: 15px !important;

    &:hover {
      background: #f0f9ff !important;
      color: #0369a1 !important;
      border-color: #0369a1 !important;
      transform: translateY(-2px) !important;
    }
  }

  /* Розумна кнопка чекауту */
  .med-smart-checkout-btn {
    background: #0284c7 !important;
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    display: inline-flex;

    &:hover {
      background: #0369a1 !important;
      transform: translateY(-3px) !important;
      box-shadow: 0 8px 20px rgba(2, 132, 199, 0.2) !important;
    }
  }

  /* Повернення до магазину з порожнього кошика */
  .return-to-shop {
    text-align: center !important;
    margin-top: 20px !important;
    margin-bottom: 60px !important;

    .button.wc-backward {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: linear-gradient(135deg, #0284c7, #0369a1) !important;
      color: #ffffff !important;
      font-family: system-ui, -apple-system, sans-serif !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      padding: 16px 40px !important;
      border-radius: 16px !important;
      border: none !important;
      text-decoration: none !important;
      box-shadow: 0 4px 15px rgba(2, 132, 199, 0.2) !important;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;

      &:hover {
        transform: translateY(-4px) scale(1.02) !important;
        box-shadow: 0 12px 24px rgba(2, 132, 199, 0.3) !important;
        background: linear-gradient(135deg, #0369a1, #075985) !important;
      }
    }
  }
}

/* Навігація "Назад до каталогу" */
.med-back-nav {
  width: 100%;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
}

.med-back-to-catalog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 8px 16px 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;

  .med-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
  }

  &:hover {
    color: #0284c7;
    background: #ffffff;
    border-color: #bae6fd;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);

    .med-arrow {
      transform: translateX(-4px);
    }
  }
}

/* --- 12.3. SEO Accordion Elements (WPBakery Overrides) --- */
.med-seo-accordion {
  
  .vc_tta-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--border-radius) !important;
    margin-bottom: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
      border-color: #cbd5e1 !important;
    }
  }

  .vc_tta-panel-heading {
    background: transparent !important;
    border: none !important;
    padding: 10px 5px !important;
  }

  .vc_tta-panel-title > a {
    color: var(--primary-color) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .vc_tta-panel-body {
    border: none !important;
    background: transparent !important;
    padding-top: 0 !important;

    p {
      color: var(--text-dark) !important;
      line-height: 1.7 !important;
      font-size: 15px !important;
    }
  }
}

/* --- 12.4. Google Reviews Component --- */
.med-google-btn-v3 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  color: #1e293b !important;
  padding: 12px 32px !important;
  border-radius: 50px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    background: #f8fafc !important;
    color: #000000 !important;
  }

  span {
    text-decoration: none !important;
  }
}

/* --- 12.5. Privacy Policy & Legal Document Components --- */
.med-legal-document {
  max-width: 800px;
  margin: 40px auto;
  padding: 40px 50px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  color: #4a4a4a;
  font-size: 16px;
  line-height: 1.7;

  h2 {
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 700;
  }

  h3 {
    color: #2c3e50;
    margin-top: 40px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid #f4f4f4;
    padding-bottom: 10px;
  }

  p { margin-bottom: 15px; }

  ul {
    margin-bottom: 20px;
    padding-left: 20px;
    list-style-type: disc;

    li { margin-bottom: 10px; }
  }

  strong {
    color: #1a1a1a;
    font-weight: 600;
  }
}

/* --- 12.6. Contact Page Elements & Forms --- */
.med-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 50px;
  align-items: start;

}

.med-contact-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;

}

.med-contact-item {
  background: #ffffff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(2, 132, 199, 0.05);
  border: 1px solid #f1f5f9;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(2, 132, 199, 0.12);
    border-color: #e0f2fe;

    h3 :is(i, svg, img) { transform: scale(1.15); }
  }

  h3 {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    :is(i, svg, img) {
      color: #0284c7;
      font-size: 18px;
      transition: transform 0.3s ease;
    }
  }

  p {
    margin: 0;
    color: #1e293b;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }

  a {
    color: #0284c7;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    display: inline-block;

    &:hover {
      color: #0369a1;
      text-decoration: underline;
    }
  }
}

.med-contact-form-wrapper {
  background: #ffffff;
  padding: 35px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;

  h3 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #1e293b;
    font-size: 22px;
  }
}

.med-map-wrapper {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  line-height: 0;
  margin-bottom: 40px;
}

.med-privacy-policy {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 25px;
  font-size: 13px;
  color: #64748b;
  border: 1px solid #e2e8f0;

  h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #475569;
    font-size: 15px;
  }

  p {
    margin-bottom: 8px;
    line-height: 1.5;
  }
}

/* ==========================================================================
   MOBILE REFACTORING 2026 (Isolated Layer)
   ==========================================================================
   TABLE OF CONTENTS:
   01. CORE RESET & LAYOUT     - Viewport protection, WPBakery/BeTheme resets
   02. SERVICES & PRICING      - Single column lists, text wrapping
   03. HERO BANNERS            - WCAG AA contrast overlays, typography
   04. CONTACTS & MAPS         - Grid collapse, map safe width
   05. MODERN UI & NAVIGATION  - FAB buttons, Side_slide polish, Socials
   06. WOOCOMMERCE: CATALOG    - Swipe carousels, YITH filters, compact widgets
   07. WOOCOMMERCE: CART       - Anti-zoom qty inputs, UI cleanup
   08. WOOCOMMERCE: CHECKOUT   - 100% width, App-like inputs, massive button
   09. CUSTOM PROMO SLIDERS    - CSS Scroll Snap for Promos & Experts
   10. MISCELLANEOUS           - YouTube stats hotfix
   ========================================================================== */

@media (max-width: 768px) {

  /* ==========================================================================
     01. CORE RESET & LAYOUT
     ========================================================================== */
  
  /* Viewport protection (Anti-scroll) */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%; 
  }

  /* Reset BeTheme desktop widths */
  #Wrapper, 
  .section_wrapper, 
  .mcb-section .section_wrapper,
  .mcb-wrap-inner,
  .mcb-column-inner {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Reset WPBakery paddings */
  .vc_column_container > .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile Safe Area */
  .section_wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Fix forced full-width WPBakery rows */
  .vc_row[data-vc-full-width="true"] {
    left: 0 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* ==========================================================================
     02. SERVICES & PRICING
     ========================================================================== */

  /* Services list: Force 1 column */
  .med-services-list {
    padding: 24px 16px !important; 
  }
  
  .med-services-list ul {
    columns: 1 !important; 
    column-gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; 
  }

  .med-services-list ul li {
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    word-break: break-word !important; 
  }

  /* Price list: Fix long titles */
  .med-price-list {
    padding: 24px 16px !important; 
  }

  .med-price-item {
    padding: 12px 16px !important;
    align-items: flex-start !important; 
    gap: 16px !important;
  }

  .med-price-title {
    flex: 1 1 auto !important; 
    white-space: normal !important; /* Allow multi-line */
    font-size: 15px !important;
    line-height: 1.4 !important;
    word-break: break-word !important; 
  }

  .med-price-value {
    flex: 0 0 auto !important; 
    white-space: nowrap !important; /* Keep price in one line */
    font-size: 16px !important;
    margin-top: 2px !important; 
  }

  /* ==========================================================================
     03. HERO BANNERS (WCAG AA Contrast)
     ========================================================================== */

  /* Target rows with bg images */
  .vc_row[style*="background-image"],
  #Subheader[style*="background-image"] {
    position: relative !important;
    min-height: 240px !important; 
  }

  /* Inject dark gradient overlay */
  .vc_row[style*="background-image"]::before,
  #Subheader[style*="background-image"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important; 
  }

  /* Pull content above overlay */
  .vc_row[style*="background-image"] > .wpb_column,
  #Subheader[style*="background-image"] .container {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Mobile typography for Hero */
  .vc_row[style*="background-image"] h1,
  .vc_row[style*="background-image"] h2,
  #Subheader[style*="background-image"] h1,
  #Subheader[style*="background-image"] .title {
    color: #ffffff !important;
    font-size: 28px !important; 
    font-weight: 700 !important; 
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important; 
    margin-bottom: 16px !important;
  }

  .vc_row[style*="background-image"] p {
    color: #f8fafc !important;
    font-size: 16px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
  }

  /* ==========================================================================
     04. CONTACTS & MAPS
     ========================================================================== */

  /* Contact grid: Force 1 column */
  .med-contact-grid,
  .med-contact-info {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .med-contact-grid {
    margin-bottom: 32px !important;
    gap: 24px !important;
  }

  .med-contact-item {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
  }

  /* Map container safe width */
  .med-map-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
  }

  /* ==========================================================================
     05. MODERN UI & NAVIGATION
     ========================================================================== */

  /* Bottom safe area for FABs */
  body {
    padding-bottom: 85px !important; 
  }

  /* Left FAB (Floatton) */
  button.floatton-btn {
    left: 16px !important;
    right: auto !important;
    bottom: 20px !important;
    margin-bottom: 0 !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important; 
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .floatton-btn-label {
    display: none !important;
  }
  
  .floatton-container {
    left: 16px !important;
    right: auto !important;
    bottom: 90px !important;
    width: calc(100vw - 32px) !important;
    max-width: 380px !important;
    z-index: 9989 !important;
  }

  /* Side Menu Wrapper */
  #Side_slide {
    background: #ffffff !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18) !important;
    border-left: 1px solid #e2e8f0 !important;
    z-index: 99999 !important; 
  }

  #Side_slide .extras {
    padding: 20px 20px 10px !important;
    border-bottom: none !important;
  }

  /* Side Menu Close Button */
  #Side_slide .close-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 16px 20px !important;
    border-bottom: none !important;
  }

  #Side_slide .close {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    transition: all .25s ease !important;
  }

  #Side_slide .close:hover {
    background: #e2e8f0 !important;
  }

  #Side_slide .close i {
    color: #0f172a !important;
    font-size: 20px !important;
  }

  /* Side Menu Cart UI */
  #Side_slide #slide-cart {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #0284c7 !important;
    transition: .25s ease !important;
  }

  #Side_slide #slide-cart:hover {
    background: #e0f2fe !important;
  }

  #Side_slide #slide-cart span {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #0284c7 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  /* Side Menu Links */
  #Side_slide .menu_wrapper {
    padding: 10px 20px 20px !important;
  }

  #Side_slide .menu_wrapper ul.menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  #Side_slide .menu_wrapper ul.menu li {
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #Side_slide.dark .menu_wrapper ul.menu li a,
  #Side_slide .menu_wrapper ul.menu li a {
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    color: #1e293b !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border-bottom: none !important; 
    transition: background .2s ease, color .2s ease !important;
  }

  #Side_slide.dark .menu_wrapper ul.menu li a:hover,
  #Side_slide.dark .menu_wrapper ul.menu li.current-menu-item > a,
  #Side_slide .menu_wrapper ul.menu li a:hover,
  #Side_slide .menu_wrapper ul.menu li.current-menu-item > a {
    background: #f0f9ff !important;
    color: #0284c7 !important;
  }

  /* Submenu */
  #Side_slide .menu_wrapper ul.sub-menu {
    margin-left: 12px !important;
    padding-left: 12px !important;
    border-left: 2px solid #e0f2fe !important;
  }

  /* Submenu Toggle Icon */
  #Side_slide .menu_wrapper ul.menu li .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    right: 12px !important;
    background: #f8fafc !important; 
    color: #21252a !important; 
    border-radius: 50% !important; 
    font-size: 20px !important;
    transition: all 0.2s ease !important;
  }
  
  #Side_slide .menu_wrapper ul.menu li.hover > .menu-toggle,
  #Side_slide .menu_wrapper ul.menu li .menu-toggle:hover {
    background: #e0f2fe !important;
    color: #0284c7 !important;
  }

  /* Side Menu Social Icons */
  #Side_slide .social {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 20px !important;
    padding: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  #Side_slide .social li {
    margin: 0 !important;
  }

  #Side_slide .social li a {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.12) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
  }

  #Side_slide .social li a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.18) !important;
  }
  
  #Side_slide .social li a i {
    font-size: 22px !important; 
    line-height: 1 !important;
  }

  #Side_slide .social li.facebook a {
    background: #1877f2 !important;
  }

  #Side_slide .social li.instagram a {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  }

  /* ==========================================================================
     06. WOOCOMMERCE: CATALOG (Swipe Carousels & Layout)
     ========================================================================== */

  /* YITH Filters Horizontal Swipe */
  .sidebar .widget.yith-woocommerce-ajax-product-filter ul {
    display: flex !important;
    flex-wrap: nowrap !important; 
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    margin: 0 -16px !important; /* Full-bleed edge */
    padding-left: 16px !important; 
    padding-right: 16px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important; 
    scroll-snap-type: x mandatory !important;
  }
  
  .sidebar .widget.yith-woocommerce-ajax-product-filter ul::-webkit-scrollbar {
    display: none !important; 
  }
  
  .sidebar .widget.yith-woocommerce-ajax-product-filter ul li {
    flex: 0 0 auto !important; 
    scroll-snap-align: start !important; 
  }

  /* Compact Sidebar Widgets */
  .sidebar .widget {
    padding: 16px 16px 8px 16px !important;
    margin-bottom: 16px !important;
  }
  
  .sidebar .widget .widget-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Sidebar Layout Cleanup */
  .sidebar.columns {
    width: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    clear: both !important;
  }

  .sidebar .widget-area[style] {
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .yit-wcan-container {
    margin-bottom: 24px !important;
  }

  /* Products & Categories Horizontal Swipe */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    margin: 0 -16px !important; 
    padding: 10px 16px 24px 16px !important; 
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 16px !important; 
  }
  
  .woocommerce ul.products::-webkit-scrollbar {
    display: none !important;
  }

  /* Product Card Sizing (75% to show hint of next card) */
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product-category {
    flex: 0 0 75% !important;
    max-width: 260px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .woocommerce ul.products li.product img,
  .woocommerce ul.products li.product-category img {
    height: 180px !important;
    width: 100% !important;
    object-fit: contain !important; 
    background: transparent !important;
  }
  
  .woocommerce ul.products li.product-category img {
    object-fit: cover !important; 
    border-radius: 12px 12px 0 0 !important; 
  }

  /* Push Add to Cart button to bottom */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button {
    margin-top: auto !important; 
  }

  /* ==========================================================================
     07. WOOCOMMERCE: CART
     ========================================================================== */

  /* Modern Quantity Block UI */
  .woocommerce .quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
  }

  /* Anti-Zoom Qty Input */
  .woocommerce .quantity input.qty {
    width: 64px !important;
    height: 44px !important; 
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    color: #1e293b !important;
    font-size: 16px !important; /* CRITICAL: Blocks iOS Auto-zoom */
    font-weight: 700 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important; 
  }

  /* Hide default browser spinners */
  .woocommerce .quantity input.qty::-webkit-outer-spin-button,
  .woocommerce .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     08. WOOCOMMERCE: CHECKOUT
     ========================================================================== */

  /* Linear Checkout Layout */
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
    clear: both !important;
  }

  /* Order Review Table Fix */
  .woocommerce-checkout #order_review,
  .woocommerce-checkout #order_review table.shop_table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .woocommerce-checkout #order_review table.shop_table th,
  .woocommerce-checkout #order_review table.shop_table td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Checkout Inputs Anti-Zoom & App-UI */
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="password"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout select,
  .woocommerce-checkout textarea {
    width: 100% !important;
    height: 52px !important; 
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0 16px !important;
    background: #f8fafc !important; 
    color: #1e293b !important;
    font-size: 16px !important; /* CRITICAL: Blocks iOS Auto-zoom */
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
  }
  
  .woocommerce-checkout input:focus,
  .woocommerce-checkout select:focus {
    background: #ffffff !important;
    border-color: #0284c7 !important; 
    outline: none !important;
  }

  .woocommerce-checkout textarea {
    height: 120px !important;
    padding: 16px !important;
    resize: vertical !important;
  }

  /* Form Rows Spacing */
  .woocommerce-checkout .form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
  }
  
  .woocommerce-checkout .form-row label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
  }

  /* Payment Gateway UI */
  #add_payment_method #payment, 
  .woocommerce-checkout #payment {
    background: #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: none !important;
    margin-top: 24px !important;
  }

  .woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0 0 20px 0 !important;
    margin: 0 0 20px 0 !important;
  }

  .woocommerce-checkout #payment ul.payment_methods li {
    padding: 12px 0 !important;
  }
  
  .woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  /* Checkout CTA Button */
  .woocommerce-checkout #payment .place-order {
    padding: 0 !important;
    margin: 0 !important;
  }

  .woocommerce-checkout #payment #place_order {
    width: 100% !important;
    height: auto !important; 
    min-height: 60px !important; 
    background: #16a34a !important; 
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    border: none !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.3) !important;
    transition: transform 0.2s ease !important;
    
    /* Allow text wrap */
    white-space: normal !important; 
    line-height: 1.3 !important; 
    padding: 14px 16px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  
  .woocommerce-checkout #payment #place_order:active {
    transform: scale(0.98) !important;
  }

  /* ==========================================================================
     09. CUSTOM PROMO SLIDERS (CSS Scroll Snap)
     ========================================================================== */

  /* Parent Container Horizontal Swipe */
  .med-promo-grid,
  .med-equipment-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    -webkit-overflow-scrolling: touch !important; 
    padding-bottom: 20px !important; 
    
    /* Full-bleed edge effect */
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    
    scrollbar-width: none !important; 
  }

  .med-promo-grid::-webkit-scrollbar,
  .med-equipment-grid::-webkit-scrollbar {
    display: none !important;
  }

  /* Swipe Cards Size & Snap */
  .med-promo-card,
  .med-equipment-card {
    flex: 0 0 85% !important; /* 85% width: Shows a hint of the next card */
    scroll-snap-align: center !important; 
    margin: 0 !important; 
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Custom Promo Pricing Box Fix */
  .med-promo-price,
  .med-equipment-price {
    height: auto !important; 
    min-height: 44px !important; 
    white-space: normal !important; /* CRITICAL: Allow text wrapping */
    line-height: 1.3 !important; 
    font-size: 18px !important; /* Downscaled from desktop 24px */
    padding: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    word-wrap: break-word !important;
  }

  /* ==========================================================================
     10. MISCELLANEOUS
     ========================================================================== */
     
  /* YouTube stats hotfix */
  .yrc-stats.pb-absolute {
    display: none !important;
  }

}