/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.1.1778340825
Updated: 2026-05-09 16:33:45

*/

/*
=======================================================
  PILLSUITE — HERO SECTION A
  Elementor Custom CSS & jQuery Guide
  
  READ THIS FIRST:
  This file is NOT uploaded anywhere.
  Copy each labelled block into the exact location
  described above it inside WordPress / Elementor.
=======================================================
*/


/* ─────────────────────────────────────────────────────
   LOCATION 1 of 3
   WHERE → Elementor > Site Settings > Custom CSS
           (or Appearance > Customize > Additional CSS)
   WHAT  → Global styles used across the whole site.
           Add this ONCE — not per section.
─────────────────────────────────────────────────────── */
html {
    overflow-x: hidden;
}

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── CSS Variables ── */
:root {
    --ps3-navy: #1A3C34;
    --ps3-off-white: #F0FAF7;

    /* 
  --ps3-navy-mid: #1D5246;
  --ps3-mint: #00897B;
  --ps3-mint-light: #D0F0EA;
  --ps3-mint-dim: rgba(0,137,123,0.12);
  --ps3-white: #FFFFFF;
  --ps3-text-muted: #5C7A73;
  --ps3-border: rgba(26,60,52,0.10);
  --ps3-card-bg: #FFFFFF;
  --ps3-radius-md: 12px;
  --ps3-radius-lg: 20px;
  --ps3-radius-xl: 32px;
  --ps3-shadow-sm: 0 2px 12px rgba(26,60,52,0.07);
  --ps3-shadow-md: 0 8px 32px rgba(26,60,52,0.10);
  --ps3-shadow-lg: 0 20px 60px rgba(26,60,52,0.14);	 */

    --ps-navy: #2B3A6B;
    --ps-navy-mid: #3D4E85;
    --ps-gold: #F5C842;
    --ps-cream: #EBE5D8;
    --ps-off-white: #FDF8F0;
    --ps-muted: #7A6F5E;
    --ps-border: rgba(43, 58, 107, 0.10);
    --ps-serif: 'Libre Baskerville', Georgia, serif;
    /* --ps-sans:       'DM Sans', system-ui, sans-serif; */
    --ps-sans: 'Poppins', sans-serif;
}

.woocommerce-page h1,
.single-post .entry-title {
    font-size: 60px !important;
    line-height: 70px !important;
}

/* .woocommerce-page h2{font-size: 56px; font-weight: 700;}
.woocommerce-page h3{font-size: 44px; font-weight: 700;}
.woocommerce-page h4{font-size: 35px;} */

/* ── Eyebrow Badge ── */
.ps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EBE5D8;
    color: #2B3A6B;
    font-family: var(--ps-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
}

.ps-pulse-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #F5C842;
    border-radius: 50%;
    flex-shrink: 0;
    animation: ps-pulse 2s infinite;
}

@keyframes ps-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ── H1 italic accent colour ── */
#ps-hero-h1 .elementor-heading-title em {
    color: #F5C842;
    font-style: italic;
}

/* ── Trust row ── */
.ps-trust-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ps-avatars {
    display: flex;
}

.ps-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #FDF8F0;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ps-sans);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.ps-av:first-child {
    margin-left: 0;
}

.ps-trust-text {
    font-family: var(--ps-sans);
    font-size: 13px;
    color: #7A6F5E;
}

.ps-trust-text strong {
    color: #2B3A6B;
}

/* ── Buttons — inner section layout fix ──
   The inner section wrapping both buttons needs
   horizontal flex flow. Add this so they sit
   side-by-side instead of stacking.           ── */
#ps-hero-a .elementor-inner-section .elementor-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

#ps-hero-a .elementor-inner-section .elementor-column {
    width: auto !important;
    flex: 0 0 auto;
}

/* ── Fade-up entrance animation ── */
#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget {
    animation: ps-fade-up 0.6s ease both;
}

#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget:nth-child(1) {
    animation-delay: 0.05s;
}

#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget:nth-child(2) {
    animation-delay: 0.12s;
}

#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget:nth-child(3) {
    animation-delay: 0.20s;
}

#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget:nth-child(4) {
    animation-delay: 0.28s;
}

#ps-hero-a .elementor-column:first-child>.elementor-widget-wrap>.elementor-widget:nth-child(5) {
    animation-delay: 0.36s;
}

@keyframes ps-fade-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* header width  */
@media (max-width: 1280px) {
    .Header-W100 {
        width: 100%;
    }
}

/* ── Responsive: stack columns on tablet / mobile ── */
@media (max-width: 1024px) {
    #ps-hero-a .elementor-section>.elementor-container>.elementor-row {
        flex-direction: column !important;
    }

    #ps-hero-a .elementor-section>.elementor-container>.elementor-row>.elementor-column {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    #ps-hero-a .elementor-inner-section .elementor-row {
        flex-direction: column !important;
        gap: 10px;
    }

    #ps-hero-a .elementor-inner-section .elementor-column {
        width: 100% !important;
    }
}


/* ─────────────────────────────────────────────────────
   LOCATION 2 of 3
   WHERE → Inside Elementor Editor:
           Click the SECTION (outermost wrapper)
           → Advanced tab → Custom CSS
   WHAT  → Scoped section-level overrides.
           These apply only to this hero section.
─────────────────────────────────────────────────────── */

/*
  Paste the block below into:
  Section > Advanced > Custom CSS
  (the text area in Elementor's panel)

  Note: Elementor prepends the section's own
  selector automatically — start with selector: 

  selector .elementor-column:nth-child(2) { ... }
*/

selector .elementor-column:nth-child(2) {
    /* Right column — hide on tablet and below */
    display: none;
}

@media (min-width: 1025px) {
    selector .elementor-column:nth-child(2) {
        display: flex;
    }
}


/* ─────────────────────────────────────────────────────
   LOCATION 3 of 3  —  jQuery / JavaScript
   WHERE → Elementor > Theme Builder > Header/Footer
           OR via a plugin like WPCode:
           Code Snippets > Add New > "Run on Frontend"
           → Footer position

   WHAT  → Zero jQuery needed for Hero Section A.
           This section is 100% CSS-only.
           (No carousel, no counter, no accordion here.)

   WHEN YOU DO NEED JS (other sections):
   ─────────────────────────────────────────────────────
   Stats counter animation → add to footer:

   document.addEventListener('DOMContentLoaded', function () {
     const counters = document.querySelectorAll('.ps-count');
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
         if (!entry.isIntersecting) return;
         const el = entry.target;
         const target = parseFloat(el.dataset.target);
         const suffix = el.dataset.suffix || '';
         const prefix = el.dataset.prefix || '';
         const dec    = parseInt(el.dataset.decimal || '0');
         let cur = 0;
         const step = target / (1800 / 16);
         const t = setInterval(() => {
           cur += step;
           if (cur >= target) { cur = target; clearInterval(t); }
           el.textContent = prefix + (dec ? cur.toFixed(dec) : Math.floor(cur)) + suffix;
         }, 16);
         observer.unobserve(el);
       });
     }, { threshold: 0.3 });
     counters.forEach(c => observer.observe(c));
   });

   ─────────────────────────────────────────────────────
   Trust bar marquee → pure CSS animation, no JS needed.
   Brand logo carousel → pure CSS animation, no JS needed.
   FAQ accordion → no JS (use Elementor's Accordion widget).
   Testimonial carousel → use Elementor's Testimonial
     Carousel widget (Pro) or Essential Addons Carousel.
─────────────────────────────────────────────────────── */


/*
=======================================================
  ELEMENTOR WIDGET MAP — HERO SECTION A
  (Quick reference for what each widget is)
=======================================================

  SECTION  ── id: ps1a2b3c  ── #ps-hero-a
  │
  ├── COLUMN LEFT  ── id: ps2d3e4f  (50% width)
  │   │
  │   ├── [HTML]       id: ps4j5k6l  ── Eyebrow badge
  │   ├── [Heading]    id: ps5m6n7o  ── H1 (#ps-hero-h1)
  │   ├── [Text]       id: ps6p7q8r  ── Subtext paragraph
  │   ├── [Section]    id: ps7s8t9u  ── Buttons row (inner)
  │   │   ├── COLUMN   id: ps8v9w0x  ── auto width
  │   │   │   └── [Button]  id: psab2c3d  ── "Start Free Consultation"
  │   │   └── COLUMN   id: ps9y0z1a  ── auto width
  │   │       └── [Button]  id: psbc3d4e  ── "View Treatments" (outline)
  │   │
  │   └── [HTML]       id: pscd4e5f  ── Trust row (avatars + text)
  │
  └── COLUMN RIGHT  ── id: ps3g4h5i  (50% width, hidden tablet/mobile)
      └── [HTML]    id: psde5f6g  ── Hero visual (cards stack, self-contained CSS)

=======================================================
  HOW TO IMPORT THIS TEMPLATE
=======================================================

  1. In WordPress Admin → go to Elementor → My Templates
  2. Click "Import Templates" (top right)
  3. Upload:  pillsuite-hero-a-elementor.json
  4. Once imported, open your page in Elementor
  5. Click (+) to add a section → go to "My Templates"
  6. Find "PillSuite – Hero Section A" → Insert
  7. Add the CSS from LOCATION 1 to:
     Elementor → Site Settings → Custom CSS
  8. Add the CSS from LOCATION 2 to:
     Click the Section → Advanced → Custom CSS
  9. No jQuery needed for this section.

=======================================================
*/



.trust-marquee ul {
    display: flex !important;
    justify-content: space-between !important;
}

/* .trust-marquee .elementor-icon-list-item:after {width: 0%; border-radius: 100%; border-width: 2px !important; inset-inline-end: -30px !important;} */
.trust-bar-new-grad {
    background: linear-gradient(87deg, #393e75, #9b55a8 47.54%, #fa9860 95.08%);
}

@media screen and (max-width: 767px) {

    .trust-marquee {
        overflow: hidden;
        width: 100%;
    }

    .trust-marquee-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content;
        align-items: center;
    }

    .trust-marquee-track .elementor-icon-list-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        width: max-content !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .trust-marquee-track .elementor-icon-list-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-right: 30px !important;
    }
}

/* @keyframes horizontal-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
} */


header ul.hfe-nav-menu#menu-1-335a163,
header ul.hfe-nav-menu#menu-1-6ee907b {
    flex-wrap: nowrap;
}

/* home page */
.Brand-slider ul li {
    opacity: 0.4;
    transition: opacity 0.2s;
    border: 1px solid #1a3c341a;
    border-radius: 10px;
    padding: 10px 20px !important;
    background: white;
}

.Brand-slider::before {
    left: 0;
    background: linear-gradient(to right, var(--ps3-off-white), transparent);
}

.Brand-slider::after {
    right: 0;
    background: linear-gradient(to left, var(--ps3-off-white), transparent);
}

.Brand-slider::before,
.Brand-slider::after {
    content: '';
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.Brand-slider ul li:hover {
    opacity: 0.85;
}

.Brand-slider ul:hover {
    animation-play-state: paused;
}

.counter-num .elementor-counter-number-wrapper {
    font-family: var(--ps-serif);
}

.counter-num .elementor-counter-title {
    text-align: center;
}

.box-hover-text:hover .elementor-icon-box-title span {
    color: #fff !important;
}

.light-opacity {
    opacity: 0.75;
}

.max-w-180 .elementor-icon-box-description {
    max-width: 180px;
    margin: 0 auto;
}

/* hero-section */
.heading-style .elementor-heading-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.heading-style .elementor-heading-title::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #00897B;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* faq-section */
.faq-style.elementor-widget-n-accordion .e-n-accordion-item {
    border-bottom: none;
    outline: none;
}

.faq-style.elementor-widget-n-accordion .e-n-accordion-item:last-child {
    border-bottom: 1px solid #1A3C341A;
    padding-bottom: 20px;
}

/* Testimonial section */
.review-style .ue-text p span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    background: #d0f0ea;
    color: #006A62;
}

.review-style .uc_stars {
    flex-direction: row;
    order: 1;
}

.review-style .ue-text {
    display: flex;
    flex-direction: column;
    order: 2;
}

.review-style .owl-nav {
    position: relative;
}

.review-style .owl-dots {
    position: absolute;
    left: 10%;
}

.review-style .owl-nav button.owl-prev,
.review-style .owl-nav button.owl-next {
    top: 50% !important;
    margin-top: 32px;
}

.review-style .owl-nav button.owl-next {
    left: 5%;
}


/* Treatment product Section */
.treatment-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.treatment-title span {
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 2px;
    color: #00897B;
    font-weight: 600;
    text-transform: uppercase;
}

.treatment-title h2 {
    font-size: 44px;
    line-height: 54px;
    font-weight: 400;
    letter-spacing: -0.3px;
    margin: 10px 0px 0px;
    color: #1A3C34;
}

.treatment-title p {
    font-size: 12px;
    color: #5C7A73;
    margin-bottom: 12px;
}

.view-all-btn {
    font-size: 16px;
    line-height: 24px;
    border: 1px solid #1a3c341a;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    color: #1A3C34;
    transition: 0.3s;
}

.view-all-btn:hover {
    border-color: #1a3c34;
    background: #1a3c340a;
    color: #1A3C34;
}

/* Tabs */
.treatment-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.tab-btn {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-muted);
    background: #f0faf7;
    border: 1px solid #1a3c341a;
    cursor: pointer;
    padding: 8px 18px;
    border-radius: 100px;
    transition: all 0.2s;
}

.tab-btn:hover,
.tab-btn.active {
    background: #1a3c34;
    color: white;
    border-color: #1a3c34;
}

/* Grid */
.treatment-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.treatment-card {
    background: #F0FAF7;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.treatment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(26, 60, 52, 0.10);
    border-color: #1a3c341a;
    background: white;
}

.product-badge {
    display: inline-block;
    width: fit-content;
    font-size: 10px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 16px;
    background: #C8EDE8;
    color: #00574F;
}

.product-icon {
    margin-bottom: 16px;
}

.treatment-card h3 {
    font-family: var(--ps-sans);
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: #1A3C34;
    margin-bottom: 4px;
}

.treatment-card p {
    font-size: 12px;
    line-height: 22px;
    color: #5C7A73;
    margin-bottom: 12px;
}

/* .product-price {display: flex; gap: 10px; align-items: baseline;} */
/* .woocommerce-cart .cart_item .product-price{display: inline-block;} */
/* .product-price span{font-size: 20px; line-height: 30px; font-weight: 700; color: #1A3C34; margin-bottom: 4px;} */
.product-price p {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #5C7A73;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #d8dfdc;
    padding-top: 20px;
    margin-top: 10px;
}

.learn-btn {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    color: #1A3C34;
    text-decoration: none;
}

.plus-btn {
    width: 30px;
    height: 30px;
    background: #1A3C34;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.plus-btn:hover {
    background: #00897B;
    color: white;
}

.plus-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
    stroke-width: 2.5;
    fill: none;
}

@media (max-width: 1200px) {
    .review-style .owl-dots {
        left: 15%;
    }

    .review-style .owl-nav button.owl-next {
        left: 8%;
    }

    .custom-reviews-section .owl-dots {
        left: 15%;
    }

    .custom-reviews-section .owl-nav button.owl-next {
        left: 8%;
    }

    .treatment-products {
        grid-template-columns: repeat(3, 1fr);
    }

    .treatment-title h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .woocommerce-account #primary,
    .woocommerce-checkout #primary {
        margin: 64px 0 !important;
    }
}

@media (max-width: 767px) {
    .hfe-nav-menu__breakpoint-mobile .hfe-nav-menu__layout-horizontal .hfe-nav-menu {
        overflow: hidden;
    }

    header ul.hfe-nav-menu li:last-child {
        display: block;
    }

    .review-style .owl-dots {
        left: 33%;
    }

    .review-style .owl-nav button.owl-next {
        left: 16%;
    }

    .custom-reviews-section .owl-dots {
        left: 33%;
    }

    .custom-reviews-section .owl-nav button.owl-next {
        left: 16%;
    }

    .treatment-products {
        grid-template-columns: repeat(1, 1fr);
    }

    .treatment-title h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .answers.container.awotspacebtm h3 {
        padding: 30px 0px !important;
    }

    .woocommerce-checkout #primary {
        margin: 50px 0px !important;
    }

    .woocommerce-checkout .answers h3 {
        line-height: 30px;
    }
}

.woocommerce-checkout .woocommerce-checkout-review-order table tr td span.select2-selection__rendered {
    text-wrap: auto;
}

/* NEW WOOCOMMERCE DESIGN CSS  21-05 */
.woocommerce-page .ast-on-card-button {
    display: none;
}

.woocommerce-page.woocommerce-js nav.woocommerce-pagination ul li {
    border: 1px solid #2563eb;
    border-radius: 100px;
}

.woocommerce-page.woocommerce nav.woocommerce-pagination ul li span.current {
    color: #fff;
}

.woocommerce-pagination {
    padding: 35px 0px 0px;
}

.woocommerce-page.woocommerce nav.woocommerce-pagination ul li a:hover {
    color: #fff;
}

.woocommerce-js button.button {
    border-radius: 100px;
    margin-top: 15px;
}

.woocommerce-js.woocommerce-page ul.products li.product .button {
    padding: 15px 0px 0px;
    background: #ffffff00 !important;
    color: #0E9F70 !important;
    font-weight: 600;
    margin: 0px;
    width: 100%;
    align-items: center;
}

.woocommerce-page ul.products li.product {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e4e7ee;
    padding: 20px;
    border-radius: 10px;
}

.woocommerce-page ul.products li.product .price {
    color: #0b1e3d;
    border-bottom: 1px solid #e4e7ee;
    padding-bottom: 20px;
}

.woocommerce-js.woocommerce-page ul.products li.product .button::after {
    content: "";
    position: absolute;
    top: 70%;
    right: 0%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border-radius: 100px;
    padding: 15px;
    background-color: #ffffff00;
    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'%3E%3Cpath d='M24 9C24 8.20435 23.6839 7.44129 23.1213 6.87868C22.5587 6.31607 21.7956 6 21 6H18C18 4.4087 17.3679 2.88258 16.2426 1.75736C15.1174 0.632141 13.5913 0 12 0C10.4087 0 8.88258 0.632141 7.75736 1.75736C6.63214 2.88258 6 4.4087 6 6H3C2.20435 6 1.44129 6.31607 0.87868 6.87868C0.31607 7.44129 0 8.20435 0 9L0 19C0.00158786 20.3256 0.528882 21.5964 1.46622 22.5338C2.40356 23.4711 3.67441 23.9984 5 24H19C20.3256 23.9984 21.5964 23.4711 22.5338 22.5338C23.4711 21.5964 23.9984 20.3256 24 19V9ZM8 6C8 4.93913 8.42143 3.92172 9.17157 3.17157C9.92172 2.42143 10.9391 2 12 2C13.0609 2 14.0783 2.42143 14.8284 3.17157C15.5786 3.92172 16 4.93913 16 6H8Z' fill='%230E9F70'/%3E%3C/svg%3E");
}

.woocommerce-js.woocommerce-page ul.products li.product .button:hover::after {
    transform: translateY(-50%) translateX(3px);
}

.woocommerce-js ul.products li.product a img {
    height: 250px;
}

.woocommerce-page .woocommerce-ordering select {
    border: 1px solid #e4e7ee;
    border-radius: 100px;
}

.woocommerce-page ul.products li.product {
    margin-bottom: 0px;
}

.woocommerce-page ul.products {
    gap: 25px;
}

.woocommerce-page .woocommerce-loop-product__title {
    line-height: 25px;
}

.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger {
    background: #2563eb;
}

.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger:before,
.woocommerce-js div.product div.images .woocommerce-product-gallery__trigger:after {
    border-color: white;
    background: #fff;
}

.woocommerce-js a.button,
.woocommerce-js a.xoo-wsc-ft-btn {
    border-radius: 100px;
}

.woocommerce a.add_to_cart_button:focus {
    border-style: none;
}

.woocommerce-js .page-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
}

.archive .woocommerce-breadcrumb {
    text-align: center;
}

.woocommerce-js a.button.loading {
    opacity: 1;
}

.woocommerce-js a.button.loading::after {
    animation: none;
    transform: translateY(-50%) !important;
}

.woocommerce .related.products h2 {
    font-size: 35px;
    line-height: 34px;
}

/* .woocommerce-js h2{font-size: 40px; font-weight: 600; line-height: 50px; padding-bottom: 20px;} */
.answers.container.awotspacebtm h3 {
    font-size: 35px;
    font-weight: 600;
    line-height: 45px;
    padding: 50px 0px;
}

.woocommerce-page #order_review_heading {
    padding: 20px !important;
}

/* ======================== NEW DESIGN HOME PAGE CSS STARTS HERE ======================== */
a:focus {
    outline: none !important;
}

/* --------- Header CSS Starts -------- */
.login-text {
    display: block;
}

body.logged-in .login-text {
    display: none;
}

body.logged-in .my-acc {
    display: block;
}

.my-acc {
    display: none;
}

body.logged-in .my-acc {
    display: block;
}

.side-menu-before {
    order: 2;
}

.side-menu-after {
    order: 3;
}

.pillsuite-header-new.is-sticky .mobile-menu .open_side_menu {
    color: #0b1e3d;
}

.pillsuite-header-new.is-sticky .trust-bar {
    display: none;
    visibility: hidden;
    opacity: 0;
}

.pillsuite-inner-header,
.megamenu-card {
    backdrop-filter: blur(12px);
    transition: 0.3s;
}

.button-effect a,
.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 20px -6px rgba(16, 185, 129, .55);
}

.button-effect a:hover,
.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -6px rgba(16, 185, 129, .55);
}

.button-effect-1 a:hover,
.wlc-pc-btn:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -6px rgb(2 113 249 / 55%);
}

.button-effect-1 a span.elementor-button-icon svg {
    height: 14px;
    width: 14px;
}

.button-effect-1 a span.elementor-button-icon,
.wlc-pc-btn svg {
    transition: transform .2s ease;
}

.button-effect-1 a:hover span.elementor-button-icon,
.wlc-pc-btn:hover svg {
    transform: translateX(3px);
}

.button-border-effect a:hover {
    box-shadow: none;
}

.button-effect a span.elementor-button-icon svg,
.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit svg {
    height: 14px;
    width: 14px;
}

.button-effect a span.elementor-button-icon,
.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit svg,
.treat-box .elementor-icon-box-wrapper .elementor-icon-box-icon span.elementor-icon,
.home-blog a::after,
.read-more a::after {
    transition: transform .2s ease;
}

.button-effect a:hover span.elementor-button-icon,
.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit:hover svg,
.treat-box:hover .elementor-icon-box-wrapper .elementor-icon-box-icon span.elementor-icon svg,
.read-more a:hover::after,
.home-blog a:hover::after {
    transform: translateX(3px);
}

.treat-box:hover .elementor-icon-box-icon .elementor-icon svg,
.treat-box:hover .elementor-icon-box-content .elementor-icon-box-title {
    color: #3b6efc !important;
    fill: #3b6efc;
}

.pillsuite-header-new.uae-sticky-active,
.pillsuite-header-new.sticky-header {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.pillsuite-header-new.is-sticky .sticky-nav-menu a.hfe-menu-item,
.pillsuite-header-new.is-sticky .sticky-text a {
    color: #3A4255 !important;
}

.pillsuite-header-new.is-sticky .sticky-nav-menu a.hfe-menu-item:hover,
.pillsuite-header-new.is-sticky .sticky-text a:hover {
    color: #2563EB !important;
}

.pillsuite-header-new .Header-W100 nav {
    width: 100% !important;
}

#menu-item-2894 {
    position: relative;
}

#menu-item-2894 .my-mega-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 190%;
    z-index: 9999;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    background: #ffffff00;
    box-sizing: border-box;
    min-width: 500px;
    width: 100%;
}

#menu-item-2894 .sub-menu {
    display: none;
}

#menu-item-2894:hover>.my-mega-menu {
    visibility: visible;
    opacity: 1;
}

.mob-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;

    transform: translateX(100%);
    transition: 0.3s ease;

    z-index: 9999999;
}

.mob-panel.active {
    transform: translateX(0);
}

#menu-1-335a163 li a.hfe-menu-item,
#menu-1-6ee907b li a.hfe-menu-item {
    position: relative;
    width: auto !important;
}

#menu-1-335a163 li a.hfe-menu-item:hover::after,
#menu-1-6ee907b li a.hfe-menu-item:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left !important;
}

#menu-1-335a163 li a.hfe-menu-item::after,
#menu-1-6ee907b li a.hfe-menu-item::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #3B6EFC;
    transition: transform .25s ease-out !important;
    transform-origin: bottom right !important;
}

#menu-1-335a163 li.current-menu-item a.hfe-menu-item:active::after,
#menu-1-6ee907b li.current-menu-item a.hfe-menu-item:active::after {
    transform: scaleX(1);
    transform-origin: bottom left !important;
}

#menu-1-335a163 li.current-menu-item a.hfe-menu-item::after,
#menu-1-6ee907b li.current-menu-item a.hfe-menu-item::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #3B6EFC;
    transition: transform .25s ease-out !important;
    transform-origin: bottom right !important;
    opacity: 1;
}

/* Hero section starts  */
.main_hero-bg {
    /*background-image: linear-gradient(90deg, rgba(11, 30, 61, 0.9) 0%, rgba(11, 30, 61, 0.78) 30%, rgba(11, 30, 61, 0.42) 58%, rgba(11, 30, 61, 0.12) 82%, rgba(11, 30, 61, 0) 95%), linear-gradient(rgba(11, 30, 61, 0.45) 0%, rgba(11, 30, 61, 0) 25%, rgba(11, 30, 61, 0.4) 100%), url("https://pillsuite.co.uk/wp-content/uploads/2026/05/hero_bg-1.jpg");*/

    /* background-size: cover; background-position: 65% 30%; transition: background-image .4s ease;*/
}

.sub-head-main {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sub-heading svg {
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .25);
}

/* Services section  */
.service-custom-card {
    box-shadow: 0 8px 24px -8px rgba(11, 30, 61, .12), 0 2px 6px -2px rgba(11, 30, 61, .06);
    cursor: pointer;
    aspect-ratio: 1 / 1.04;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.service-custom-card:hover {
    box-shadow: 0 24px 60px -20px rgba(11, 30, 61, .20), 0 8px 16px -8px rgba(11, 30, 61, .10);
}

.service-custom-card::before {
    background: linear-gradient(180deg, rgba(10, 14, 31, 0) 30%, rgba(10, 14, 31, .30) 60%, rgba(10, 14, 31, .78) 100%);
}

/* testimonials section starts  */
.custon-ratings .e-rating-wrapper {
    display: flex;
    gap: 4px;
}

.custon-ratings .e-icon .e-icon-wrapper {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px;
    background: #00B67A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.container-shadow {
    box-shadow: 0 1px 2px rgba(11, 30, 61, .05), 0 1px 1px rgba(11, 30, 61, .03);
}

.why-icon .elementor-icon {
    border-color: #DBE6FE !important;
}

.why-icon-green .elementor-icon {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, .55) !important;
}

.why-cards:hover {
    box-shadow: 0 24px 60px -20px rgba(11, 30, 61, .20), 0 8px 16px -8px rgba(11, 30, 61, .10);
}

/* HOW IT WORKS SECTION  */
.steps-cards::before {
    content: '';
    position: absolute;
    top: 96px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(96, 165, 250, .4) 50%, transparent 0);
    background-size: 14px 2px;
    background-repeat: repeat-x;
    z-index: 0;
    width: 912px;
}

.step-card {
    position: relative;
}

.step-icon .elementor-icon {
    background: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
    box-shadow: 0 12px 28px -8px rgba(37, 99, 235, .5);
}

.step-icon-green .elementor-icon {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    box-shadow: 0 12px 28px -8px rgba(16, 185, 129, .55);
}

.step-card-inner {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.step-number {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 92px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(96, 165, 250, .10);
    z-index: -1;
    pointer-events: none;
}

.step-card:hover .step-card-inner {
    transform: translateY(-6px);
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

/* bottom cta section  */
.bottom-cta {
    background: linear-gradient(135deg, #0B1E3D 0%, #142a8a 60%, #2563EB 100%);
}

.cta-eligibility {
    background: radial-gradient(circle at 78% 50%, rgba(79, 70, 229, 0.55) 0%, rgba(30, 27, 75, 0) 60%),
        linear-gradient(135deg, #0B0F3D 0%, #0A0B2E 100%);
}

.cta-weight-loss {
    background: linear-gradient(135deg, #4F52F5 0%, #4338CA 55%, #2E2A9C 100%);
}


.custom-reviews-section .owl-stage-outer {
    padding: 10px 0px 60px;
}

.custom-reviews-section .uc_quote_info {
    gap: 14px !important;
}

.custom-reviews-section .uc_stars {
    order: 1;
    gap: 4px !important;
}

.custom-reviews-section .ue-text {
    order: 2;
}

.custom-reviews-section .uc_author {
    order: 3;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-top-color: #E4E7EE;
}

.custom-reviews-section .ue-text p {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0px;
}

.custom-reviews-section .ue-text .review-txt-bold {
    font-size: 19px;
    line-height: 22px;
    font-weight: 700;
    letter-spacing: -0.38px;
    color: #0b1e3d;
}

.custom-reviews-section .owl-nav {
    position: relative;
}

.custom-reviews-section .owl-dots {
    position: absolute;
    left: 10%;
}

.custom-reviews-section .owl-nav button.owl-prev,
.custom-reviews-section .owl-nav button.owl-next {
    top: 50% !important;
    margin-top: 0px;
}

.custom-reviews-section .owl-nav button.owl-next {
    left: 5%;
}

.custom-reviews-section .uc_quote_item:hover {
    box-shadow: 0 24px 60px -20px rgba(11, 30, 61, .20), 0 8px 16px -8px rgba(11, 30, 61, .10) !important;
    transform: translateY(-3px);
    border-color: #D1D6E2 !important;
}

/* gradient reviews card css  */
.custom-reviews-section .owl-item:nth-child(even) .uc_quote_item {
    background: linear-gradient(180deg, #0B1E3D 0%, #142a8a 100%) !important;
    background-color: transparent !important;
}

.custom-reviews-section .owl-item:nth-child(even) .uc_quote_item .review-txt-bold,
.custom-reviews-section .owl-item:nth-child(even) .uc_quote_item .ue_title {
    color: #FFFFFF;
}

.custom-reviews-section .owl-item:nth-child(even) .uc_quote_item .ue-text p {
    color: rgba(255, 255, 255, .86);
}

.custom-reviews-section .owl-item:nth-child(even) .uc_quote_item .ue_subtitle {
    color: rgba(255, 255, 255, .65);
}

.footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr !important;
}

/* treatment landing page */
.heading-padding h2 {
    padding-bottom: 0;
}

/* MY ACCOUNT PAGE CSS STARTS  */
#customer_login {
    display: flex;
    justify-content: center;
}

.woocommerce-js .cart_totals.calculated_shipping h2 {
    text-align: left !important;
}

#customer_login h2,
.woocommerce-js .cart_totals.calculated_shipping h2 {
    text-align: center;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    color: #0B1E3D;
    margin-bottom: 0px;
}

#customer_login button {
    width: 100%;
}

#customer_login .woocommerce-form-row .password-input button.show-password-input::after {
    float: right;
}

#customer_login p.woocommerce-LostPassword.lost_password {
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
}

/* new tretment detil page */
.faq-style-01 .e-n-accordion-item {
    border: 1px solid #1A3C341A;
    border-radius: 17px;
    box-shadow: 0px 4px 20px 0px #0000000f;
}

.faq-style-01 .e-n-accordion-item-title-icon .e-opened,
.faq-style-01 .e-n-accordion-item-title-icon .e-closed {
    border-radius: 8px;
    background: #ebf0fe;
    width: 31px;
    height: 31px;
    justify-content: center;
    align-items: center;
}

.stage-card {
    position: relative;
    overflow: hidden;
}

.stage-card::after,
.Icon-accordtion .img-switcher-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11, 27, 63, 0) 0%, rgba(11, 27, 63, 0) 10%, rgba(11, 27, 63, 0.55) 64%, rgba(11, 27, 63, 0.92) 100%);
    border-radius: 18px;
}


/* header width  */
@media (max-width: 1280px) {
    .Header-W100 {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    .service-custom-card {
        aspect-ratio: 16 / 9;
    }

    .steps-cards::before {
        content: none;
        display: none;
    }

    .full-content {
        grid-column: span 2;
    }

    .custom-reviews-section .owl-dots {
        left: 15%;
    }

    .custom-reviews-section .owl-nav button.owl-next {
        left: 8%;
    }

    .custom-reviews-section .owl-stage-outer {
        padding: 10px 0px 50px;
    }

    #menu-item-2894 .my-mega-menu {
        display: none;
    }

    .contact-form-grid .cf7-submit-btn::after {
        display: none;
    }

    #menu-header-primary li.current-menu-item a.menu-link {
        background-color: #FFFFFF !important;
        color: #2563EB !important;
    }
}

@media (max-width: 767px) {
    .button-effect a span.elementor-button-icon svg {
        height: 12px;
        width: 12px;
    }

    .service-custom-card {
        aspect-ratio: 1 / 1.04;
    }

    .custon-ratings .e-icon .e-icon-wrapper {
        width: 16px !important;
        height: 17px !important;
    }

    .custom-reviews-section .owl-dots {
        left: 40%;
    }

    .custom-reviews-section .owl-nav button.owl-next {
        left: 20%;
    }

    .woocommerce-page ul.products {
        grid-template-columns: auto !important;
    }

    #customer_login p.woocommerce-LostPassword.lost_password {
        flex-direction: column;
    }

    #customer_login p.woocommerce-LostPassword.lost_password br {
        display: none;
    }
}


/* contact page */
.badge-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2563eb38;
    color: #2563eb;
    font-size: 11.2px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
    letter-spacing: 0.448px;
    line-height: 14px;
}

.badge-open::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;
    display: inline-block;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}

.contact-form-grid .full-width {
    grid-column: 1 / -1;
}

.contact-form-grid .form-group p {
    margin-bottom: 0px;
}

.contact-form-grid .form-group select {
    background-image: none;
}

.contact-form-grid .button-effect .wpcf7-submit {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 20px -6px rgba(16, 185, 129, .55);
}

.contact-form-grid .cf7-submit-btn .wpcf7-submit {
    position: relative;
}

.cf7-submit-btn button.wpcf7-form-control.wpcf7-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 100%;
}

/* custom product slider  */
.slider-container .slick-track {
    height: 97%;
}

.customproductslider .slide {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
}

/*For Treatment page's slider*/
body .customproductslider .slider {
    display: flex;
}

/* White Card Styling */
body .customproductslider .slider-container {
    max-width: 1200px;
    margin: auto;
}

body .customproductslider .slider {
    display: flex;
}

/* White Card Styling */
body .customproductslider .slide {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 10px;
    width: 350px;
}

body .customproductslider .slide img {
    max-width: 100%;
    border-radius: 8px;
    display: block;
    margin-bottom: 15px;
    min-height: 300px;
    max-height: 300px;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

body .customproductslider .slick-dots {
    bottom: -45px;
}

body .customproductslider .slick-prev {
    left: -40px;
}

body .customproductslider .slick-next {
    right: -40px;
}

body .customproductslider .slide h3 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 5px;
}

body .customproductslider .slide p {
    font-size: 14px;
    color: #555;
}

body .customproductslider .slider-container .slick-dots {
    padding-left: 0px;
}

body .customproductslider .features {
    list-style: none;
    padding: 0 !important;
    font-size: 14px;
    color: #333;
    margin: 0;
}

body .customproductslider .features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-left: 25px;
    background-image: url('/wp-content/uploads/2026/05/bullet.png');
    background-repeat: no-repeat;
    background-size: 17px;
    color: #052B31;
    font-size: 14px;
    line-height: 21px;
}

body .customproductslider .price-section span:last-child {
    font-weight: 600;
}

body .customproductslider .price-section {
    margin-top: 10px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    color: #000;
    gap: 10px;
}

body .customproductslider .dosage {
    margin-top: 10px;
    padding-bottom: 10px;
    font-size: 17px;
    cursor: pointer;
    border-top: 3px solid #2563eb;
    /* text-align: center; */
}

body .customproductslider .dosage-tabs {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0;
    border-bottom: 3px solid #c7c7c7;
}

body .customproductslider .tab-button {
    background: none;
    border: none;
    padding: 5px 15px 10px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 400;
    box-shadow: none;
    color: #052B31;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    line-height: normal;
}

body .customproductslider .tab-button.active {
    border-bottom: 3px solid #2563eb;
    border-radius: 0px;
    display: inline-flex;
    margin-bottom: -3px;
}

body .customproductslider .dosage-content {
    display: none;
}

body .customproductslider .dosage-content.active {
    display: block;
    margin-top: 10px;
}

/* Slick Arrows */
body .customproductslider .slick-prev,
body .customproductslider .slick-next {
    background: #00000000;
    color: white;
    border-radius: 50%;
    padding: 4px 0 0 0;
}

body .customproductslider .slick-prev:hover,
body .customproductslider .slick-next:hover {
    background: #2564eb00;
}

.customproductslider .grid-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.customproductslider .grid-layout .slide {
    width: calc(33.33% - 20px);
}

.customproductslider .otherr-dosage {
    padding-top: 10px;
    font-weight: 600;
}

.customproductslider .subscription-dosage {
    color: #d40069;
    padding-top: 10px;
    font-weight: 500;
}

.slick-dots li button {
    box-shadow: none;
}

.slick-dots li button:before {
    font-size: 10px;
}

.slide .elementor-button {
    background-color: #12b981;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    padding: 13px 16px;
    width: 100%;
    text-decoration: none !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 20px -6px rgba(16, 185, 129, .55);
}

.slide .elementor-button:hover {
    background-color: #0e9f70;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -6px rgba(16, 185, 129, .55);
    transform: translateY(-1px);
}

/* Previous Arrow */
.customproductslider .slick-prev {
    background-image: url("https://pillsuite.co.uk/wp-content/uploads/2026/05/chevron-left-svgrepo-com-1.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 40px !important;
    height: 40px !important;
}

/* Next Arrow */
.customproductslider .slick-next {
    background-image: url("https://pillsuite.co.uk/wp-content/uploads/2026/05/chevron-right-svgrepo-com-1.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 30px !important;
    height: 30px !important;
}

body .customproductslider .slick-slider {
    margin-bottom: 0px;
}

/* BMI calculator css */
/* The width is owned by the wrapper now, so every part of the calculator
 * lines up instead of the card sitting at 640px inside a full-width block. */
.wlc-bmi-component {
    max-width: 640px;
    margin-inline: auto;
}

.wlc-bmi-card {
    background: #FFFFFF;
    border: 1px solid #E8E9F0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 20, 60, 0.06);
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    font-family: 'Poppins', sans-serif;
}

.wlc-bmi-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 220px;
}

.wlc-bmi-field {
    width: 100%;
}

.wlc-bmi-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.wlc-bmi-label-row label {
    font-size: 16px;
    font-weight: 700;
    color: #14142B;
}

.wlc-bmi-value {
    font-size: 16px;
    font-weight: 700;
    color: #3a52f7;
}

.wlc-bmi-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #3a52f7 0%, #3a52f7 var(--fill, 50%), #cacaca var(--fill, 50%), #cacaca 100%);
    outline: none;
    cursor: pointer;
}

.wlc-bmi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3a52f7;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.4);
    cursor: pointer;
}

.wlc-bmi-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3a52f7;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.4);
    cursor: pointer;
}

.wlc-bmi-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}

.wlc-bmi-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 220px;
    flex-shrink: 0;
}

.wlc-bmi-circle {
    width: 150px;
    height: 155px;
    border-radius: 50%;
    border: 8px solid #3a52f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.wlc-bmi-circle-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #767dad;
    text-transform: uppercase;
}

.wlc-bmi-circle-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: #14142B;
}

.wlc-bmi-circle-category {
    font-size: 15px;
    font-weight: 700;
    color: #3a52f7;
}

.wlc-bmi-note {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #6a71a5;
}

/* BMI css end  */

/* Treatment product css */
.wlc-pc-flex {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: repeat(var(--wlc-pc-columns, 2), 1fr);
    gap: 24px;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.wlc-pc-card {
    background: #fff;
    border: 1px solid #dee0e9;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(20, 20, 60, .06);
    padding: 32px;
    display: flex;
    flex-direction: column;
    flex-basis: 40%;
    flex: 0 1 calc((100% - 2 * 24px) / 3);
    /* 3 per row, 2 gaps subtracted */
}

.wlc-pc-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 18px;
}

/* Height and image caps matched to .compare-card .prod-photo in the Compare
 * Treatments section below, so square product shots render at the same size in
 * both. */
.wlc-pc-image {
    width: 100%;
    height: 219px;
    flex-shrink: 0;
    border-radius: 20px;
    background: #F5F5F8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 12px 45px -10px rgba(20, 27, 63, .35), 0 2px 6px rgba(20, 27, 63, .12);
}

.wlc-pc-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Product images in both sections link to their own product page. The anchor
 * must not disturb the existing flex centring of either box. */
.wlc-pc-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.compare-card .prod-photo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.compare-card .prod-photo a img {
    max-width: 100%;
    max-height: 100%;
}

.wlc-pc-header-text {
    min-width: 0;
}

.wlc-pc-title {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    color: #14142B;
    margin: 0 0 4px;
}

.wlc-pc-subtitle {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: #6a72a6;
    margin: 0;
}

.wlc-pc-features {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wlc-pc-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
    color: #474f7b;
}

.wlc-pc-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #465ef8;
    margin-top: 2px;
}

.wlc-pc-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #EEEEF3;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.wlc-pc-from {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #737aab;
    margin-bottom: 2px;
}

.wlc-pc-amount {
    font-size: 26px;
    font-weight: 700;
    color: #14142B;
}

.wlc-pc-suffix {
    font-size: 13px;
    font-weight: 700;
    color: #737aab;
    margin-left: 2px;
}

.wlc-pc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #E7E9FC;
    color: #3a52f7;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease;
}

.wlc-pc-btn:hover {
    background: #2563EB;
    color: #fff;
}

/* Treatment product css end */

/* Responsive */
@media(max-width:1024px) {
    .wlc-bmi-card {
        display: block;
        flex-direction: column;
        padding: 24px;
    }

    .wlc-bmi-right {
        width: 100%;
        margin-top: 20px;
    }

    .wlc-pc-card {
        flex: 0 1 calc((100% - 24px) / 2);
        /* 2 per row, 1 gap subtracted */
    }
}

@media (max-width: 768px) {
    .customproductslider .grid-layout .slide {
        width: calc(50% - 20px);
    }
}

@media (max-width: 767px) {
    .customproductslider .grid-layout .slide {
        width: 100%;
    }

    .customproductslider .slick-next {
        width: 21px !important;
        height: 21px !important;
    }

    body .customproductslider .slick-next {
        right: -21px;
    }

    .customproductslider .slick-prev {
        width: 25px !important;
        height: 25px !important;
    }

    body .customproductslider .slick-prev {
        left: -25px;
    }

    body .customproductslider .slick-dots {
        bottom: -30px;
    }

    .wlc-pc-card {
        flex: 1 1 100%;
    }
	.sticky-image-col {
        position: relative !important;
        top: auto !important;
    }

}

/* Remove default slick icon */
.customproductslider .slick-prev:before,
.customproductslider .slick-next:before {
    content: "" !important;
}

/*  treatment pages css  */
.treatment-admin .section-title h2 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

#treatmentManage .row .col-md-12.section-title {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.col-md-12.pb-20.section-title {
    text-align: center;
    padding-bottom: 30px;
}

/* product detail page */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: none;
}

.single-product .entry-summary .woocommerce-breadcrumb,
.single-product div.product div.summary .single-product-category,
.single-product .entry-summary .product_meta .posted_in {
    display: none;
}

.single-product div.product form.cart .variations {
    border-bottom: 0px;
}

.single-product div.product .product_meta {
    margin-top: 15px;
}

.single-product div.product form.cart .variations td.value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.single-product div.product form.cart .single_variation_wrap .single_variation {
    margin-bottom: 15px;
}

/* blog page */
/* .blog .post-content h2.entry-title {font-size: 25px; line-height: 35px;} */
.home-blog .hfe-post-image img {
    border-radius: 10px !important;
}

.read-more a,
.home-blog .hfe-read-more,
.treat-box .elementor-icon-box-wrapper {
    display: flex;
    align-items: center !important;
}

.treat-box {
    display: block;
}

/* Header menu item wrap */
.pillsuite-inner-header .hfe-menu-item {
    white-space: nowrap;
    text-wrap: nowrap;
}

/* blog page icon */
.read-more a::after,
.hfe-read-more::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

body.archive .ast-archive-description .ast-archive-title,
body.archive .ast-archive-description .ast-archive-title *,
header.entry-header .entry-title {
    font-weight: 700;
    letter-spacing: -1.96px;
}

.woocommerce-js button.button:disabled,
.woocommerce-js button.button:disabled[disabled] {
    padding: 13px 22px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    font-size: 15px;
    line-height: 21px;
}

@media (max-width: 1199px) {

    .ast-plain-container.ast-no-sidebar #primary,
    .ast-separate-container #primary {
        margin-top: 50px;
        margin-bottom: 50px;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .woocommerce-js div.product .woocommerce-tabs {
        margin-bottom: 50px;
        padding-top: 0px;
    }
}

.compare-card {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #E3E7F5;
    overflow: hidden;
    box-shadow: 0 20px 45px -20px rgba(20, 27, 63, .18);
}

/* scroll wrapper so the border-radius on .compare-card never gets clipped/cut,
     and the table can scroll sideways on small screens instead of squashing */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-card table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    margin-bottom: 0px;
    border-width: 0px;
}

.compare-card thead th {
    padding: 34px 24px 26px;
    vertical-align: top;
}

.compare-card thead th.blank {
    background: #FBFCFF;
}

.compare-card thead th.mounjaro-head {
    background: #fff;
}

.compare-card .prod-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.compare-card .prod-photo {
    width: 300px;
    height: 219px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 45px -10px rgba(20, 27, 63, .35), 0 2px 6px rgba(20, 27, 63, .12);
}

.compare-card .prod-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.compare-card .prod-name {
    font-size: 24px;
    font-weight: 700;
    color: #070F3B;
    letter-spacing: -.2px;
}

.compare-card .prod-generic {
    font-size: 12px;
    font-weight: 500;
    color: #7078AA;
    margin-top: -13px;
}

.compare-card tbody td {
    padding: 22px 24px;
    text-align: center;
    font-size: 16px;
    color: #3C4674;
    border-top: 1px solid #EDEFF6;
}

.compare-card tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: #000;
    font-size: 16px;
    line-height: 20px;
}

.compare-card tbody tr td:nth-child(2) {
    background: #fff;
}

.compare-card thead th.mounjaro-head,
.compare-card tbody td:nth-child(2) {
    border-left: 1px solid #EDEFF6;
    border-right: 1px solid #EDEFF6;
}

@media (max-width:640px) {
    .compare-card thead th {
        padding: 24px 16px 18px;
    }

    .compare-card tbody td {
        padding: 16px 14px;
        font-size: 13px;
        line-height: 20px;
    }

    .compare-card .prod-photo {
        width: 140px;
        height: 105px;
    }

    .compare-card .prod-name {
        font-size: 16px;
    }
}

.img-switcher-item.pill-item {
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    min-height: 550px;
}

.img-switcher-item.pill-item.is-active {
    display: flex;
}

.pill-item>* {
    margin: 20px;
}

/* hero-section weight loss treatment landing page */
.main_hero-bg-1::before {
    background: linear-gradient(60deg, rgba(19, 28, 66, 0.92) 0%, rgba(10, 35, 66, 0.82) 11%, rgba(19, 28, 66, 0.62) 56%, rgba(19, 28, 66, 0.30) 100%, rgba(19, 28, 66, 0.08) 54%, rgba(19, 20, 66, 0) 45%);
}


/* hero-section weight loss treatment landing page end */
/* image FAQ */

.icon-accordtion-style .ue_icon_holder .ue_icon i::before {
    display: none;
}

.icon-accordtion-style .ue_icon_holder .ue_icon {
    position: relative;
    width: 50px;
    height: 50px;
    display: block !important;
    overflow: hidden;
}

.icon-accordtion-style .ue_icon_holder .ue_icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(11, 27, 63, 0) 0%, rgba(11, 27, 63, 0) 10%, rgba(11, 27, 63, .55) 64%, rgba(11, 27, 63, .92) 100%);
}

.icon-accordtion-style #uc_uc_icon_accordion_elementor_23f0caa_item1 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/07/img-acco-01.jpg") center/cover no-repeat;
}

.icon-accordtion-style #uc_uc_icon_accordion_elementor_23f0caa_item2 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/07/img-acco-02.jpg") center/cover no-repeat;
}

.icon-accordtion-style #uc_uc_icon_accordion_elementor_23f0caa_item3 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/07/img-acco-03.jpg") center/cover no-repeat;
}

.icon-accordtion-style #uc_uc_icon_accordion_elementor_23f0caa_item4 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/07/img-acco-04.jpg") center/cover no-repeat;
}
.sticky-image-col {position: sticky; top: 0px; align-self: flex-start;}
body.page-id-8131 {overflow-x: visible !important;}
/* Same reason as 8131 above: html{overflow-x:hidden} turns the root into a
 * scroll container, which silently disables position:sticky on the
 * accordion's right-hand image panel. Needed per page that uses it. */
body.page-id-4333 {overflow-x: visible !important;}



/* --------- Account link: icon instead of text ---------
 * Replaces the "Login / Register" and "My Account" text links in the header
 * with icons. The logged-in/logged-out swap is handled by the existing
 * .login-text / .my-acc rules above (body.logged-in) - untouched here.
 *
 * The label text stays in the DOM and is pushed off-screen with text-indent,
 * so screen readers still announce "Login / Register" and "My Account".
 * Do not replace this with display:none - that would remove the accessible name.
 *
 * background-color: currentColor + mask means the icon inherits whatever
 * colour the link already has, including the sticky-header override
 * (.pillsuite-header-new.is-sticky .sticky-text a) and its hover colour.
 * ----------------------------------------------------------------------- */
.login-text .elementor-heading-title a,
.my-acc .elementor-heading-title a {
    display: inline-block;
    width: 44px;
    height: 44px;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--ps-acct-icon) center / 23px 23px no-repeat;
            mask: var(--ps-acct-icon) center / 23px 23px no-repeat;
}

.login-text .elementor-heading-title a {
    --ps-acct-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='12'%20cy='7'%20r='4'/%3E%3C/svg%3E");
}

.my-acc .elementor-heading-title a {
    --ps-acct-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3.2'/%3E%3Cpath%20d='M6.2%2018.4a6.5%206.5%200%200%201%2011.6%200'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {

    .login-text .elementor-heading-title a,
    .my-acc .elementor-heading-title a {
        width: 40px;
        height: 40px;
        -webkit-mask-size: 21px 21px;
                mask-size: 21px 21px;
    }
}


/* --------- "Coming soon" treatment entries ---------
 * Applied to inert tiles in the header mega menu (3625) and the
 * /online-treatments/ listing (4317). The tiles are plain <div> with no
 * link; pointer-events:none is the belt-and-braces guarantee they stay
 * unclickable even if a link is reintroduced in the editor.
 * The footer uses a plain "(coming soon)" text suffix instead - the
 * icon-list widget has no room for a badge.
 * ------------------------------------------------------------------- */
.ps-coming-soon {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}

.ps-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 100px;
    background: #E7E9FC;
    color: #3a52f7;
    letter-spacing: .01em;
}

.wlc-pc-image {
    background: #ffffff;
}

/* ---------------------------------------------------------------------------
 * BMI calculator - eligibility outcome, category scale and guidance.
 *
 * Styling keys off [data-state] rather than the wording, so changing the copy
 * can never turn a refusal green. Green is used only for the eligible state
 * and nowhere else in this component, so it reads as a verdict rather than
 * as decoration.
 * ------------------------------------------------------------------------- */

.wlc-bmi-outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid #e4e6f0;
    background: #F5F6FB;
    color: #5b6182;
    font-size: 14.5px;
    line-height: 1.55;
}

.wlc-bmi-outcome-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: #A9AFD6;
    position: relative;
}

.wlc-bmi-outcome-icon::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    width: 8px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.wlc-bmi-outcome[data-state="eligible"] {
    background: #E9F7EF;
    border-color: #A8DCC0;
    color: #17603A;
}

.wlc-bmi-outcome[data-state="eligible"] .wlc-bmi-outcome-icon {
    background: #17603A;
}

/* Tick, drawn rather than an image so it inherits the state colour. */
.wlc-bmi-outcome[data-state="eligible"] .wlc-bmi-outcome-icon::after {
    left: 6px;
    top: 5px;
    width: 5px;
    height: 9px;
    background: transparent;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: rotate(45deg);
}

.wlc-bmi-outcome[data-state="conditional"] {
    background: #FFF6E8;
    border-color: #F0C98A;
    color: #7A4E08;
}

.wlc-bmi-outcome[data-state="conditional"] .wlc-bmi-outcome-icon {
    background: #B8801F;
}

.wlc-bmi-outcome[data-state="conditional"] .wlc-bmi-outcome-icon::after {
    left: 9px;
    top: 4px;
    width: 2px;
    height: 7px;
    border-radius: 1px;
    box-shadow: 0 9px 0 #fff;
}

.wlc-bmi-cats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.wlc-bmi-cat {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e4e6f0;
    border-radius: 10px;
    background: #fff;
    color: #5b6182;
    font-size: 12.5px;
    line-height: 1.35;
    list-style: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.wlc-bmi-cat b {
    display: block;
    font-size: 13.5px;
    color: #14142B;
    margin-bottom: 2px;
}

.wlc-bmi-cat.is-current {
    background: #3a52f7;
    border-color: #3a52f7;
    color: #fff;
}

.wlc-bmi-cat.is-current b {
    color: #fff;
}

.wlc-bmi-meaning {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid #e4e6f0;
    background: #F5F6FB;
    color: #5b6182;
    font-size: 13px;
    line-height: 1.6;
}

.wlc-bmi-meaning strong {
    color: #14142B;
}

@media (max-width: 640px) {
    .wlc-bmi-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * Product cards as a horizontal row.
 *
 * Opt-in via a `wlc-pc-scroll` class on the section, so it applies only where
 * the catalogue is too long to wrap sensibly - erectile dysfunction has nine
 * products, which the default 3-per-row grid turns into three stacked rows.
 * Weight Loss (six) and hair loss (two) keep the wrapping grid.
 *
 * The class sits on the Elementor section rather than being keyed to a page
 * ID, so it survives the page being duplicated, renamed or re-created.
 * ------------------------------------------------------------------------- */

.wlc-pc-scroll .wlc-pc-flex {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Room for the scrollbar plus the cards' own drop shadow, which is
     * otherwise clipped by the scroll container. */
    padding: 4px 4px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.wlc-pc-scroll .wlc-pc-card {
    /* Fixed basis, and shrink disabled - without it flex squeezes nine cards
     * into the visible width instead of overflowing, and nothing scrolls. */
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* A scrollable region has to be reachable without a mouse. Browsers only make
 * one focusable automatically when it actually overflows, which is exactly
 * when it needs to be, so this just makes the focus ring visible. */
.wlc-pc-scroll .wlc-pc-flex:focus-visible {
    outline: 2px solid #3a52f7;
    outline-offset: 4px;
}

.wlc-pc-scroll .wlc-pc-flex::-webkit-scrollbar {
    height: 8px;
}

.wlc-pc-scroll .wlc-pc-flex::-webkit-scrollbar-track {
    background: #F5F6FB;
    border-radius: 4px;
}

.wlc-pc-scroll .wlc-pc-flex::-webkit-scrollbar-thumb {
    background: #C9CEEA;
    border-radius: 4px;
}

.wlc-pc-scroll .wlc-pc-flex::-webkit-scrollbar-thumb:hover {
    background: #A9AFD6;
}

@media (max-width: 640px) {
    .wlc-pc-scroll .wlc-pc-card {
        flex-basis: 82vw;
    }
}

/* ---------------------------------------------------------------------------
 * Erectile dysfunction page (4333) only.
 *
 * Targeted by Elementor element ID rather than a class, because Elementor does
 * not emit `_css_classes` for containers - only for widgets. The IDs are
 * stable in the saved page data. If that section is ever rebuilt they change,
 * so this block has to be revisited alongside it.
 * ------------------------------------------------------------------------- */

/* --- one prescriber card, centred --- */

/* --- GPhC badge: legible, on its own white plate (ED + Hair Loss) --- */

/* The mark is an 80x38 SVG. It needs a white plate to read against the card's
 * dark navy, but the plate was overpowering the name beside it, so the padding
 * and the widget's own max-width both came down a step. */
.ps-gphc-badge img {
    width: 100%;
    max-width: 170px;
    height: auto;
    background: #ffffff;
    padding: 12px 16px;
    border: 1px solid #e4e6f0;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(20, 20, 60, .06);
    box-sizing: border-box;
}

/* The card sits in a single-column grid now, so auto margins centre the whole
 * block instead of leaving it against the left edge of a four-column row. */
.ps-clinician-card {
    margin-inline: auto;
}

/* Content inside the card stays centred - this was previously keyed to the ED
 * element id, which meant Hair Loss never got it. */
.ps-clinician-card,
.ps-clinician-card .elementor-widget-text-editor,
.ps-clinician-card .elementor-widget-heading {
    text-align: center;
}

.ps-clinician-card .elementor-icon-list-items {
    justify-content: center;
}

/* --- accordion: a photograph per item --- */

/* ---------------------------------------------------------------------------
 * ED accordion — small thumbnail beside each question.
 *
 * Same mechanism the Weight Loss accordion uses (see the 23f0caa_item rules):
 * the picture is a background on .ue_icon, keyed to the item's element id, and
 * the existing .icon-accordtion-style rules supply the 50x50 box and the
 * gradient overlay on ::before. Each thumbnail is the same image the large
 * right-hand panel shows for that item.
 *
 * These were removed in error alongside the earlier inline-image approach;
 * the thumbnails themselves were always part of the correct pattern.
 * Widget id 1b34e51.
 * ------------------------------------------------------------------------- */

/* What is erectile dysfunction? */
.icon-accordtion-style #uc_uc_icon_accordion_elementor_1b34e51_item1 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/08/ed-What-is-erectile-dysfunction.jpg") center/cover no-repeat;
}

/* How do the treatments work? */
.icon-accordtion-style #uc_uc_icon_accordion_elementor_1b34e51_item2 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/08/ed-How-do-the-treatments-work.jpg") center/cover no-repeat;
}

/* Who is eligible? */
.icon-accordtion-style #uc_uc_icon_accordion_elementor_1b34e51_item3 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/08/ed-Who-is-eligible.jpg") center/cover no-repeat;
}

/* Clinician review process */
.icon-accordtion-style #uc_uc_icon_accordion_elementor_1b34e51_item4 .ue_icon {
    background: url("https://pillsuite.co.uk/wp-content/uploads/2026/08/ed-Clinician-review-process-scaled.jpg") center/cover no-repeat;
}