/* ============================================================================
   Star Laboratories — UX, Accessibility & Polish Enhancements
   Loaded last so it can refine the existing theme without rewriting it.
   ========================================================================== */

/* --- Accessibility: skip link --- */
.sl-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: #db0000;
    color: #fff;
    padding: 12px 22px;
    font-weight: 600;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}
.sl-skip-link:focus {
    left: 0;
    outline: 3px solid #020025;
}

/* --- Visible keyboard focus for all interactive elements --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #db0000;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Smooth scrolling + offset for sticky header anchor targets --- */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Prevent layout shift: media stays inside its box --- */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* --- Link hover consistency --- */
a {
    transition: color 0.2s ease;
}

/* --- Buttons: clearer affordance --- */
.btn, .custom-btn {
    cursor: pointer;
}

/* --- Tap targets on mobile (WCAG 2.5.5) --- */
@media (max-width: 767px) {
    .header__menu ul li a,
    .footer-menu ul li a,
    .h4footer-social ul li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* --- Forms: readable focus + spacing --- */
input, textarea, select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(219, 0, 0, 0.15);
}

/* --- Print: clean, ink-friendly --- */
@media print {
    header, footer, .scroll-up, .sl-skip-link, .header-top-right-btn,
    .play-btn, .popup-video { display: none !important; }
    body { color: #000; background: #fff; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
    main { padding: 0 !important; }
}

/* --- Selection colour on brand --- */
::selection {
    background: #db0000;
    color: #fff;
}

/* --- Image rendering quality --- */
.product-large-img img,
.blog-feeds-thumb img {
    object-fit: cover;
}

/* --- Footer broken-link guard: never show bare empty anchors --- */
a[href=""], a:not([href]) {
    pointer-events: none;
}

/* --- Hero banner: breathing room so content never collides with the
       fixed/sticky header, plus comfortable bottom spacing --- */
.hero-area .single-slider,
.hero-area .slider-height {
    padding-top: 130px;
    padding-bottom: 110px;
}
.hero-area .hero-text {
    padding-top: 20px;
}
@media (max-width: 991px) {
    .hero-area .single-slider,
    .hero-area .slider-height {
        padding-top: 150px;
        padding-bottom: 90px;
    }
}
@media (max-width: 575px) {
    .hero-area .single-slider,
    .hero-area .slider-height {
        padding-top: 120px;
        padding-bottom: 70px;
    }
}

/* --- Floating WhatsApp enquiry button --- */
.sl-whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: sl-wa-pulse 2.6s infinite;
}
.sl-whatsapp-float:hover,
.sl-whatsapp-float:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.sl-whatsapp-float svg {
    width: 32px;
    height: 32px;
}
@keyframes sl-wa-pulse {
    0%   { box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) {
    .sl-whatsapp-float { animation: none; }
}
/* keep clear of the existing back-to-top control */
.scroll-up,
#scrollUp {
    bottom: 88px !important;
}
@media (max-width: 767px) {
    .sl-whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
    .scroll-up, #scrollUp { bottom: 78px !important; }
}
@media print {
    .sl-whatsapp-float { display: none !important; }
}

/* --- FIX: decorative hero waves were intercepting clicks on hero buttons --- */
.wave-container,
.waves,
.parallax,
.single-slider::before {
    pointer-events: none;
}
.hero-slider-btn,
.hero-slider-btn a,
.hero-slider-caption a {
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

/* --- FIX: header dropdown submenu closing before it can be clicked --- */
/* Submenu sits flush under its parent (no dead gap) ... */
.header__menu ul li:hover ul.submenu {
    top: 100%;
}
/* ... and an invisible bridge spans any sub-pixel gap so the hover
   never breaks while the cursor travels from the menu item to the panel. */
.header__menu ul li ul.submenu::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    height: 22px;
    background: transparent;
}
/* keep the whole top-level item interactive while its panel is open */
.header__menu ul li {
    position: relative;
}

/* --- FIX: header logo was stretched (logo is 2:1, CSS forced 1.6:1 ratios).
       Letting height follow width preserves the natural aspect ratio. --- */
.logo img,
.logo .default-logo,
.logo .sticky-logo {
    height: auto !important;
    object-fit: contain;
}

/* ============================================================================
   PRODUCT DETAIL PAGE — modern tab redesign (Composition / Pack Sizes / Contact)
   Overrides the theme defaults; loaded last so these win.
   ========================================================================== */
.product-desc-area {
    background: #f7f8fa;
    padding-top: 60px;
}
.product-desc-area .bakix-details-tab {
    margin-bottom: 0 !important;
}
.product-desc-area .bakix-details-tab .nav {
    gap: 8px;
    border: none;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.product-desc-area .bakix-details-tab .nav-item {
    margin: 0;
}
.product-desc-area .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px !important;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    color: #647589 !important;
    background: #fff;
    border: 1px solid #e6e8ec !important;
    letter-spacing: 0;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.product-desc-area .nav-link:hover {
    color: #db0000 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.product-desc-area .nav-link.active {
    color: #fff !important;
    background: #db0000 !important;
    border-color: #db0000 !important;
    box-shadow: 0 8px 20px rgba(219, 0, 0, 0.28);
}
.product-desc-area .tab-content {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 36px 40px;
    margin-top: 26px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}
.product-desc-area .tab-content .additional-info h4 {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 18px !important;
    padding-left: 0 !important;
}
.product-desc-area .tab-content .product-description p,
.product-desc-area .tab-content .event-text {
    font-size: 16px;
    line-height: 1.8;
    color: #4a5568;
    letter-spacing: 0 !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* a clean label before the composition text */
.product-desc-area #id-desc .event-text::before {
    content: "Composition";
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #db0000;
    margin-bottom: 12px;
}
.product-desc-area .read-more-btn {
    font-weight: 700;
    margin-top: 14px !important;
}
/* Pack-size chips */
.product-desc-area .pack-sizes {
    padding-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}
.product-desc-area .pack-sizes li {
    padding: 0 !important;
    margin: 0 !important;
}
.product-desc-area .product-cat .size-icon {
    width: auto !important;
    min-width: 90px;
    padding: 0 22px;
    height: 54px;
    line-height: 54px;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(219, 0, 0, 0.22);
}
@media (max-width: 767px) {
    .product-desc-area .tab-content { padding: 24px 20px; }
    .product-desc-area .nav-link { padding: 11px 20px !important; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-desc-area .nav-link { transition: none; }
}