/*
Theme Name: 博诚主题
Description: 专为博诚打造的WordPress主题，提供新一代办公体验空间解决方案，专注于户外遮阳产品的展示与营销
Author: ld
Version: 1.0
*/

/* Import existing styles */
@import url('static/css/css2.css');

/* WordPress specific styles */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Admin bar fix */
body.admin-bar .luxbar-fixed {
    top: 32px;
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin-right: 1rem;
}

.alignright {
    float: right;
    margin-left: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Catalog page styles matching catalog.html */
.bg-grey {
    background-color: #f8f9fa;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-top-40 {
    padding-top: 40px;
}

.padding-btm-30 {
    padding-bottom: 30px;
}

.margin-top-58 {
    margin-top: 58px;
}

.margin-btm-20 {
    margin-bottom: 20px;
}

.margin-btm-30 {
    margin-bottom: 30px;
}

.margin-btm-10 {
    margin-bottom: 10px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-25 {
    font-size: 25px;
}

.font-weight-700 {
    font-weight: 700;
}

.text-black {
    color: #000;
}

.text-red {
    color: #dc3545;
}

.hover-color:hover {
    color: #0d6efd;
    text-decoration: none;
}

.hover-color-blue:hover {
    color: #0d6efd;
    text-decoration: none;
}

.text-right {
    text-align: right;
}

.font-comfortaa {
    font-family: 'Comfortaa', cursive;
}

.img-width-800 {
    max-width: 800px;
    width: 100%;
}

.image-margin-center {
    margin: 0 auto;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.catalog-title-height {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive grid */
@media (max-width: 575px) {
    .col-xs-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 1200px) {
    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 1400px) {
    .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}