/**
 * WooCommerce Style Overrides
 * Ensures Ulina theme styles take precedence over WooCommerce defaults.
 *
 * @package Ulina_Theme
 */

/* Toast Notification */
.ulina-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    z-index: 99999;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    max-width: 350px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ulina-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.ulina-notification.success {
    background-color: #52586d;
}

.ulina-notification.error {
    background-color: #e74c3c;
}

/* Loading state */
.loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #52586d;
    border-radius: 50%;
    animation: ulina-spin 0.8s linear infinite;
    z-index: 10;
}

@keyframes ulina-spin {
    to { transform: rotate(360deg); }
}

/* Cart button loading */
.pi01Cart.loading i,
.qv-add-to-cart.loading span {
    visibility: hidden;
}

/* Removing animation for cart items */
.cartWidgetProduct.removing {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   Product card: Select options modal (color/size)
   ========================================================================== */
#ulinaSelectOptionsModal .modal-dialog {
    max-width: 400px;
}

#ulinaSelectOptionsModal .modal-content {
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

#ulinaSelectOptionsModal .modal-body {
    padding: 36px 32px 28px;
}

#ulinaSelectOptionsModal .vsoTitle {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: #1a1a2e;
}

#ulinaSelectOptionsModal .vsoProductName {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 22px;
    line-height: 1.5;
}

#ulinaSelectOptionsModal .vsoRow {
    margin-bottom: 20px;
}

#ulinaSelectOptionsModal .vsoLabel {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 10px;
}

/* ── Color swatches ── */
#ulinaSelectOptionsModal .vsoColorOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#ulinaSelectOptionsModal .vsoColorSwatch {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

#ulinaSelectOptionsModal .vsoColorSwatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#ulinaSelectOptionsModal .vsoColorSwatch.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #52586d;
    transform: scale(1.1);
}

/* White swatch needs a visible border */
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color: white"],
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color: #fff"],
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color: #ffffff"],
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color:white"],
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color:#fff"],
#ulinaSelectOptionsModal .vsoColorSwatch[style*="background-color:#ffffff"] {
    border-color: #ddd;
}

/* ── Size buttons ── */
#ulinaSelectOptionsModal .vsoSizeOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#ulinaSelectOptionsModal .vsoSizeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid #d8dde6;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #444;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    background: #fff;
    user-select: none;
}

#ulinaSelectOptionsModal .vsoSizeBtn:hover {
    border-color: #52586d;
    color: #52586d;
}

#ulinaSelectOptionsModal .vsoSizeBtn.selected {
    background: #52586d;
    border-color: #52586d;
    color: #fff;
}

/* ── Add to cart button ── */
#ulinaSelectOptionsModal .vsoActions {
    margin-top: 26px;
}

#ulinaSelectOptionsModal .vsoAddToCart {
    width: 100%;
    display: block;
}

#ulinaSelectOptionsModal .vsoAddToCart.loading span {
    visibility: hidden;
}

/* ==========================================================================
   Swiper Hero Slider - Matching original Revolution Slider layout
   ========================================================================== */

/* Slider container */
.ulinaHeroSlider {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Each slide: layered positioning (matching RevSlider gridheight: 1080/1080/768/550) */
.ulinaHeroSlider .swiper-slide {
    position: relative;
    overflow: hidden;
    height: 1080px;
    background: #ecf5f4;
}

/* Layer 1: Background image (full cover) */
.ulina-slide-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Layer 2: Decorative shape (bottom-right) */
.ulina-slide-shape {
    position: absolute;
    right: 192px;
    bottom: 71px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}

.ulina-slide-shape img {
    max-width: 100%;
    height: auto;
}

.swiper-slide-active .ulina-slide-shape {
    opacity: 1;
}

/* Layer 3: Person image (right side, bottom-aligned) */
.ulina-slide-person {
    position: absolute;
    right: 300px;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.ulina-slide-person img {
    max-height: 90%;
    width: auto;
    display: block;
}

.swiper-slide-active .ulina-slide-person {
    opacity: 1;
    transform: translateY(0);
}

/* Layer 4: Text content (left side, vertically centered) */
.ulina-slide-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
}

.ulina-slide-content .theSubTitle {
    color: #7b9496;
    font-size: 21px;
    font-weight: 500;
    line-height: 21px;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.ulina-slide-content .theTitles {
    color: #52586d;
    font-size: 72px;
    font-weight: 400;
    line-height: 84px;
    margin-bottom: 30px;
    max-width: 550px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.ulina-slide-content .ulinaBTN {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Active slide: trigger text animations with stagger */
.swiper-slide-active .ulina-slide-content .theSubTitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.swiper-slide-active .ulina-slide-content .theTitles {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.swiper-slide-active .ulina-slide-content .ulinaBTN {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

/* Custom navigation arrows (matching original circle style) */
.ulina-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #c5d0cf;
    color: #9ebbbd;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    cursor: pointer;
    z-index: 10;
    transition: all ease 350ms;
}

.ulina-slider-arrow:hover {
    background: #9ebbbd;
    border-color: #9ebbbd;
    color: #FFF;
}

.ulina-arrow-prev {
    left: 30px;
}

.ulina-arrow-next {
    right: 30px;
}

/* Custom pagination dots (matching original bullet style) */
.ulina-slider-pagination {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

.ulina-slider-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    opacity: 1;
    transition: all ease 350ms;
}

.ulina-slider-pagination .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(158, 187, 189, 0.52);
    transition: all ease 350ms;
}

.ulina-slider-pagination .swiper-pagination-bullet:hover::after,
.ulina-slider-pagination .swiper-pagination-bullet-active::after {
    background: rgba(158, 187, 189, 1);
}

.ulina-slider-pagination .swiper-pagination-bullet:hover,
.ulina-slider-pagination .swiper-pagination-bullet-active {
    border-color: #9ebbbd;
}

/* ---------- Slider Responsive ---------- */
@media (max-width: 1600px) {
    .ulina-slide-person {
        right: 100px;
    }
    .ulina-slide-shape {
        right: 0;
    }
}

@media (max-width: 1399px) {
    .ulinaHeroSlider .swiper-slide {
        height: 1080px;
    }
}

@media (max-width: 1199px) {
    .ulina-slide-content .theTitles {
        font-size: 52px;
        line-height: 64px;
        max-width: 450px;
    }
    .ulina-slide-person {
        right: 0;
    }
    .ulina-slide-person img {
        max-height: 520px;
    }
    .ulina-slide-shape img {
        max-width: 60%;
    }
}

@media (max-width: 991px) {
    .ulinaHeroSlider .swiper-slide {
        height: 768px;
    }
    .ulina-slide-content .theTitles {
        font-size: 42px;
        line-height: 52px;
    }
    .ulina-slide-person,
    .ulina-slide-shape {
        display: none;
    }
    .ulina-slider-arrow {
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .ulinaHeroSlider .swiper-slide {
        height: 550px;
    }
    .ulina-slide-content {
        text-align: center;
    }
    .ulina-slide-content .theTitles {
        font-size: 36px;
        line-height: 46px;
        max-width: 100%;
    }
    .ulina-slider-arrow {
        display: none;
    }
}

/* ==========================================================================
   WooCommerce Price & Labels
   ========================================================================== */

/* WooCommerce price HTML overrides */
.pi01Price ins {
    text-decoration: none;
}

.pi01Price del {
    color: #999;
}

/* Product label fixes - prevent overlapping; low z-index so cart dropdown stays on top */
.productLabels {
    display: flex;
    flex-wrap: wrap;
    z-index: 1;
    align-items: flex-start;
    padding: 10px;
    gap: 5px;
}

.productLabels span {
    float: none;
    white-space: nowrap;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.productLabels span:only-child {
    max-width: 100%;
}

/* Sale / New / Hot labels always align right */
.productLabels span.plSale,
.productLabels span.plNew,
.productLabels span.plHot {
    margin-left: auto;
}

/* Mini cart product meta (color/size) */
.cartProductMeta {
    font-size: 12px;
    color: #7f8495;
    line-height: 1.4;
    padding: 2px 0;
}

.cartProductMeta .cart-meta-item {
    display: inline-block;
    margin-right: 8px;
}

/* Hide WooCommerce default sale badge (we use custom labels) */
.woocommerce span.onsale {
    display: none !important;
}

/* =============================================
   Shop Page Overrides
   ============================================= */

/* Shop pagination: 与源代码一致（圆角、尺寸、颜色、居中） */
.shopPagination {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.shopPagination a,
.shopPagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border: 1px solid #c5d0cf;
    border-radius: 50%;
    margin-right: 6px;
    font-size: 16px;
    color: #52586d;
    text-decoration: none;
    transition: all ease 350ms;
}
.shopPagination span:last-child,
.shopPagination a:last-child {
    margin-right: 0;
}
.shopPagination a:hover,
.shopPagination span.current,
.shopPagination .page-numbers.current {
    background: #7b9496;
    color: #fff;
    border-color: #7b9496;
}
.shopPagination .prev,
.shopPagination .next {
    font-size: 14px;
}
.shopPaginationRow .col-lg-12 {
    text-align: center;
}

/* Shop sidebar: category / brand selected — 仅加粗、颜色加深 */
.shopPageSection .shopSidebar .widget li.current-cat a,
.shopPageSection .shopSidebar .widget li.current-brand a {
    font-weight: 700 !important;
    color: #2d3748 !important;
}
.shopPageSection .shopSidebar .widget li.current-cat a::before,
.shopPageSection .shopSidebar .widget li.current-brand a::before {
    content: none !important;
}

/* Shop AJAX loading state */
.shopPageSection.shop-ajax-loading #shop-grid-row,
.shopPageSection.shop-ajax-loading #shop-list-row {
    opacity: 0.6;
    pointer-events: none;
}

/* WooCommerce default elements hidden (we use custom templates) */
.woocommerce-result-count,
.woocommerce-ordering {
    display: none !important;
}

/* Sidebar color swatches */
.productColorWrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pcwItem {
    position: relative;
}
.pcwItem input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pcwItem label {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    cursor: pointer;
    position: relative;
    background: #52586d;
    transition: all 0.3s;
}
.pcwItem input[type="radio"]:checked + label {
    border-color: #52586d;
    box-shadow: 0 0 0 2px #52586d;
}

/* Common color slugs for sidebar swatches */
.pcwItem.red label { background: #ff0000; }
.pcwItem.blue label { background: #0000ff; }
.pcwItem.green label { background: #00a651; }
.pcwItem.yellow label { background: #ffd700; }
.pcwItem.black label { background: #000000; }
.pcwItem.white label { background: #ffffff; border-color: #ccc; }
.pcwItem.pink label { background: #ff69b4; }
.pcwItem.orange label { background: #ff8c00; }
.pcwItem.purple label { background: #800080; }
.pcwItem.brown label { background: #8b4513; }
.pcwItem.grey label,
.pcwItem.gray label { background: #808080; }
.pcwItem.navy label { background: #000080; }
.pcwItem.beige label { background: #f5f5dc; border-color: #ccc; }

/* 商品详情页 Color 色块：直接使用属性值作为颜色（--swatch-color 由内联 style 传入） */
.pcVariations .pi01VCItem label:after {
    background: var(--swatch-color, #999);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
.pcVariations .pi01VCItem input[type="radio"]:checked + label:after {
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* 商品详情页 — 客户信任标签（价格/简介下方、尺码上方） */
.ulina-trust-labels {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.ulina-trust-labels li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: #3d4258;
    letter-spacing: 0.01em;
}
.ulina-trust-labels li:last-child {
    margin-bottom: 0;
}
.ulina-trust-labels li i {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    border-radius: 50%;
    background: rgba(158, 187, 189, 0.25);
    color: #2d7a7d;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ulina-trust-labels li span {
    flex: 1;
}

/* Sort select nice-select override */
.shopAccessBar .sortNav .sortNavSelect {
    min-width: 140px;
}

/* Product Quick View: quantity 使用 flex 布局，避免错位 */
#productQuickView .pcBtns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

/* 仅弹窗内的数量框：flex 横排，不用绝对定位 */
#productQuickView .pcBtns .quantity.qv-quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: 120px;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 4px;
    border: 1px solid #c5d0cf;
    border-radius: 48px;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
}

#productQuickView .pcBtns .quantity.qv-quantity .qtyBtn {
    position: static !important;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #7b9496;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}
#productQuickView .pcBtns .quantity.qv-quantity .qtyBtn:hover {
    background: rgba(0,0,0,0.05);
    color: #52586d;
}

#productQuickView .pcBtns .quantity.qv-quantity input.qty {
    position: static !important;
    width: 36px !important;
    min-width: 36px;
    height: 40px;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center;
    font-size: 16px;
    border: none;
    background: transparent;
    border-radius: 0;
    -moz-appearance: textfield;
    flex-shrink: 0;
}
#productQuickView .pcBtns .quantity.qv-quantity input.qty::-webkit-outer-spin-button,
#productQuickView .pcBtns .quantity.qv-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Product list view (productItem02) responsive */
@media (max-width: 575px) {
    .productItem02 .pi02Thumb {
        float: none;
        width: 100%;
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   Single Product Page Overrides
   ========================================================================== */

/* Hide WooCommerce default single product elements (we use custom markup) */
.woocommerce-product-gallery,
.woocommerce div.product form.cart,
.woocommerce-tabs,
.related.products {
    display: none !important;
}

/* Review section headings */
.woocommerce #reviews h3 {
    font-size: 24px;
    line-height: 1;
    margin: 0 0 26px;
}

/* Review stars rendered as individual icons — match .rsStars style exactly */
.ulina-review-stars {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
    color: #ffb400;
    display: inline-flex;
    gap: 2px;
}

.rsStars {
    display: inline-flex;
    gap: 2px;
}

.ulina-review-stars i,
.rsStars i {
    margin-right: 0;
}

/* Review list items — more breathing room after title removal */
.reviewList ol li {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.reviewList ol li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.postReviewContent {
    margin-top: 5px;
    margin-bottom: 15px;
}

/* "Add A Review" heading spacing */
.commentFormArea h3 {
    margin-bottom: 30px;
}

/* Star rating selector in review form */
.reviewStar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.reviewStar label {
    font-size: 16px;
    font-weight: 500;
    color: #52586d;
    margin: 0;
    display: inline-block !important;
}

.rsStars {
    font-size: 16px;
    line-height: 24px;
    color: #ffb400;
    cursor: pointer;
}

.rsStars i {
    margin-right: 2px;
    transition: all 0.15s ease;
}

/* Shake animation when rating not selected */
.rsStars.ulina-shake {
    animation: ulina-shake 0.5s ease;
}

@keyframes ulina-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.rsStars i:hover {
    transform: scale(1.15);
}

.rsStars i.active {
    transform: none;
}

/* Review title field */
.comment-form-title {
    margin: 0 0 15px;
}

.comment-form-title input {
    height: 54px;
    display: block;
    width: 100%;
    border: 1px solid #c5d0cf;
    border-radius: 54px;
    padding: 0 24px;
    font-size: 16px;
    color: #52586d;
    outline: none;
    box-shadow: none;
    transition: border-color 0.3s ease;
}

.comment-form-title input:focus {
    border-color: #9ebbbd;
}

.comment-form-title input::-webkit-input-placeholder { color: #aeb3c3; opacity: 1; }
.comment-form-title input::-moz-placeholder { color: #aeb3c3; opacity: 1; }
.comment-form-title input:-ms-input-placeholder { color: #aeb3c3; opacity: 1; }

/* Row form layout — ensure columns wrap properly */
.reviewFrom .comment-form.row {
    margin: 0;
    padding: 0;
}

.reviewFrom .comment-form.row > .col-lg-6,
.reviewFrom .comment-form.row > .col-lg-12 {
    padding-left: 6px;
    padding-right: 6px;
}

.reviewFrom .comment-form.row > .col-lg-6 {
    margin-bottom: 12px;
}

/* WordPress comment form inside .reviewFrom — match theme styling */
.reviewFrom .comment-form {
    margin: 0;
    padding: 0;
}

.reviewFrom .comment-form .row {
    margin-bottom: 12px;
}

.reviewFrom .comment-form p {
    margin: 0 0 15px;
}

.reviewFrom .comment-form input[type="text"],
.reviewFrom .comment-form input[type="email"],
.reviewFrom .comment-form input[type="url"],
.reviewFrom .comment-form textarea {
    height: 54px;
    display: block;
    width: 100%;
    border: 1px solid #c5d0cf;
    border-radius: 54px;
    padding: 0 24px;
    margin: 0 0 12px;
    font-size: 16px;
    color: #7f8495;
    background: #fff;
    outline: none;
    box-shadow: none;
    transition: border-color 0.3s ease;
}

.reviewFrom .comment-form input:focus,
.reviewFrom .comment-form textarea:focus {
    border-color: #9ebbbd;
}

.reviewFrom .comment-form textarea {
    height: 190px;
    resize: none;
    border-radius: 27px;
    padding: 15px 24px;
}

.reviewFrom .comment-form input::-webkit-input-placeholder,
.reviewFrom .comment-form textarea::-webkit-input-placeholder { color: #aeb3c3; opacity: 1; }
.reviewFrom .comment-form input::-moz-placeholder,
.reviewFrom .comment-form textarea::-moz-placeholder { color: #aeb3c3; opacity: 1; }
.reviewFrom .comment-form input:-ms-input-placeholder,
.reviewFrom .comment-form textarea:-ms-input-placeholder { color: #aeb3c3; opacity: 1; }

/* Submit button inside review form */
.reviewFrom .comment-form .form-submit {
    margin: 20px 0 0;
}

.reviewFrom .comment-form .ulinaBTN {
    height: 54px;
    line-height: 52px;
    min-width: 174px;
    padding: 0 25px;
    border: none;
    cursor: pointer;
}

/* Row layout for name/email fields */
.reviewFrom .comment-form .comment-form-author,
.reviewFrom .comment-form .comment-form-email {
    margin: 0;
}

/* Hide WP default labels inside our custom comment form */
.reviewFrom .comment-form label,
.reviewFrom .comment-form .logged-in-as,
.reviewFrom .comment-form .comment-notes {
    display: none;
}

/* Review form: 仅用自定义验证样式，关闭浏览器自带 required/:invalid 效果 */
.reviewFrom .comment-form input:invalid,
.reviewFrom .comment-form textarea:invalid {
    box-shadow: none;
    outline: none;
}
.reviewFrom .comment-form input.reqError,
.reviewFrom .comment-form textarea.reqError {
    border-color: #e74c3c !important;
}

/* Single product: description content inherits theme styles properly */
.shopDetailsPageSection .descriptionContent h1,
.shopDetailsPageSection .descriptionContent h2,
.shopDetailsPageSection .descriptionContent h3,
.shopDetailsPageSection .descriptionContent h4,
.shopDetailsPageSection .descriptionContent h5,
.shopDetailsPageSection .descriptionContent h6 {
    margin-bottom: 20px;
}

.shopDetailsPageSection .descriptionContent p {
    margin: 0 0 24px;
}

.shopDetailsPageSection .descriptionContent img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 商品详情页 — Shipping & Order Processing 选项卡内容区（与 Description 样式一致） */
.shippingOrderContentArea {
    position: relative;
    padding: 47px 0 0;
}
.productOpenTab .shippingOrderContentArea {
    padding-bottom: 32px;
}

/* 商品详情页 — Description 下方 Refund Policy 区块 */
.descriptionContent .refundPolicyBlock {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e8eaed;
}
.refundPolicyBlock h3 {
    margin: 0 0 16px;
    font-size: 24px;
    line-height: 1.2;
}
.refundPolicyBlock p {
    margin: 0 0 16px;
}
.refundPolicyBlock p:last-child {
    margin-bottom: 0;
}

/* Related products carousel heading */
.relatedProductRow .secTitle {
    text-align: center;
}

/* Gallery thumbnail active state */
.productGalleryThumb .slick-current .pgtImage img {
    border: 2px solid #9ebbbd;
    border-radius: 3px;
}

/* Single product: quantity — flex 布局，与弹窗一致 */
.shopDetailsPageSection .pcBtns {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.shopDetailsPageSection .pcBtns .quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: 120px;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 4px;
    border: 1px solid #c5d0cf;
    border-radius: 48px;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.shopDetailsPageSection .pcBtns .quantity:hover {
    border-color: #9ebbbd;
}
.shopDetailsPageSection .pcBtns .quantity .qtyBtn {
    position: static !important;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #7b9496;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease;
}
.shopDetailsPageSection .pcBtns .quantity .qtyBtn:hover {
    background: rgba(0,0,0,0.05);
    color: #52586d;
}
.shopDetailsPageSection .pcBtns .quantity input.qty {
    position: static !important;
    width: 36px !important;
    min-width: 36px;
    height: 40px;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center;
    font-size: 16px;
    color: #7f8495;
    border: none;
    background: transparent;
    border-radius: 0;
    -moz-appearance: textfield;
    flex-shrink: 0;
}
.shopDetailsPageSection .pcBtns .quantity input.qty::-webkit-outer-spin-button,
.shopDetailsPageSection .pcBtns .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Wishlist & Compare hover */
.shopDetailsPageSection .pcWishlist,
.shopDetailsPageSection .pcCompare {
    transition: all 0.25s ease;
    margin: 0 !important;
}
.shopDetailsPageSection .pcWishlist:hover,
.shopDetailsPageSection .pcCompare:hover {
    color: #fff;
    background: #9ebbbd;
    border-color: #9ebbbd;
}

/* Single product page add to cart button loading state */
.shopDetailsPageSection .pcBtns .ulinaBTN.loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}

.shopDetailsPageSection .pcBtns .ulinaBTN.loading span {
    visibility: hidden;
}

.shopDetailsPageSection .pcBtns .ulinaBTN.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ulina-spin 0.8s linear infinite;
}

/* =====================================================
   WISHLIST
   ===================================================== */

/* Active (wishlisted) state for heart icon on product cards */
.pi01Wishlist.active,
.pi01Wishlist.active:hover {
    color: #fff;
    background: #e74c3c;
    border-color: #e74c3c;
}

/* Active state on single product page */
.pcWishlist.active,
.pcWishlist.active:hover {
    color: #fff;
    background: #e74c3c;
    border-color: #e74c3c;
}

/* Loading state for wishlist button */
.pi01Wishlist.loading,
.pcWishlist.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Wishlist page section */
.ulina-wishlist-section .cartHeader {
    margin-bottom: 30px;
}

.ulina-wishlist-table {
    width: 100%;
}

.ulina-wishlist-table tbody tr.removing {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Stock status colours */
.ulina-in-stock,
.productStock span.ulina-in-stock {
    color: #27ae60;
    font-weight: 600;
}

.ulina-out-of-stock,
.productStock span.ulina-out-of-stock {
    color: #e74c3c;
    font-weight: 600;
}

/* Disabled button on wishlist page */
.ulinaBTN.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Empty wishlist */
.ulina-wishlist-empty {
    padding: 60px 20px;
}

.ulina-wishlist-empty p {
    font-size: 18px;
    color: #666;
    margin-bottom: 25px;
}

.ulina-wishlist-empty .ulinaBTN {
    display: inline-block;
    padding-left: 40px;
    padding-right: 40px;
}

/* Wishlist item meta (color & size) */
.wishlist-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 8px;
}

.wishlist-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
}

.wishlist-meta-label {
    font-weight: 600;
    color: #333;
}

.wishlist-meta-value {
    color: #555;
}

/* Color swatch in wishlist */
.wishlist-meta-color-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #ddd;
    vertical-align: middle;
    background: #4a90d9;
}

/* Reuse the same color mapping as product cards */
.wishlist-meta-color-swatch.red,
.wishlist-meta-color-swatch.reds { background: #f42222; }
.wishlist-meta-color-swatch.yellow,
.wishlist-meta-color-swatch.yellows { background: #f2c864; }
.wishlist-meta-color-swatch.green,
.wishlist-meta-color-swatch.greens { background: #4caf50; }
.wishlist-meta-color-swatch.black { background: #333333; }
.wishlist-meta-color-swatch.white { background: #ffffff; }
.wishlist-meta-color-swatch.grey,
.wishlist-meta-color-swatch.gray { background: #9e9e9e; }
.wishlist-meta-color-swatch.pink { background: #e91e63; }
.wishlist-meta-color-swatch.purple { background: #9c27b0; }
.wishlist-meta-color-swatch.orange { background: #ff9800; }
.wishlist-meta-color-swatch.brown { background: #795548; }
.wishlist-meta-color-swatch.navy,
.wishlist-meta-color-swatch.navy-blue { background: #1a237e; }
.wishlist-meta-color-swatch.beige { background: #f5f0e1; }
.wishlist-meta-color-swatch.coral { background: #ff7043; }
.wishlist-meta-color-swatch.gold { background: #ffd700; }
.wishlist-meta-color-swatch.silver { background: #c0c0c0; }
.wishlist-meta-color-swatch.khaki { background: #c3b091; }
.wishlist-meta-color-swatch.olive { background: #808000; }
.wishlist-meta-color-swatch.burgundy,
.wishlist-meta-color-swatch.wine { background: #800020; }
.wishlist-meta-color-swatch.teal { background: #009688; }
.wishlist-meta-color-swatch.cream { background: #fffdd0; }
.wishlist-meta-color-swatch.maroon { background: #800000; }
.wishlist-meta-color-swatch.cyan { background: #00bcd4; }
.wishlist-meta-color-swatch.ivory { background: #fffff0; }
.wishlist-meta-color-swatch.tan { background: #d2b48c; }
.wishlist-meta-color-swatch.turquoise { background: #40e0d0; }
.wishlist-meta-color-swatch.lavender { background: #e6e6fa; }
.wishlist-meta-color-swatch.magenta { background: #ff00ff; }
.wishlist-meta-color-swatch.indigo { background: #3f51b5; }
.wishlist-meta-color-swatch.blue { background: #4a90d9; }

/* Cart dropdown float above everything */
.cartWidgetArea {
    z-index: 99999 !important;
}

/* Wishlist icon in header – mirror .anCart styling */
.anWishlist {
    display: inline-block;
    position: relative;
    margin-right: 5px;
}

.anWishlist > a {
    position: relative;
    display: inline-block;
    color: inherit;
    font-size: 18px;
    transition: color 0.25s ease;
}

.anWishlist > a:hover {
    color: #9ebbbd;
}

.ulina-wishlist-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #e74c3c;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    min-width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
    font-weight: 600;
}

/* =====================================================
   DROPDOWN MENU HOVER DELAY
   Prevents sub-menus from vanishing while moving the
   cursor diagonally from parent to child.
   ===================================================== */

/* Default state: delay before hiding (gives user time to reach submenu) */
.mainMenu ul li ul,
.mainMenu .megaMenu {
    transition-delay: 0.3s;
    transition-duration: 0.2s;
}

/* Hover state: show immediately with no delay */
.mainMenu > ul li:hover > ul,
.mainMenu > ul li:hover > .megaMenu,
.mainMenu ul li ul li:hover > ul {
    transition-delay: 0s;
}

/*
 * Bridge the 10px gap between parent <li> and child <ul>
 * so the mouse doesn't lose hover while moving diagonally.
 */
.mainMenu ul li ul li.menu-item-has-children {
    position: relative;
}

/* Invisible bridge: extends the hover area to the right, covering the gap */
.mainMenu ul li ul li.menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
    height: 100%;
    z-index: 98;
}

/* Also bridge the gap above/below the child submenu for diagonal movement */
.mainMenu ul li ul li.menu-item-has-children > ul::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -15px;
    width: 15px;
    height: calc(100% + 20px);
    z-index: 98;
}

/* =====================================================
   COLLECTION LIST PAGE — Filter Panel & Load More
   ===================================================== */

/* Filter sidebar overlay */
.ulina-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ulina-filter-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Filter sidebar panel */
.ulina-filter-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.35s ease;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
}

.ulina-filter-panel.open {
    right: 0;
}

.ulina-filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
}

.ulina-filter-panel-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ulina-filter-close {
    font-size: 20px;
    color: #333;
    transition: color 0.25s;
}

.ulina-filter-close:hover {
    color: #e74c3c;
}

.ulina-filter-panel-body {
    padding: 20px 25px;
}

.ulina-filter-panel-body .shopSidebar {
    padding: 0;
}

/* Prevent body scroll when filter panel is open */
body.ulina-filter-open {
    overflow: hidden;
}

/* Filter panel footer with Apply / Reset buttons */
.ulina-filter-panel-footer {
    display: flex;
    gap: 12px;
    padding: 20px 25px;
    border-top: 1px solid #eee;
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
}

.ulina-filter-panel-footer .ulinaBTN {
    flex: 1;
    text-align: center;
}

.ulina-filter-reset span {
    color: #52586d;
}

.ulina-filter-reset {
    background: #f5f5f5 !important;
    border-color: #ddd !important;
}

.ulina-filter-reset:hover {
    background: #eee !important;
}

/* Load More button loading state */
#collection-load-more.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Sub-category filter bar active state (already styled by theme.css filterUL) */
#collection-filter-ul li {
    cursor: pointer;
}

/* =====================================================
   CART PAGE
   ===================================================== */

/* Empty cart */
.ulina-cart-empty {
    padding: 60px 20px;
}

.ulina-cart-empty > i {
    display: block;
    font-size: 60px;
    color: #ccc;
    margin-bottom: 20px;
}

.ulina-cart-empty p {
    font-size: 18px;
    color: #666;
    margin-bottom: 25px;
}

.ulina-cart-empty .ulinaBTN {
    display: inline-block;
    padding-left: 40px;
    padding-right: 40px;
}

/* Cart table quantity — match product detail page style exactly */
.ulina-cart-table .quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    width: 120px;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 4px;
    border: 1px solid #c5d0cf;
    border-radius: 48px;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.ulina-cart-table .quantity:hover {
    border-color: #9ebbbd;
}
.ulina-cart-table .quantity .qtyBtn {
    position: static !important;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #7b9496;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.25s ease, color 0.25s ease;
}
.ulina-cart-table .quantity .qtyBtn:hover {
    background: rgba(0,0,0,0.05);
    color: #52586d;
}
.ulina-cart-table .quantity input.carqty {
    position: static !important;
    width: 36px !important;
    min-width: 36px;
    height: 40px;
    margin: 0 !important;
    padding: 0 4px !important;
    text-align: center;
    font-size: 16px;
    color: #7f8495;
    border: none;
    background: transparent;
    border-radius: 0;
    -moz-appearance: textfield;
    flex-shrink: 0;
}
.ulina-cart-table .quantity input.carqty::-webkit-outer-spin-button,
.ulina-cart-table .quantity input.carqty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Cart table subtotal row in footer */
.ulina-cart-table tfoot tr.cart-subtotal-row {
    border-top: 2px solid #e5e5e5;
}

.ulina-cart-table tfoot tr.cart-subtotal-row td {
    font-size: 18px;
    line-height: 1.6;
}

.ulina-cart-table tfoot tr.cart-subtotal-row .text-end,
.ulina-cart-table tfoot tr.cart-subtotal-row .text-start {
    padding: 24px 0 !important;
}

.ulina-cart-table tfoot tr.cart-subtotal-row .text-start .pi01Price {
    margin: 0 0 0 6px;
}

.ulina-cart-table tfoot tr.cart-subtotal-row .pi01Price ins {
    font-size: 20px;
    font-weight: 600;
    color: #52586d;
}

/* Button alignment in actions row */
.ulina-cart-table tfoot tr.actions td {
    padding-top: 15px;
    padding-bottom: 20px;
    vertical-align: middle;
}

.ulina-cart-table tfoot tr.actions .ulinaBTN,
.ulina-cart-table tfoot tr.actions .ulinaBTN2 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

/* Cart table row loading state */
.ulina-cart-table tbody tr.ulina-row-loading {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Cart item variation meta (color, size) */
.cart-item-meta {
    font-size: 13px;
    color: #aeb3c3;
    margin-top: 5px;
}

.cart-item-meta dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cart-item-meta dt,
.cart-item-meta dd {
    margin: 0;
    display: inline;
}

.cart-item-meta dt::after {
    content: ': ';
}

/* Loading state for buttons */
.ulina-loading,
.ulinaBTN.ulina-loading,
.ulinaBTN2.ulina-loading {
    opacity: 0.6;
    pointer-events: none;
    cursor: wait;
}

/* Cart access row spacing */
.cartAccessRow {
    margin-top: 40px;
}

.calculatShippingForm,
.cartCoupon,
.cart_totals {
    margin-bottom: 30px;
}

/* Shipping calculator form */
.calculatShippingForm .shippingFormElements {
    margin-bottom: 15px;
}

.calculatShippingForm .shippingFormElements label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #52586d;
}

.calculatShippingForm .sfeItem select,
.calculatShippingForm .sfeItem input {
    width: 100%;
}

/* Applied coupon tags */
.ulina-applied-coupons {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ulina-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 13px;
    color: #52586d;
    font-weight: 500;
}

.ulina-coupon-tag a {
    color: #999;
    font-size: 12px;
    transition: color 0.2s ease;
}

.ulina-coupon-tag a:hover {
    color: #e74c3c;
}

/* Coupon discount row highlight */
.cart_totals tr.cart-discount {
    color: #27ae60;
}

.cart_totals tr.cart-discount th,
.cart_totals tr.cart-discount .pi01Price ins {
    color: #27ae60;
}

/* Checkout button */
.cart_totals .checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.cartHints {
    text-align: center;
    font-size: 13px;
    color: #aeb3c3;
    margin-top: 12px;
}

/* ─── Notification toast ─── */
.ulina-notification {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 99999;
    padding: 14px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    max-width: 360px;
    line-height: 1.5;
}

.ulina-notification.show {
    transform: translateX(0);
}

.ulina-notification.success {
    background: #27ae60;
}

.ulina-notification.error {
    background: #e74c3c;
}

/* =====================================================
   CHECKOUT PAGE — WooCommerce field adaptations
   theme.css already handles the core checkout styles;
   these rules only patch WooCommerce‑generated markup
   so it matches the original checkout.html 1 : 1.
   ===================================================== */

/* ---- Layout: prevent squeeze on refresh ---- */
.checkoutPage {
    width: 100%;
    box-sizing: border-box;
}

.checkoutPage .container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.checkoutPage form.checkout {
    width: 100%;
    min-width: 0;
}

.checkoutPage .col-lg-6 {
    min-width: 0;
}

.orderReviewWrap {
    min-width: 0;
}

.orderReview {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    box-sizing: border-box;
}

.orderReview table {
    width: 100%;
    table-layout: fixed;
}

/* ---- form‑row (WooCommerce <p> wrappers) ---- */
.checkoutForm .form-row {
    margin: 0;
    padding: 0;
    position: relative;
}

/* Hide labels by default — original uses placeholder‑only */
.checkoutForm .form-row > label {
    display: none !important;
}

/* Show label on validation error so user knows which field */
.checkoutForm .form-row.woocommerce-invalid > label,
.checkoutForm .form-row.woocommerce-validated > label {
    display: none !important;
}

/* WooCommerce input‑wrapper span — full width */
.checkoutForm .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

/* Input text color and placeholder */
.checkoutForm .form-row input.input-text {
    color: #52586d;
}
.checkoutForm .form-row input.input-text::placeholder {
    color: #aeb3c3;
    opacity: 1;
}
.checkoutForm .form-row textarea {
    color: #52586d;
}
.checkoutForm .form-row textarea::placeholder {
    color: #aeb3c3;
    opacity: 1;
}

/* Focus state */
.checkoutForm .form-row input:focus,
.checkoutForm .form-row textarea:focus,
.checkoutForm .form-row select:focus {
    border-color: #9ebbbd;
    outline: none;
    color: #52586d;
}

/* Hide native country select — nice-select takes over, prevents flash */
.checkoutForm select#billing_country {
    display: none;
}

/* Native <select> fallback for WooCommerce form-row selects */
.checkoutForm .form-row select {
    width: 100%;
    height: 54px;
    border: 1px solid #c5d0cf;
    border-radius: 54px;
    padding: 0 24px;
    font-size: 16px;
    color: #aeb3c3;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    margin: 0 0 12px;
}

/* Country nice-select dropdown — fixed height, scrollable, white bg */
.checkoutForm .nice-select .list {
    background: #fff !important;
    max-height: 500px;
    overflow-y: auto;
}

.checkoutForm .nice-select .option {
    background: #fff;
}

/* Override WooCommerce default half-width on first/last name fields */
.checkoutForm .form-row-first,
.checkoutForm .form-row-last {
    width: 100% !important;
    float: none !important;
}

/* Required asterisk / optional text */
.checkoutForm .form-row .required { color: #e74c3c; }
.checkoutForm .form-row .optional { display: none; }

/* ---- Newsletter opt-in checkbox (Account Information) ---- */
.ulina-newsletter-optin {
    position: relative;
    padding: 8px 0 0;
}

.ulina-newsletter-optin input[type="checkbox"] {
    opacity: 0;
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
}

.ulina-newsletter-optin label {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #52586d;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    padding: 0 0 0 34px;
    margin: 0;
    display: block;
}

.ulina-newsletter-optin label:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid #c5d0cf;
    position: absolute;
    left: 0;
    top: 3px;
    text-align: center;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    line-height: 15px;
    color: #fff;
    background: transparent;
    transition: all ease 350ms;
}

.ulina-newsletter-optin input[type="checkbox"]:checked + label:before {
    content: '\f00c';
    background: #9ebbbd;
    border-color: #9ebbbd;
}

/* ---- Account Information section (guests) ---- */
.ulina-account-info {
    margin-bottom: 35px;
    padding-right: 60px;
}

.ulina-account-info h3 {
    font-size: 24px;
    line-height: 1;
    margin: 0 0 32px;
}

.ulina-account-info input {
    display: block;
    width: 100%;
    height: 54px;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    color: #52586d;
    border: 1px solid #ebebeb;
    border-radius: 54px;
    background: transparent;
    padding: 0 20px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.3s ease;
}

.ulina-account-info input:focus {
    border-color: #9ebbbd;
}

.ulina-account-info input::-webkit-input-placeholder { color: #aeb3c3; opacity: 1; }
.ulina-account-info input::-moz-placeholder { color: #aeb3c3; opacity: 1; }
.ulina-account-info input:-ms-input-placeholder { color: #aeb3c3; opacity: 1; }

@media (max-width: 991px) {
    .ulina-account-info {
        padding-right: 0;
    }
}

/* ---- Hide MailPoet WooCommerce checkout opt-in ---- */
#mailpoet_woocommerce_checkout_optin,
label[data-automation-id="woo-commerce-subscription-opt-in"],
.woocommerce-form__label-for-checkbox[data-automation-id="woo-commerce-subscription-opt-in"] {
    display: none !important;
}

/* ---- Ship to different address ---- */
/* Same: theme.css handles .shippingAddress input + label */

/* ---- Coupon code section ---- */
/* theme.css handles .shippingCoupons — no overrides needed */

/* ---- Order review ---- */
/* theme.css handles .orderReviewWrap, .orderReview, table styles */

/* Quantity badge in item list */
.orderReview table tbody .product-quantity {
    font-weight: 600;
    color: #7b9496;
    margin-left: 4px;
}

/* ---- Order item color/size inline meta ---- */
.orderReview table tbody .ulina-item-meta {
    display: inline-block;
    margin-left: 6px;
    font-size: 13px;
    color: #7b9496;
    font-weight: 400;
}

.orderReview table tbody .ulina-item-meta-label {
    color: #52586d;
    font-weight: 500;
}

.orderReview table tbody .ulina-meta-sep {
    margin: 0 4px;
    color: #c5d0cf;
}

/* ---- Order items expand / collapse ---- */
.orderReview table tbody tr.ulina-order-item-hidden {
    display: none;
}

.orderReview table tfoot tr.shippingRow td,
.orderReview table tfoot tr.shippingRow td .pi01Price,
.orderReview table tfoot tr.shippingRow td .pi01Price ins {
    white-space: nowrap;
}

.orderReview table tbody tr.ulina-order-toggle-row td {
    text-align: center;
    padding: 12px 0 6px;
    border: none;
}

.orderReview table tbody .ulina-order-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    color: #7b9496;
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    outline: none;
}

.orderReview table tbody .ulina-order-toggle:hover {
    color: #52586d;
}

.orderReview table tbody .ulina-order-toggle:focus {
    outline: none;
}

.orderReview table tbody .ulina-order-toggle i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.orderReview table tbody .ulina-order-toggle.expanded i {
    transform: rotate(180deg);
}

/* Coupon discount row — green */
.orderReview table tfoot tr.cart-discount th,
.orderReview table tfoot tr.cart-discount td .pi01Price ins {
    color: #27ae60;
}

/* Coupon remove link in order review table */
.orderReview table tfoot tr.cart-discount th .ulina-remove-coupon {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-left: 4px;
}

.orderReview table tfoot tr.cart-discount th .ulina-remove-coupon:hover {
    color: #e74c3c;
}

/* Fade transition for coupon removal */
.orderReview table tfoot tr.cart-discount,
.ulina-coupon-tag {
    transition: opacity 0.3s ease;
}

/* Applied coupons area on checkout */
.shippingCoupons .ulina-applied-coupons {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    clear: both;
}

.shippingCoupons .ulina-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f7f0;
    border: 1px solid #27ae60;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    color: #27ae60;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shippingCoupons .ulina-coupon-tag a {
    color: #27ae60;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.shippingCoupons .ulina-coupon-tag a:hover {
    color: #e74c3c;
}

/* Loading state for apply button */
.ulina-checkout-apply-coupon.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ---- Payment methods ---- */
/* theme.css handles .wc_payment_methods radio + label + .paymentDesc(.shows).
   No extra overrides needed — .paymentDesc defaults to display:none,
   .paymentDesc.shows displays it. */

/* Gateway icon in label */
.wc_payment_methods li label img {
    max-height: 24px;
    vertical-align: middle;
    margin-left: 8px;
}

/* ---- Place order ---- */
.placeOrderBTN.ulinaBTN {
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-radius: 54px;
    margin: 0;
    background: #9ebbbd;
    border: none;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.placeOrderBTN.ulinaBTN::before,
.placeOrderBTN.ulinaBTN::after {
    display: none !important;
}

.placeOrderBTN.ulinaBTN:hover {
    background: #52586d;
}

.place-order {
    margin: 0;
    padding: 0;
}

/* Terms & conditions */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 15px;
}

/* WooCommerce validation error state */
.checkoutForm .form-row.woocommerce-invalid input.input-text,
.checkoutForm .form-row.woocommerce-invalid select,
.checkoutForm .form-row.woocommerce-invalid .nice-select {
    border-color: #e74c3c !important;
}

/* Country nice-select error state */
.checkoutForm .nice-select.ulina-field-error {
    border-color: #e74c3c !important;
}

.checkoutForm .ulina-field-error-msg,
.ulina-account-info .ulina-field-error-msg {
    display: block;
    color: #e74c3c;
    font-size: 13px;
    margin: -8px 0 12px 24px;
    font-family: 'Jost', sans-serif;
}

/* Account Information — error input border */
.ulina-account-info input.ulina-input-error,
.ulina-account-info input[style*="border-color: rgb(231, 76, 60)"] {
    border-color: #e74c3c !important;
}

/* Validated (success) state */
.checkoutForm .form-row.woocommerce-validated input.input-text,
.checkoutForm .form-row.woocommerce-validated select,
.checkoutForm .form-row.woocommerce-validated .nice-select {
    border-color: #9ebbbd;
}

/* Hide WooCommerce checkout notice group — rely on inline field validation */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
    display: none !important;
}

/* WooCommerce notices on checkout */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    padding: 12px 20px;
    margin: 0 0 20px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.6;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .checkoutForm {
        padding: 0 !important;
    }
    .shippingCoupons {
        padding: 0 !important;
        margin-top: 40px;
    }
    .orderReviewWrap {
        padding: 0 !important;
        margin-top: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════
 * MY ACCOUNT PAGE
 * ═══════════════════════════════════════════════════════════ */

.ulinaMyAccountSection {
    padding: 80px 0 100px;
}

/* ── Login / Lost Password ── */
.ulinaLoginWrap {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px 36px;
    margin: 0 auto;
}
.ulinaLoginWrap h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #222;
}
.ulinaLoginWrap p {
    font-size: 14px;
    color: #777;
    margin-bottom: 24px;
    line-height: 1.6;
}
.ulinaLoginWrap input[type="text"],
.ulinaLoginWrap input[type="email"],
.ulinaLoginWrap input[type="password"] {
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
    transition: border-color .3s;
    background: #fff;
    color: #444;
}
.ulinaLoginWrap input:focus {
    border-color: #222;
}
.ulinaLoginMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ulinaRememberMe {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}
.ulinaRememberMe input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #222;
    cursor: pointer;
}
.ulinaLostPwd {
    font-size: 14px;
    color: #222;
    text-decoration: underline;
    transition: color .2s;
}
.ulinaLostPwd:hover {
    color: #e74c3c;
}
.ulina-full-btn {
    width: 100%;
    text-align: center;
    display: block;
}
.ulinaRegisterHint {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #777;
}
.ulinaRegisterHint a {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}
.ulinaRegisterHint a:hover {
    color: #e74c3c;
}
.ulina-back-to-login {
    margin-top: 16px;
    font-size: 14px;
}
.ulina-back-to-login a {
    color: #222;
    text-decoration: none;
}
.ulina-back-to-login a:hover {
    text-decoration: underline;
}

/* ── Sidebar Navigation ── */
.ulinaAccountNav {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}
.ulinaAccountUser {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid #eee;
}
.ulinaAccountUser img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.ulinaAccountUserInfo strong {
    display: block;
    font-size: 15px;
    color: #222;
    line-height: 1.3;
}
.ulinaAccountUserInfo span {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    word-break: break-all;
}
.ulinaAccountNav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ulinaAccountNav ul li {
    border-bottom: 1px solid #f5f5f5;
}
.ulinaAccountNav ul li:last-child {
    border-bottom: none;
}
.ulinaAccountNav ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 14px;
    color: #555;
    transition: all .25s;
    text-decoration: none;
}
.ulinaAccountNav ul li a i {
    width: 20px;
    text-align: center;
    font-size: 14px;
    color: #999;
    transition: color .25s;
}
.ulinaAccountNav ul li a:hover,
.ulinaAccountNav ul li.active a {
    background: #f8f8f8;
    color: #222;
}
.ulinaAccountNav ul li a:hover i,
.ulinaAccountNav ul li.active a i {
    color: #222;
}

/* ── Content Area ── */
.ulinaAccountContent {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    min-height: 400px;
}

/* ── Dashboard ── */
.ulinaDashboard h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}
.ulinaDashboard > p {
    font-size: 14px;
    color: #777;
    line-height: 1.7;
    margin-bottom: 30px;
}
.ulinaDashboard > p a {
    color: #222;
    font-weight: 600;
    text-decoration: underline;
}
.ulinaDashCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ulinaDashCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all .3s;
    text-decoration: none;
}
.ulinaDashCard:hover {
    border-color: #222;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.ulinaDashCard i {
    font-size: 28px;
    color: #222;
    margin-bottom: 10px;
}
.ulinaDashCard span {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

/* ── Orders Table ── */
.ulinaOrdersTable {
    width: 100%;
    border-collapse: collapse;
}
.ulinaOrdersTable thead th {
    background: #f8f8f8;
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 2px solid #eee;
}
.ulinaOrdersTable tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #555;
    vertical-align: middle;
}
.ulinaOrdersTable tbody tr:hover {
    background: #fafafa;
}
.ulinaBTN-sm {
    padding: 6px 18px !important;
    font-size: 12px !important;
    line-height: 1.6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ulinaBTN-sm span {
    font-size: 12px !important;
    line-height: 1;
}

/* ── Order Status Badges ── */
.ulina-order-status {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}
.ulina-status-completed {
    background: #d4edda;
    color: #155724;
}
.ulina-status-processing {
    background: #d1ecf1;
    color: #0c5460;
}
.ulina-status-pending {
    background: #fff3cd;
    color: #856404;
}
.ulina-status-on-hold {
    background: #e2e3e5;
    color: #383d41;
}
.ulina-status-cancelled,
.ulina-status-failed {
    background: #f8d7da;
    color: #721c24;
}
.ulina-status-refunded {
    background: #cce5ff;
    color: #004085;
}

/* ── Order Detail ── */
.ulinaOrderDetailHeader {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.ulinaOrderDetailHeader h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin: 0;
}
.ulinaOrderMeta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    font-size: 14px;
    color: #555;
}
.ulinaOrderMeta strong {
    color: #222;
}
.ulinaOrderTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.ulinaOrderTable thead th {
    background: #f8f8f8;
    padding: 10px 14px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    border-bottom: 2px solid #eee;
}
.ulinaOrderTable tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #555;
    vertical-align: top;
}
.ulinaOrderTable tbody td a {
    color: #222;
    font-weight: 600;
    text-decoration: none;
}
.ulinaOrderTable tbody td a:hover {
    text-decoration: underline;
}
.ulina-item-meta-small {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}
.ulinaOrderTable tfoot th,
.ulinaOrderTable tfoot td {
    padding: 8px 14px;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
}
.ulina-order-total-row th,
.ulina-order-total-row td {
    font-size: 16px !important;
    font-weight: 700;
    color: #222 !important;
    border-top: 2px solid #222;
    border-bottom: none !important;
    padding-top: 12px !important;
}

/* ── Order Addresses ── */
.ulinaOrderAddresses {
    margin: 24px 0;
}
.ulinaOrderAddress h4 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
}
.ulinaOrderAddress address {
    font-style: normal;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
}
.ulinaOrderAddress p {
    font-size: 14px;
    color: #555;
    margin: 2px 0;
}

/* ── Order Actions ── */
.ulinaOrderActions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.ulinaOrderActions .ulinaBTN,
.ulinaOrderActions .ulinaBTN2 {
    height: 48px;
    line-height: 48px;
    padding: 0 28px;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}
.ulinaOrderActions .ulinaBTN2 {
    line-height: 46px;
    border-radius: 48px;
}
.ulinaOrderActions .ulinaBTN span {
    line-height: 1;
}

/* ── Edit Address / Account Details ── */
.ulinaEditAddress,
.ulinaEditAccount {
    max-width: 680px;
}
.ulinaEditAddress h3,
.ulinaEditAccount h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 20px;
}
.ulinaEditAccount h4 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-top: 28px;
    margin-bottom: 4px;
}
.ulina-password-hint {
    font-size: 13px;
    color: #999;
    margin-bottom: 16px;
}
.ulina-edit-address-form input,
.ulina-edit-address-form select,
.ulina-edit-account-form input,
.ulina-edit-account-form select {
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 0 20px;
    font-size: 14px;
    margin-bottom: 16px;
    outline: none;
    transition: border-color .3s;
    background: #fff;
    color: #444;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ulina-edit-address-form select,
.ulina-edit-account-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 44px;
}
.ulina-edit-address-form input:focus,
.ulina-edit-address-form select:focus,
.ulina-edit-account-form input:focus,
.ulina-edit-account-form select:focus {
    border-color: #222;
}
.ulina-edit-address-form .ulinaBTN,
.ulina-edit-account-form .ulinaBTN {
    margin-top: 8px;
}

/* ── Empty State ── */
.ulinaEmptyState {
    text-align: center;
    padding: 60px 20px;
}
.ulinaEmptyState i {
    font-size: 48px;
    color: #ddd;
    margin-bottom: 16px;
    display: block;
}
.ulinaEmptyState p {
    font-size: 16px;
    color: #999;
    margin-bottom: 24px;
}

/* ── Pagination ── */
.ulinaAccountPagination {
    margin-top: 24px;
    text-align: center;
}
.ulinaAccountPagination .page-numbers {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    font-size: 14px;
    color: #555;
    margin: 0 3px;
    transition: all .25s;
    text-decoration: none;
}
.ulinaAccountPagination .page-numbers.current,
.ulinaAccountPagination .page-numbers:hover {
    background: #222;
    color: #fff;
    border-color: #222;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .ulinaMyAccountSection {
        padding: 60px 0 80px;
    }
    .ulinaAccountNav {
        margin-bottom: 24px;
    }
    .ulinaDashCards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .ulinaMyAccountSection {
        padding: 40px 0 60px;
    }
    .ulinaAccountContent {
        padding: 20px 16px;
    }
    .ulinaLoginWrap {
        padding: 28px 20px;
    }
    .ulinaDashCards {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ulinaDashCard {
        padding: 20px 12px;
    }
    .ulinaOrdersTable thead {
        display: none;
    }
    .ulinaOrdersTable tbody tr {
        display: block;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }
    .ulinaOrdersTable tbody td {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        border-bottom: 1px solid #f5f5f5;
    }
    .ulinaOrdersTable tbody td:last-child {
        border-bottom: none;
    }
    .ulinaOrdersTable tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #222;
    }
    .ulinaOrderTable {
        font-size: 13px;
    }
    .ulinaOrderMeta {
        flex-direction: column;
        gap: 6px;
    }
    .ulinaOrderActions {
        flex-direction: column;
    }
    .ulinaLoginMeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
 * FRONT PAGE — Blog 左侧大图固定高度
 * ═══════════════════════════════════════════════════════════ */
#masonryGrid2 .shafItem:first-child .blogItem01 img {
    height: 544px;
    width: 100%;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════
 * CONTACT PAGE
 * ═══════════════════════════════════════════════════════════ */

/* Form field error state */
.contactForm .reqError {
    border-color: #e74c3c !important;
}

/* Success / Error message */
.contactForm .con_message {
    display: none;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
}
.contactForm .con_message.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.contactForm .con_message.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* reCAPTCHA badge — slightly less obtrusive */
.grecaptcha-badge {
    z-index: 9;
}

/* ═══════════════════════════════════════════════════════════
 * BLOG DETAIL — COMMENTS  (match blog_details_nsb.html)
 * ═══════════════════════════════════════════════════════════ */

/* Reset WordPress default comment list spacing */
.postCommetnListBox ol.comment-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.postCommetnListBox ol.comment-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.postCommetnListBox ol.comment-list ul.children {
    padding: 0;
    margin: 0 0 0 48px;
    list-style: none;
}

/* Avatar inside singleComment — override WP avatar class */
.singleComment > img,
.singleComment > img.avatar {
    width: 96px;
    height: 96px;
    position: absolute;
    left: 0;
    top: 30px;
    border-radius: 50%;
    object-fit: cover;
}
.postCommetnListBox ol > li:first-child > .singleComment > img,
.postCommetnListBox ol > li:first-child > .singleComment > img.avatar {
    top: 0;
}

/* Comment reply link — match .comment-reply positioning */
.singleComment a.comment-reply {
    height: 48px;
    border: 1px solid #9ebbbd;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    color: #222;
    border-radius: 5px;
    padding: 0 28px;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 31px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.postCommetnListBox ol > li:first-child > .singleComment a.comment-reply {
    top: 0;
}
.singleComment a.comment-reply:hover {
    color: #9ebbbd;
}

/* Comment form — match .commentForm spacing */
.postCommetnFormBox {
    position: relative;
    border: 1px solid #dbdfe3;
    border-radius: 5px;
    padding: 38px 41px 40px;
    margin: 40px 0 0;
}
.postCommetnFormBox h3.commentHeading {
    font-size: 30px;
    line-height: 1;
    margin: 0 0 33px;
}
.postCommetnFormBox .commentForm input,
.postCommetnFormBox .commentForm textarea {
    width: 100%;
    border: 1px solid #dbdfe3;
    border-radius: 5px;
    padding: 14px 20px;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
    transition: border-color 0.3s ease;
}
.postCommetnFormBox .commentForm input:focus,
.postCommetnFormBox .commentForm textarea:focus {
    border-color: #9ebbbd;
}
.postCommetnFormBox .commentForm textarea {
    min-height: 160px;
    resize: vertical;
}

/* Hide WordPress default comment form elements that we override */
.postCommetnFormBox .comment-form-cookies-consent {
    display: none;
}
.postCommetnFormBox .comment-respond {
    margin: 0;
    padding: 0;
}
.postCommetnFormBox .comment-respond .comment-reply-title {
    display: none;
}

/* Cancel reply link */
.postCommetnFormBox .comment-reply-title small a {
    font-size: 14px;
    color: #e74c3c;
    margin-left: 10px;
}