/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* 0. 核心变量设置 */
:root {
    --ugly-bg: #f2f0ea;           /* 米色背景 */
    --ugly-black: #000000;        /* 纯黑 */
    --ugly-pink: #ec4899;         /* 亮粉色 */
    --ugly-yellow: #fde047;       /* 亮黄色 */
    --ugly-purple: #c084fc;       /* 亮紫色 */
    --ugly-border: 3px solid var(--ugly-black);
    --ugly-shadow: 6px 6px 0px 0px var(--ugly-black);
    --ugly-font-head: 'Archivo Black', sans-serif; /* 标题字体 */
    --ugly-font-body: 'Space Mono', monospace;     /* 正文字体 */
}

/* =========================================
   1. 全局重置 (Global Reset)
   ========================================= */
body {
    background-color: var(--ugly-bg) !important;
    color: var(--ugly-black);
    font-family: var(--ugly-font-body);
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6, .heading-font {
    font-family: var(--ugly-font-head) !important;
    text-transform: uppercase;
    color: var(--ugly-black);
    letter-spacing: -0.02em;
}

/* 暴力去除所有圆角 */
* {
    border-radius: 0 !important;
}

/* 链接样式 */
a {
    text-decoration: none;
    font-weight: 700;
    color: var(--ugly-black);
}

/* =========================================
   1.5 Flatsome 导航栏波浪特效 (FIXED)
   ========================================= */

/* 1. 针对 Flatsome Header Builder 的核心链接 */
#masthead .nav > li > a,
.header-nav .nav > li > a,
.top-bar-nav > li > a {
    font-family: var(--ugly-font-head) !important;
    font-weight: 400 !important; /* 标题字体通常自带粗体 */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important; /* 默认无下划线 */
    position: relative;
}

/* 2. 悬停 (Hover) 和 选中 (Active) 状态 - 强制波浪线 */
#masthead .nav > li > a:hover,
#masthead .nav > li.active > a,
#masthead .nav > li.current-menu-item > a,
.header-nav .nav > li > a:hover {
    color: var(--ugly-pink) !important;
    text-decoration: underline !important;
    text-decoration-style: wavy !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px !important; /* 稍微远离文字 */
    text-decoration-color: var(--ugly-pink) !important;
    background-color: transparent !important; /* 防止 Flatsome 添加背景色 */
    opacity: 1 !important;
}

/* 3. 移除 Flatsome 自带的下划线/高亮效果 (通常是 ::after) */
#masthead .nav > li > a::after,
#masthead .nav > li.active > a::after,
.header-nav .nav > li > a::after {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
}

/* 4. 移动端菜单 (Mobile Menu) */
.mobile-sidebar .nav > li > a {
    border-bottom: 2px solid var(--ugly-black) !important;
}
.mobile-sidebar .nav > li > a:hover {
    color: var(--ugly-pink) !important;
    padding-left: 10px !important; /* 悬停时向右动一点 */
}

/* =========================================
   2. 按钮系统 (Buttons)
   ========================================= */
/* 全局主按钮样式 (包括加入购物车) */
.button, 
button.single_add_to_cart_button, 
input[type="submit"],
.checkout-button,
.btn {
    background-color: var(--ugly-black) !important;
    color: #fff !important;
    border: var(--ugly-border) !important;
    box-shadow: 4px 4px 0 0 var(--ugly-pink) !important; /* 粉色硬阴影 */
    font-family: var(--ugly-font-head) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    padding: 0 25px !important; /* 高度由 height 控制，这里只管左右 */
    transition: all 0.1s ease !important;
    transform: translate(0, 0);
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Hover 效果 */
.button:hover, 
button.single_add_to_cart_button:hover,
input[type="submit"]:hover {
    background-color: var(--ugly-pink) !important;
    color: #fff !important;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--ugly-black) !important;
}

/* Active (点击) 效果 */
.button:active,
button.single_add_to_cart_button:active {
    transform: translate(4px, 4px);
    box-shadow: none !important;
}

/* 次级按钮 (白色背景) */
.button.secondary, .button.is-outline {
    background-color: #fff !important;
    color: var(--ugly-black) !important;
    box-shadow: 4px 4px 0 0 var(--ugly-black) !important;
}

/* =========================================
   3. 数量选择器修复 (Quantity Selector Fix)
   ========================================= */
/* 确保购物车表单水平排列并垂直居中 */
form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 15px; /* 控件之间的间距 */
    margin-bottom: 20px !important;
}

/* 确保加入购物车按钮高度与数量框一致 */
button.single_add_to_cart_button {
    height: 50px !important;
    margin: 0 !important; /* 去除默认边距，由 gap 控制 */
}

/* 数量选择器容器 */
.product-info .quantity {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* 加减号按钮 - 覆盖全局按钮样式 */
.quantity .button.minus,
.quantity .button.plus {
    width: 50px !important;   /* 固定正方形 */
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--ugly-black) !important;
    color: #fff !important;
    border: var(--ugly-border) !important;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2) !important; /* 小黑影 */
    font-size: 24px !important;
    font-family: var(--ugly-font-body) !important;
}

/* 加减号 Hover */
.quantity .button.minus:hover,
.quantity .button.plus:hover {
    background-color: var(--ugly-pink) !important;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 0 var(--ugly-black) !important;
}

/* 中间输入框 */
.quantity input.qty {
    width: 60px !important;
    height: 50px !important;
    min-height: 50px !important;
    background-color: #fff !important;
    color: var(--ugly-black) !important;
    border: var(--ugly-border) !important;
    box-shadow: 3px 3px 0 0 #ccc !important;
    margin: 0 10px !important; /* 左右留白 */
    padding: 0 !important;
    text-align: center;
    font-weight: 900 !important;
    font-size: 1.2rem !important;
}

/* 隐藏输入框默认箭头 */
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity input.qty { -moz-appearance: textfield; }

/* =========================================
   4. 产品列表卡片 (Product Loop)
   ========================================= */
/* 防止阴影被切断 */
.product-small, .product-small .col-inner, .product-small .box-image {
    overflow: visible !important; 
}

/* 卡片容器 */
.product-small .col-inner {
    background: #fff;
    border: var(--ugly-border);
    box-shadow: var(--ugly-shadow);
    padding: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 25px;
    z-index: 1;
    position: relative;
}

/* 卡片悬停 */
.product-small .col-inner:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 0 0 var(--ugly-black);
    z-index: 50;
    border-color: var(--ugly-pink);
}

/* 图片区域 */
.product-small .box-image {
    border-bottom: var(--ugly-border);
}

/* 文本区域 */
.product-small .box-text {
    padding: 15px !important;
    background-color: #fff;
}

/* 价格标签 */
.product-small .price {
    font-family: var(--ugly-font-body);
    font-weight: 700;
    color: var(--ugly-black) !important;
    background: var(--ugly-yellow);
    display: inline-block;
    padding: 4px 8px;
    border: 2px solid var(--ugly-black);
    margin-top: 8px;
    font-size: 1.1rem;
}

/* 促销标签 (Sale Flash) */
.onsale {
    top: -15px !important;
    left: -10px !important;
    right: auto !important;
    background-color: #fff !important;
    color: var(--ugly-black) !important;
    border: var(--ugly-border);
    box-shadow: 3px 3px 0 0 var(--ugly-black);
    font-family: var(--ugly-font-head);
    font-size: 14px;
    padding: 8px 12px;
    transform: rotate(-8deg);
    z-index: 20;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    min-height: 0 !important;
}

/* =========================================
   5. 单品页其他元素 (Single Product Misc)
   ========================================= */

/* 🔧 修复:只对主图容器设置 overflow,不影响 viewport */
.product-gallery {
    overflow: visible !important;
}

/* ✅ 保持 Flickity viewport 默认行为 */
.product-gallery .flickity-viewport {
    overflow: hidden !important; /* 改回 hidden */
}

/* 为每个幻灯片添加内边距,防止阴影被裁切 */
.product-gallery .slide {
    padding: 15px !important;
    box-sizing: border-box;
}

/* 主图样式 */
.product-gallery .slide img {
    border: var(--ugly-border);
    box-shadow: 8px 8px 0 0 var(--ugly-purple);
    width: 100% !important;
    display: block;
}

/* 🎯 缩略图导航修复 */
.product-gallery .flickity-page-dots {
    bottom: -40px !important;
}

.product-gallery .flickity-page-dots .dot {
    width: 12px !important;
    height: 12px !important;
    background: #fff !important;
    border: 2px solid var(--ugly-black) !important;
    opacity: 1 !important;
}

.product-gallery .flickity-page-dots .dot.is-selected {
    background: var(--ugly-pink) !important;
}

/* 🎯 如果使用缩略图导航(非圆点) */
.product-gallery .flickity-nav {
    margin-top: 15px !important;
}

.product-gallery .flickity-nav .flickity-viewport {
    overflow: visible !important; /* 缩略图可以溢出 */
}

.product-gallery .flickity-nav img {
    border: 2px solid var(--ugly-black) !important;
    box-shadow: 3px 3px 0 0 rgba(0,0,0,0.2) !important;
    transition: all 0.2s ease;
}

.product-gallery .flickity-nav .is-nav-selected img {
    border-color: var(--ugly-pink) !important;
    box-shadow: 4px 4px 0 0 var(--ugly-pink) !important;
}

/* 产品标题 */
.product_title {
    font-size: 2.5rem !important;
    line-height: 1;
    margin-bottom: 1rem;
    background: #fff;
    display: inline-block;
    border: var(--ugly-border);
    padding: 10px 20px;
    box-shadow: 6px 6px 0 0 var(--ugly-black);
}

/* 选项卡 (Tabs) */
.woocommerce-tabs ul.tabs {
    border-bottom: 4px solid var(--ugly-black) !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs li {
    border: 3px solid var(--ugly-black) !important;
    border-bottom: none !important;
    background: #e5e5e5 !important;
    margin-right: 5px !important;
    margin-bottom: -3px !important;
}
.woocommerce-tabs ul.tabs li.active {
    background: var(--ugly-yellow) !important;
    position: relative;
    z-index: 2;
    top: 3px;
}
.woocommerce-tabs ul.tabs li a {
    font-weight: 900 !important;
    color: var(--ugly-black) !important;
    text-transform: uppercase;
}
.woocommerce-tabs .panel {
    border: 4px solid var(--ugly-black) !important;
    border-top: none !important;
    background: #fff;
    padding: 30px !important;
    box-shadow: 8px 8px 0 0 var(--ugly-black);
}


/* =========================================
   6. 表单输入框 (Forms)
   ========================================= */
input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea, 
select {
    border: var(--ugly-border) !important;
    background-color: #fff !important;
    box-shadow: 4px 4px 0 0 #ddd !important;
    padding: 12px !important;
    font-family: var(--ugly-font-body);
    font-weight: 700;
    color: var(--ugly-black);
    height: auto !important;
}
input:focus, textarea:focus {
    background-color: #fff0f5 !important;
    border-color: var(--ugly-black) !important;
    box-shadow: 4px 4px 0 0 var(--ugly-black) !important;
    outline: none;
}

/* =========================================
   7. 购物车/结账表格 (Tables)
   ========================================= */
table.shop_table {
    border-collapse: separate;
    border-spacing: 0 10px;
    border: none !important;
}
table.shop_table th {
    background-color: var(--ugly-black);
    color: #fff;
    text-transform: uppercase;
    border: none;
    padding: 15px;
    font-family: var(--ugly-font-head);
}
table.shop_table tr.cart_item {
    background: #fff;
}
table.shop_table td {
    border-top: 3px solid var(--ugly-black);
    border-bottom: 3px solid var(--ugly-black);
    padding: 15px;
}
table.shop_table td:first-child {
    border-left: 3px solid var(--ugly-black);
}
table.shop_table td:last-child {
    border-right: 3px solid var(--ugly-black);
    box-shadow: 4px 4px 0 0 rgba(0,0,0,0.1);
}

/* 移除商品的小红叉 */
a.remove {
    color: red !important;
    font-weight: 900;
    font-size: 24px !important;
    border: 2px solid red !important;
    width: 30px !important;
    height: 30px !important;
    line-height: 26px !important;
    display: inline-block;
    text-align: center;
}
a.remove:hover {
    background: red !important;
    color: white !important;
}

/* =========================================
   8. 头部与底部边框 (Header/Footer)
   ========================================= */
#masthead {
    border-bottom: 4px solid var(--ugly-black);
}
.footer-wrapper {
    border-top: 4px solid var(--ugly-black);
}
/* 搜索框 */
.header-search-form-wrapper .search-field {
    border-right: none !important;
}
.header-search-form-wrapper button {
    border: var(--ugly-border) !important;
    border-left: none !important;
    background: var(--ugly-yellow) !important;
    color: var(--ugly-black) !important;
}

/* =========================================
   9. 额外通用样式 (Additional Utilities)
   ========================================= */

/* 波浪下划线通用类 (可用于任何元素) */
.wavy-underline {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.wavy-underline-pink {
    text-decoration-color: var(--ugly-pink);
}

.wavy-underline-yellow {
    text-decoration-color: var(--ugly-yellow);
}

/* 面包屑导航样式 */
.breadcrumbs a:hover {
    color: var(--ugly-pink) !important;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* 侧边栏/小工具链接 */
.widget a:hover,
.sidebar a:hover {
    color: var(--ugly-pink) !important;
    text-decoration: underline;
    text-decoration-style: wavy;
}