/*
Theme Name: Hello Biz Child
Theme URI: https://elementor.com/products/hello-biz/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-biz
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Biz is a free, user-friendly Hybrid WordPress Theme that was crafted for seamless integration with the Elementor site builder and tailored specifically for business websites. Perfect for beginners, but far from limited to just them, it features a dedicated beginner-oriented “Home” screen to simplify and streamline the web-building process. Hello Biz also integrates with Elementor’s premium features, giving you access to tools like AI, and accessibility enhancements in one place. Whether launching a startup site or refining a company portfolio, Hello Biz offers a solid, responsive foundation for all web creators. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here: https://patchstack.com/database/wordpress/theme/hello-biz/vdp.
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready,style-variations
Version: 1.2.0.1767883653
Updated: 2026-01-08 14:47:33

*/

/* ===========================
   PRODUCT SINGLE PAGE STYLES
   =========================== */

/* Prevent horizontal scrollbar caused by 100vw full-bleed sections.
   overflow-x: clip (not hidden) — clips overflow WITHOUT creating a scroll container,
   so position: sticky on the product gallery still works correctly. */
body {
    overflow-x: clip;
}

/* Minimal Swiper fallback to prevent overflow if CDN CSS is missing */
.swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    max-width: 100%;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    max-width: 100%;
}

.product-single-container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 40px 0;
    overflow: visible;
    position: relative;
}

/* Product Hero Section */
.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
    max-width: 100%;
    align-items: start;
    overflow: visible;
}

.product-image {
    position: sticky;
    top: 20px;
    align-self: start;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

/* Ensure no ancestor clips the sticky element */
.product-hero,
.product-single-container {
    overflow-y: visible;
}

.product-gallery-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
}

/* Swiper fallback to avoid layout shift if core CSS not loaded */
.product-gallery-swiper.swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.product-gallery-swiper .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.product-gallery-swiper .swiper-slide {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-gallery-swiper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.product-gallery-controls {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 5;
}

.product-swiper-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-swiper-pagination .swiper-pagination-bullet {
    width: 32px;
    height: 2px;
    border-radius: 999px;
    background: #FFFFFF;
    opacity: 1;
    transition: all 0.2s ease;
}

.product-swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    width: 32px;
}

.product-swiper-nav {
    display: flex;
    gap: 8px;
}

.product-swiper-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgb(255, 255, 255);
    background: #FFFFFF99;
    opacity: 0.6;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(6px);
}

.product-swiper-btn:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.4);
}

.product-nav-arrows {
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
}

.nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.product-badges {
    margin-top: 1em;
    display: flex;
    gap: 10px;
}

.product-badges img {
    width: 50px;
    height: auto;
}

/* Product Info */

.product-title {
    font-size: 42px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.2;
}

.product-description {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* Buttons */
.product-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.btn {
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: #1a3a52;
    color: white !important;
    border: 2px solid #1a3a52;
}

.btn-primary:hover {
    background: #1a3a52;
    border-color: #ffffff;
}

.btn-secondary {
    background: white;
    color: #1a3a52;
    border: 2px solid #1a3a52;
}

.btn-secondary:hover {
    background: #f8f9fa;
}

.icon-download {
    font-weight: bold;
}

/* Surface Info & Glue Core */
.product-surface-glue {
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.surface-section,
.glue-section {
    margin-bottom: 0;
}

.surface-section h3,
.glue-section h3 {
    font-size: 12px;
    font-weight: 700;
    color: #254B78;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.surface-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.surface-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.surface-thumbnail {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 4px;
    border: 2px solid #e0e0e0;
    background-position: center;
    background-repeat: no-repeat;
}

.surface-text {
    flex: 1;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.surface-text strong {
    color: #333;
    font-size: 13px;
    text-transform: uppercase;
}

.glue-section {
    background: #FFFBF0;
    padding: 20px;
    border-radius: 8px;
    max-width: 260px;
}

.glue-section p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* =============================================
   Product Accordion
   ============================================= */
.product-accordion {
    margin-top: 24px;
}

.accordion-item {
    /* no border — line is inline inside the toggle */
}

.accordion-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    gap: 0;
    color: #254B78;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-align: left;
}

.accordion-toggle>span:first-child {
    white-space: nowrap;
    margin-right: 14px;
}

.accordion-divider {
    flex: 1;
    height: 1px;
    background-color: #D6E4F5;
    margin-right: 14px;
}

.accordion-toggle:hover {
    color: #1a3a6b;
}

.accordion-icon {
    flex-shrink: 0;
    color: #254B78;
    transition: transform 0.3s ease;
}

.accordion-item.is-open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.accordion-panel-inner {
    padding-bottom: 24px;
}

/* Thicknesses (inside accordion) */
.thickness-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}

.thickness-tag {
    font-family: 'Inter', sans-serif;
    padding: 8px 20px;
    background: #E6F1FF;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    border: 1px solid #ddd;
}

/* Product Specification (inside accordion) */
.product-specification {
    margin: 0 auto 0;
    border-radius: 8px;
}

/* remove static h2 — title is now in accordion-toggle */
.product-specification h2 {
    display: none;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    padding: 24px;
    background-color: #F5F9FF;
    border-radius: 12px;
}

.spec-item h3 {
    font-size: 14px;
    font-weight: 700;
    color: #254B78;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.spec-item ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.spec-item li {
    padding: 8px 0;
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

.edge-colors {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
}

.wood-species {
    padding-top: 30px;
    border-top: 1px solid #ddd;
}

.wood-species h3 {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
}

.wood-species p {
    color: #555;
    line-height: 1.8;
}

/* Packaging Standard (inside accordion) */
.packaging-standard {
    display: none;
}

.packaging-content {
    padding: 24px;
    background-color: #F5F9FF;
    border-radius: 12px;
}

.packaging-content h3 {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    margin-bottom: 15px;
}

.packaging-content p {
    color: #555;
    line-height: 1.8;
}

/* Unique Selling Points (inside accordion) */
.unique-selling-points {
    display: none;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    background-color: #F5F9FF;
    padding: 24px;
}

.usp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #444;
}

.usp-check {
    flex-shrink: 0;
    color: #254B78;
}

/* Practical Use */
/* Practical Use Carousel - full bleed */
.practical-use {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 60px 0;
    background: #EDF1F7;
    margin-bottom: 60px;
    /* no overflow:hidden here — would clip left side of slides */
}

.practical-use-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 max(40px, calc((100vw - 1680px) / 2 + 40px)) 36px;
}

.practical-use-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #254B78;
    margin: 0;
    position: relative;
    padding-left: 14px;
}

.practical-use-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 48px;
    height: 38px;
    background: rgba(37, 75, 120, 0.12);
    border-radius: 4px;
    z-index: -1;
    transform: translateX(-8px);
}

.practical-use-nav {
    display: flex;
    gap: 10px;
}

.practical-prev,
.practical-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #c8d8eb;
    cursor: pointer;
    color: #254B78;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.practical-prev:hover,
.practical-next:hover {
    background: #254B78;
    border-color: #254B78;
    color: #fff;
}

.practical-prev.swiper-button-disabled,
.practical-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Swiper: left edge aligns with container, right side bleeds to viewport edge */
.practical-swiper {
    --left-gutter: max(40px, calc((100vw - 1680px) / 2 + 40px));
    margin-left: var(--left-gutter);
    overflow: hidden;
    /* clips only at the swiper box edges — left is at gutter, right bleeds to 100vw */
}

.practical-swiper .swiper-wrapper {
    align-items: stretch;
}

.practical-slide {
    display: flex;
    flex-direction: column;
}

.practical-slide-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
}

.practical-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    transition: transform 0.4s ease;
}

.practical-slide:hover .practical-slide-img img {
    transform: scale(1.03);
}

.practical-slide-caption {
    margin-top: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* Progress-bar pagination */
.practical-pagination.swiper-pagination-progressbar {
    position: relative;
    width: calc(100% - var(--left-gutter, 40px) * 2);
    margin: 28px auto 0;
    left: 0;
    height: 4px;
    background: #d0dcea;
    border-radius: 2px;
}

.practical-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #E07B2A;
    border-radius: 2px;
}


/* Related Products */
.related-products {
    margin-bottom: 60px;
}

.related-products h2 {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 40px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.related-product-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

.related-product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-product-card img {
    width: 100%;
    height: 363px;
    object-fit: cover;
}

.related-product-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    padding: 20px 20px 10px;
}

.related-description {
    padding: 0 20px 20px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.related-badges {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
}

.related-badges img {
    width: 50px;
    height: auto;
    object-fit: cover;
}

/* Contact Section */
.product-contact-section {
    background: url('https://via.placeholder.com/1400x400') center/cover;
    padding: 100px 40px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.contact-overlay {
    background: rgba(138, 114, 72, 0.85);
    padding: 60px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
}

.contact-overlay h2 {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.contact-overlay p {
    font-size: 16px;
    color: white;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 1024px) {
    .product-hero {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .product-actions {
        flex-direction: column;
    }

    .btn {
        text-align: center;
        justify-content: center;
    }

    .spec-grid,
    .usp-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .practical-swiper {
        --left-gutter: 20px;
        margin-left: 20px;
    }

    .practical-use-header {
        padding: 0 20px 28px;
        max-width: 100%;
    }

    .practical-use-header h2 {
        font-size: 24px;
    }

    .practical-pagination.swiper-pagination-progressbar {
        width: calc(100% - 40px);
    }
}

/* ===========================
   PRODUCT ARCHIVE GRID
   =========================== */
.products-hero {
    width: 100%;
    background: #193250;
    color: #ffffff;
    padding: 100px 20px;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.products-hero__inner {
    max-width: 1680px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.products-hero__content {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.products-hero__eyebrow {
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.products-hero__title {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    color: #ffffff;
}

.products-hero__text {
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
    margin: 0;
}

@media (max-width: 768px) {
    .products-hero {
        padding: 80px 16px;
    }

    .products-hero__title {
        font-size: 32px;
    }

    .products-hero__text {
        font-size: 15px;
    }
}

.products-archive {
    background: #ffffff;
    padding: 40px 0 60px;
    margin: auto;
}

.products-archive__inner {
    max-width: 1680px;
    margin: 0 auto;
}

.products-archive__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #6b7280;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.products-archive__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.products-archive__filters {
    display: flex;
    align-items: center;
    gap: 10px;
}

.products-archive__filters select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    min-width: 150px;
}

.btn-compact {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.products-archive__count {
    font-weight: 600;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.product-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.product-card__image {
    display: block;
}

.product-card__image img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #e5e7eb;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.product-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.product-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.product-card__title a {
    color: inherit;
    text-decoration: none;
}

.product-card__title a:hover {
    color: #0f172a;
}

.product-card__summary {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

.product-card__summary ul {
    margin: 0;
    padding-left: 18px;
}

.product-card__summary li {
    margin-bottom: 6px;
}

.product-card__meta {
    margin-top: 4px;
}

.product-card__meta-title {
    margin: 0 0 10px;
    font-size: 14px;
    color: #547FB1;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-transform: uppercase;
}

.product-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 16px;
    background: #E6F1FF;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.product-card__footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-card__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-card__badges img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.product-card__cta {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-card__cta:hover {
    color: #1a3a52;
}

.products-archive__pagination {
    text-align: center;
    margin-top: 32px;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-load-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}


[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover,
button:focus,
button:hover {
    background-color: unset;
}

@media (max-width: 768px) {
    .products-archive__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }

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

@media (max-width: 1100px) and (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1680px) {
    .products-archive {
        width: 85%;
    }
}

@media (max-width: 1366px) {
    .products-archive {
        width: 94%;
    }
}

@media (max-width: 1024px) {
    .products-archive {
        width: 93%;
    }
}

.products-archive {
    max-width: 1680px;
}