/* ============================================================
   SWEATY BETTY 完整视觉风格 - 硅谷站 WooCommerce
   颜色来源：实际抓取分析
   主色：#1C1F21 (黑)  粉色：#D6006D (SweatyBetty签名粉)
   字体：Modern Minimal
   ============================================================ */

/* ===== 设计Token ===== */
:root {
    --sb-black: #1C1F21;
    --sb-black-soft: #2D2D2D;
    --sb-white: #FFFFFF;
    --sb-pink: #D6006D;
    --sb-pink-hover: #B8005C;
    --sb-gray: #F4F4F4;
    --sb-gray-mid: #E5E5E5;
    --sb-gray-text: #8C8C8C;
    --sb-light: #FAFAFA;
    --sb-border: #E8E8E8;
    --sb-font: 'Helvetica Neue', Helvetica, -apple-system, BlinkMacSystemFont, sans-serif;
    --sb-spacing: 4px;
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; }

body {
    font-family: var(--sb-font) !important;
    background: var(--sb-white) !important;
    color: var(--sb-black) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
}

.col-full {
    max-width: 1440px !important;
    padding: 0 24px !important;
}

/* ===== Top Bar ===== */
/* Free shipping bar */
.storefront-primary-navigation::before {
    content: "FREE UK STANDARD DELIVERY ON ORDERS OVER \u00A350 | FREE 28-DAY RETURNS";
    display: block;
    text-align: center;
    background: var(--sb-black) !important;
    color: var(--sb-white);
    font-size: 11px;
    padding: 8px 16px;
    letter-spacing: 0.5px;
    font-weight: 400;
}

/* ===== Header ===== */
.site-header {
    background: var(--sb-white) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    padding: 18px 0 !important;
    position: sticky !important;
    top: 0;
    z-index: 1000;
}

.site-branding {
    float: none !important;
    text-align: center;
    margin-bottom: 12px !important;
}

.site-branding .site-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
}

.site-branding .site-title a {
    color: var(--sb-black) !important;
    text-decoration: none !important;
}

/* ===== Navigation ===== */
.main-navigation {
    float: none !important;
    clear: both;
    text-align: center;
    margin-right: 0 !important;
    width: 100% !important;
}

.main-navigation ul {
    display: flex;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li {
    display: inline-block;
    margin: 0 !important;
}

.main-navigation ul li a {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--sb-black) !important;
    padding: 8px 18px !important;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
    color: var(--sb-pink) !important;
}

/* Sub-menu */
.main-navigation ul ul {
    background: var(--sb-white) !important;
    border: 1px solid var(--sb-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.main-navigation ul ul li a {
    padding: 10px 20px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
}

/* ===== Hero Section (Homepage) ===== */
.page-template-default .entry-content,
.home .entry-content {
    margin: 0 !important;
}

.home .entry-header {
    display: none;
}

/* Hero banner area */
.woocommerce-page .page-title {
    font-size: 32px;
    font-weight: 300;
    text-align: center;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 40px 0 10px;
    margin-bottom: 0;
}

/* ===== Product Grid ===== */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    padding: 0 0 40px !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sb-white) !important;
    border: none !important;
    text-align: center;
    transition: transform 0.2s ease;
    overflow: hidden;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: 3/4;
    object-fit: cover;
    background: var(--sb-gray);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--sb-black) !important;
    padding: 12px 8px 2px !important;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

.woocommerce ul.products li.product .price {
    font-size: 13px !important;
    color: var(--sb-gray-text) !important;
    font-weight: 400 !important;
    padding: 0 8px 10px !important;
}

.woocommerce ul.products li.product .button {
    background: var(--sb-black) !important;
    color: var(--sb-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    margin: 0 8px 14px !important;
    width: calc(100% - 16px);
    transition: background 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--sb-pink) !important;
}

/* ===== Single Product Page ===== */
.woocommerce div.product {
    display: flex !important;
    gap: 60px !important;
    padding: 40px 0 !important;
    max-width: 1200px;
    margin: 0 auto;
}

.woocommerce div.product div.images {
    width: 55% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce div.product div.images img {
    width: 100%;
    background: var(--sb-gray);
}

.woocommerce div.product div.summary {
    width: 40% !important;
    float: none !important;
    padding: 20px 0 !important;
}

.woocommerce div.product .summary .product_title {
    font-size: 26px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin-bottom: 8px !important;
}

.woocommerce div.product .summary .price {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--sb-black) !important;
    margin-bottom: 24px !important;
}

.woocommerce div.product .summary .description {
    font-size: 13px;
    line-height: 1.8;
    color: var(--sb-black-soft);
    margin-bottom: 24px;
}

.woocommerce div.product .summary .cart {
    margin-top: 24px;
}

.woocommerce div.product .summary .quantity {
    display: none !important;
}

.woocommerce div.product .summary .button.single_add_to_cart_button {
    background: var(--sb-black) !important;
    color: var(--sb-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 18px 40px !important;
    font-weight: 500 !important;
    width: 100%;
    transition: background 0.2s ease;
    cursor: pointer;
}

.woocommerce div.product .summary .button.single_add_to_cart_button:hover {
    background: var(--sb-pink) !important;
}

/* Size selector styling */
.woocommerce div.product form.cart .variations {
    margin-bottom: 20px;
}

.woocommerce div.product form.cart .variations select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--sb-border);
    border-radius: 0;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--sb-white);
    -webkit-appearance: none;
    appearance: none;
}

/* ===== Cart ===== */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.woocommerce button.button.alt {
    background: var(--sb-black) !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
    font-weight: 500 !important;
}

.woocommerce button.button.alt:hover {
    background: var(--sb-pink) !important;
}

/* ===== Footer ===== */
.site-footer {
    background: var(--sb-white) !important;
    border-top: 1px solid var(--sb-border) !important;
    padding: 40px 0 30px !important;
    text-align: center;
}

.site-footer .col-full {
    max-width: 1440px !important;
}

.site-info {
    font-size: 11px;
    color: var(--sb-gray-text);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ===== Hide Distractions ===== */
.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering,
.storefront-sorting,
.woocommerce-tabs,
.related.products,
.upsells.products,
.storefront-handheld-footer-bar,
.site-header-cart .widget_shopping_cart,
.secondary-navigation,
.storefront-breadcrumb,
.hentry .entry-header .posted-on,
.hentry .entry-header .byline,
.hentry .entry-header .cat-links {
    display: none !important;
}

/* ===== Pagination ===== */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    padding: 30px 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    color: var(--sb-black);
    font-size: 12px;
    letter-spacing: 1px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    color: var(--sb-pink);
    font-weight: 600;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .col-full { padding: 0 16px !important; }
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .woocommerce div.product { flex-direction: column !important; gap: 20px !important; }
    .woocommerce div.product div.images { width: 100% !important; }
    .woocommerce div.product div.summary { width: 100% !important; }
    .site-branding .site-title { font-size: 20px !important; letter-spacing: 3px !important; }
    .main-navigation ul li a { font-size: 10px !important; padding: 6px 10px !important; letter-spacing: 1.5px !important; }
    .woocommerce-page .page-title { font-size: 24px; padding: 20px 0; }
}
