/* ============================================ Shopee 泰国站风格定制 - 多主题可切换版 主题：default(Shopee橙) / minimal(简约白) / black-gold(黑金奢华) / green(清新绿) 切换方式： ============================================ */ /* ---------- 默认主题：Shopee 橙 ---------- */ :root, :root[data-shopee-theme="default"] { --sp-primary: #ee4d2d; --sp-primary-dark: #d73211; --sp-accent: #febd69; --sp-bg: #f5f5f5; --sp-card-bg: #ffffff; --sp-card-border: transparent; --sp-text: #222; --sp-text-2: #333; --sp-muted: #999; --sp-header-grad: linear-gradient(100deg, #f53d2d 0%, #ee4d2d 55%, #febd69 130%); --sp-header-link-hover: #ffe3c9; --sp-soft-bg: #fff8f6; --sp-footer-bg: #212121; --sp-footer-text: #b5b5b5; --sp-footer-link: #ddd; --sp-footer-link-hover: #febd69; --sp-light: #fff; --sp-light-2: #ffe8dd; --sp-btn-text: #fff; --sp-search-bg: #fff; --sp-search-border: #febd69; --sp-badge-bg: #fff; --sp-badge-text: #ee4d2d; --sp-star: #febd69; --sp-slide-1: linear-gradient(120deg, #f53d2d, #ee4d2d 60%, #ff7a3c); --sp-slide-2: linear-gradient(120deg, #ff8c42, #ff5b2e 60%, #ee4d2d); --sp-slide-3: linear-gradient(120deg, #5b2a86, #8e44ad 60%, #a55eea); } /* ---------- 主题 2：简约白 ---------- */ :root[data-shopee-theme="minimal"] { --sp-primary: #2563eb; --sp-primary-dark: #1e40af; --sp-accent: #93c5fd; --sp-bg: #fafafa; --sp-card-bg: #ffffff; --sp-card-border: 1px solid #e5e7eb; --sp-text: #111827; --sp-text-2: #374151; --sp-muted: #9ca3af; --sp-header-grad: linear-gradient(100deg, #111827, #1f2937); --sp-header-link-hover: #93c5fd; --sp-soft-bg: #f8fafc; --sp-footer-bg: #111827; --sp-footer-text: #9ca3af; --sp-footer-link: #e5e7eb; --sp-footer-link-hover: #93c5fd; --sp-light: #fff; --sp-light-2: #dbeafe; --sp-btn-text: #fff; --sp-search-bg: #fff; --sp-search-border: #e5e7eb; --sp-badge-bg: #2563eb; --sp-badge-text: #fff; --sp-star: #f59e0b; --sp-slide-1: linear-gradient(120deg, #1f2937, #2563eb); --sp-slide-2: linear-gradient(120deg, #4f46e5, #7c3aed); --sp-slide-3: linear-gradient(120deg, #0ea5e9, #22d3ee); } /* ---------- 主题 3：黑金奢华 ---------- */ :root[data-shopee-theme="black-gold"] { --sp-primary: #d4af37; --sp-primary-dark: #b8962e; --sp-accent: #f5d97a; --sp-bg: #0d0d0d; --sp-card-bg: #181818; --sp-card-border: 1px solid #2a2a2a; --sp-text: #f5f5f5; --sp-text-2: #d1d1d1; --sp-muted: #8a8a8a; --sp-header-grad: linear-gradient(100deg, #0a0a0a, #1a1a1a); --sp-header-link-hover: #d4af37; --sp-soft-bg: #141414; --sp-footer-bg: #050505; --sp-footer-text: #8a8a8a; --sp-footer-link: #d4af37; --sp-footer-link-hover: #f5d97a; --sp-light: #fff; --sp-light-2: #d4af37; --sp-btn-text: #0d0d0d; --sp-search-bg: #fff; --sp-search-border: #d4af37; --sp-badge-bg: #d4af37; --sp-badge-text: #0d0d0d; --sp-star: #d4af37; --sp-slide-1: linear-gradient(120deg, #0a0a0a, #1f1f1f); --sp-slide-2: linear-gradient(120deg, #1c1c1c, #2c2c2c); --sp-slide-3: linear-gradient(120deg, #141414, #242424); } /* ---------- 主题 4：清新绿 ---------- */ :root[data-shopee-theme="green"] { --sp-primary: #16a34a; --sp-primary-dark: #15803d; --sp-accent: #86efac; --sp-bg: #f0fdf4; --sp-card-bg: #ffffff; --sp-card-border: transparent; --sp-text: #14532d; --sp-text-2: #166534; --sp-muted: #86a789; --sp-header-grad: linear-gradient(100deg, #14532d, #16a34a 60%, #4ade80); --sp-header-link-hover: #dcfce7; --sp-soft-bg: #f0fdf4; --sp-footer-bg: #14532d; --sp-footer-text: #bbf7d0; --sp-footer-link: #dcfce7; --sp-footer-link-hover: #86efac; --sp-light: #fff; --sp-light-2: #dcfce7; --sp-btn-text: #fff; --sp-search-bg: #fff; --sp-search-border: #86efac; --sp-badge-bg: #16a34a; --sp-badge-text: #fff; --sp-star: #4ade80; --sp-slide-1: linear-gradient(120deg, #14532d, #16a34a); --sp-slide-2: linear-gradient(120deg, #166534, #22c55e); --sp-slide-3: linear-gradient(120deg, #0f766e, #14b8a6); } /* ============================================ 通用样式（全部使用变量） ============================================ */ /* ---------- 整体背景 ---------- */ body { background-color: var(--sp-bg) !important; } /* ---------- 顶部栏 ---------- */ .wp-site-blocks > header, header.wp-block-template-part { background: var(--sp-header-grad) !important; } .wp-site-blocks > header a, header.wp-block-template-part a { color: var(--sp-light) !important; } .wp-site-blocks > header .wp-block-site-title, header.wp-block-template-part .wp-block-site-title { font-weight: 800 !important; letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.15); } .wp-site-blocks > header .wp-block-navigation a, header.wp-block-template-part .wp-block-navigation a { color: var(--sp-light) !important; } .wp-site-blocks > header .wp-block-navigation a:hover, header.wp-block-template-part .wp-block-navigation a:hover { color: var(--sp-header-link-hover) !important; } /* ---------- 商店页标题 ---------- */ .wp-block-query-title { color: var(--sp-text) !important; font-weight: 700; } /* ---------- 商品卡片 ---------- */ li.product, .wc-block-product { background: var(--sp-card-bg) !important; border: var(--sp-card-border); border-radius: 8px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; transition: transform .2s ease, box-shadow .2s ease !important; } li.product:hover, .wc-block-product:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.14) !important; } li.product .wc-block-components-product-image, li.product .woocommerce-loop-product__link img { border-radius: 8px 8px 0 0; } /* ---------- 商品标题 ---------- */ li.product .wp-block-post-title a, li.product .woocommerce-loop-product__title { color: var(--sp-text-2) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.45 !important; text-align: left !important; text-decoration: none !important; } li.product .wp-block-post-title a:hover { color: var(--sp-primary) !important; } /* ---------- 价格 ---------- */ .wc-block-grid__product-price .wc-block-components-product-price__value, li.product .price, li.product .woocommerce-Price-amount { color: var(--sp-primary) !important; font-weight: 700 !important; font-size: 16px !important; } .wc-block-grid__product-price .wc-block-components-product-price__regular, li.product del .woocommerce-Price-amount, li.product del { color: var(--sp-muted) !important; font-weight: 400 !important; text-decoration: line-through; } /* ---------- 按钮 ---------- */ .add_to_cart_button, li.product .wp-block-button__link, .wp-block-button__link, .button.alt { background-color: var(--sp-primary) !important; border: none !important; border-radius: 4px !important; color: var(--sp-btn-text) !important; font-weight: 600 !important; transition: background-color .15s ease !important; } .add_to_cart_button:hover, .wp-block-button__link:hover, .button.alt:hover { background-color: var(--sp-primary-dark) !important; } /* ---------- 页脚 ---------- */ .wp-site-blocks > footer, footer.wp-block-template-part { background: var(--sp-footer-bg) !important; color: var(--sp-footer-text) !important; } .wp-site-blocks > footer a, footer.wp-block-template-part a { color: var(--sp-footer-link) !important; } .wp-site-blocks > footer a:hover, footer.wp-block-template-part a:hover { color: var(--sp-footer-link-hover) !important; } /* ---------- 链接统一 ---------- */ a { color: var(--sp-primary); } /* ============================================ 首页（商城布局） ============================================ */ /* ---------- 促销横幅 ---------- */ .shopee-banner { background: var(--sp-header-grad) !important; border-radius: 12px; margin-top: 16px; padding: 48px 24px !important; } .shopee-banner .shopee-banner-title { color: var(--sp-light) !important; font-size: 30px !important; font-weight: 800 !important; margin-bottom: 8px; } .shopee-banner p { color: var(--sp-light-2) !important; font-size: 15px; } .shopee-banner .wp-block-button__link { background: var(--sp-light) !important; color: var(--sp-primary) !important; font-weight: 700 !important; border-radius: 999px !important; padding: 12px 36px !important; } /* ---------- 分类导航 ---------- */ .shopee-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 8px 0; } .shopee-cat { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--sp-card-bg); border: var(--sp-card-border); border-radius: 10px; padding: 20px 8px; font-size: 14px; font-weight: 600; color: var(--sp-text-2) !important; text-decoration: none !important; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; } .shopee-cat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); color: var(--sp-primary) !important; } /* ---------- 区块标题（左侧色条） ---------- */ .wp-block-post-content .wp-block-group > .wp-block-heading { position: relative; padding-left: 14px; font-size: 22px !important; font-weight: 700 !important; } .wp-block-post-content .wp-block-group > .wp-block-heading::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 22px; border-radius: 3px; background: var(--sp-primary); } /* ---------- 限时抢购框 ---------- */ .shopee-flashsale { border: 2px dashed var(--sp-primary); border-radius: 12px; padding: 20px; background: var(--sp-soft-bg); } .shopee-flashsale > .wp-block-heading { color: var(--sp-primary) !important; text-align: center; } /* ---------- 移动端适配 ---------- */ @media (max-width: 780px) { .shopee-cats { grid-template-columns: repeat(2, 1fr); } .shopee-banner .shopee-banner-title { font-size: 22px !important; } } /* ============================================ 顶部搜索栏 + 购物车 ============================================ */ .shopee-search .wp-block-search__inside-wrapper { border-radius: 999px; overflow: hidden; background: var(--sp-search-bg); border: 2px solid var(--sp-search-border); } .shopee-search .wp-block-search__input { border: none !important; border-radius: 999px 0 0 999px !important; padding: 10px 18px !important; font-size: 14px; min-width: 220px; } .shopee-search .wp-block-search__button { background: var(--sp-accent) !important; border: none !important; border-radius: 0 999px 999px 0 !important; color: var(--sp-primary) !important; margin: 0 !important; } .shopee-search .wp-block-search__button svg { fill: var(--sp-primary) !important; } .wp-block-woocommerce-mini-cart .wc-block-mini-cart__button { color: var(--sp-light) !important; } .wp-block-woocommerce-mini-cart .wc-block-mini-cart__amount { color: var(--sp-light) !important; font-weight: 700; } .wp-block-woocommerce-mini-cart .wc-block-mini-cart__badge { background: var(--sp-badge-bg) !important; color: var(--sp-badge-text) !important; } /* ============================================ 轮播横幅 ============================================ */ .shopee-carousel { position: relative; overflow: hidden; border-radius: 12px; margin-top: 16px; } .shopee-carousel .shopee-slide { display: none; padding: 52px 32px; border-radius: 12px; text-align: center; } .shopee-carousel .shopee-slide.active { display: block; } .shopee-slide.slide-1 { background: var(--sp-slide-1) !important; } .shopee-slide.slide-2 { background: var(--sp-slide-2) !important; } .shopee-slide.slide-3 { background: var(--sp-slide-3) !important; } .shopee-slide .shopee-slide-title { color: var(--sp-light) !important; font-size: 34px !important; font-weight: 800 !important; margin-bottom: 10px; } .shopee-slide .shopee-slide-sub { color: var(--sp-light) !important; font-size: 16px; opacity: .95; } .shopee-slide .shopee-slide-btn { display: inline-block; margin-top: 18px; background: var(--sp-light); color: var(--sp-primary) !important; font-weight: 700; padding: 12px 36px; border-radius: 999px; text-decoration: none !important; } .shopee-carousel .shopee-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .shopee-carousel .shopee-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; border: none; padding: 0; } .shopee-carousel .shopee-dot.active { background: var(--sp-light); width: 22px; border-radius: 6px; } /* ============================================ 限时抢购倒计时 ============================================ */ .shopee-countdown { display: inline-flex; align-items: center; gap: 8px; background: var(--sp-primary); color: var(--sp-btn-text); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 600; margin-top: 10px; } .shopee-countdown .countdown-time { font-variant-numeric: tabular-nums; background: rgba(0,0,0,.25); padding: 2px 10px; border-radius: 6px; font-weight: 700; letter-spacing: 1px; } /* ============================================ 商品卡片：销量 + 评分 ============================================ */ .shopee-sales { color: var(--sp-muted) !important; font-size: 12px !important; font-weight: 400 !important; } .shopee-rating { color: var(--sp-primary) !important; font-size: 13px !important; font-weight: 600 !important; } .shopee-rating .star { color: var(--sp-star); } /* ============================================ 购物车页（Shopee 风格） ============================================ */ /* 商品列表区域：白卡片 */ .wp-block-woocommerce-cart-items-block .wc-block-cart__items, .wc-block-cart__items { background: var(--sp-card-bg); border-radius: 12px; padding: 8px 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); border: var(--sp-card-border); } /* 商品行：分隔线 */ .wc-block-cart-item { border-bottom: 1px solid #f0f0f0; padding: 18px 0; } .wc-block-cart-item:last-child { border-bottom: none; } .wc-block-cart-item__image img { border-radius: 10px; border: 1px solid #f0f0f0; } /* 商品名 */ .wc-block-cart-item__product-name a { color: var(--sp-text-2) !important; font-size: 15px !important; font-weight: 600; text-decoration: none; transition: color .15s ease; } .wc-block-cart-item__product-name a:hover { color: var(--sp-primary) !important; } /* 商品价格：Shopee 橙 */ .wc-block-cart-item__prices .wc-block-components-product-price, .wc-block-cart-item__prices .wc-block-components-product-price__value { color: var(--sp-primary) !important; font-weight: 700 !important; font-size: 15px !important; } /* 数量选择器：圆角 + 橙色按钮 */ .wc-block-components-quantity-selector { border: 1px solid #ddd !important; border-radius: 999px !important; overflow: hidden; background: #fff; } .wc-block-components-quantity-selector__button { color: var(--sp-primary) !important; font-weight: 700; font-size: 16px; transition: background .15s ease; } .wc-block-components-quantity-selector__button:hover { background: var(--sp-soft-bg) !important; } .wc-block-components-quantity-selector__input { font-weight: 600 !important; } /* 移除链接 */ .wc-block-cart-item__remove-link { color: var(--sp-muted) !important; text-decoration: underline; transition: color .15s ease; } .wc-block-cart-item__remove-link:hover { color: var(--sp-primary) !important; } /* 合计区域：白卡片 */ .wc-block-cart__totals { background: var(--sp-card-bg); border-radius: 12px; padding: 22px; box-shadow: 0 1px 4px rgba(0, 0, 0, .06); border: var(--sp-card-border); } .wc-block-cart__totals-title { font-size: 18px !important; font-weight: 700 !important; color: var(--sp-text) !important; } .wc-block-cart-subtotal .wc-block-components-totals-item__value { color: var(--sp-primary) !important; font-weight: 700; } /* 结账按钮：Shopee 橙大按钮 */ .wc-block-cart__submit-button, .wc-block-components-checkout-button { background: var(--sp-primary) !important; border-radius: 6px !important; color: var(--sp-btn-text) !important; font-weight: 700 !important; font-size: 15px !important; padding: 14px !important; width: 100%; transition: background .15s ease, transform .1s ease, box-shadow .15s ease; } .wc-block-cart__submit-button:hover { background: var(--sp-primary-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(238, 77, 45, .3); } /* 空购物车提示 */ .wc-block-cart__empty-cart__title { color: var(--sp-text) !important; } .wc-block-cart__empty-cart__title .wc-block-cart__empty-cart-icon { opacity: .8; } /* ---------- 前台顶部 logo ---------- */ .shopee-header-logo { margin: 0 !important; } .shopee-header-logo img { width: 40px !important; height: 40px !important; border-radius: 8px; object-fit: contain; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); } /* ============================================ Shopee Mall 店铺装修层 ============================================ */ .mall-storefront, .mall-product-section, .mall-contact-panel { box-sizing: border-box; max-width: 1200px; margin-inline: auto; } .mall-storefront { display: grid; gap: 16px; padding: 16px; } .mall-shop-hero { position: relative; overflow: hidden; padding: 26px; border-radius: 4px; background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .22), transparent 24%), linear-gradient(125deg, #5f1420 0%, #991427 50%, #d0011b 100%); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); } .mall-shop-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 45%, rgba(255, 255, 255, .08)); } .mall-shop-profile, .mall-shop-actions, .mall-shop-stats { position: relative; z-index: 1; } .mall-shop-profile { display: flex; align-items: center; gap: 16px; } .mall-shop-logo { width: 82px; height: 82px; padding: 4px; border: 3px solid #fff; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 3px 12px rgba(0, 0, 0, .24); } .mall-shop-copy h1 { margin: 4px 0; color: #fff; font-size: 26px; font-weight: 700; line-height: 1.2; } .mall-shop-copy p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 13px; } .mall-shop-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 2px; background: #d0011b; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); } .mall-online-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 4px; border-radius: 50%; background: #65dc78; box-shadow: 0 0 0 2px rgba(101, 220, 120, .18); } .mall-shop-actions { display: flex; max-width: 430px; gap: 8px; margin-top: 18px; } .mall-shop-actions a { flex: 1; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 2px; color: #fff !important; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; } .mall-shop-actions a:hover { background: rgba(255, 255, 255, .12); } .mall-shop-stats { display: flex; gap: 28px; margin-top: 20px; color: rgba(255, 255, 255, .82); font-size: 12px; } .mall-shop-stats strong { margin-inline-end: 4px; color: #fff; font-size: 14px; } .mall-shop-tabs { display: flex; overflow-x: auto; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); scrollbar-width: none; } .mall-shop-tabs::-webkit-scrollbar { display: none; } .mall-shop-tabs a { position: relative; flex: 1; min-width: 130px; padding: 15px 16px; color: #333 !important; font-size: 14px; text-align: center; text-decoration: none; white-space: nowrap; } .mall-shop-tabs a.active, .mall-shop-tabs a:hover { color: #d0011b !important; } .mall-shop-tabs a.active::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: 2px; background: #d0011b; } .mall-announcement { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-inline-start: 3px solid #d0011b; color: #333; } .mall-announcement-icon { font-size: 22px; } .mall-announcement strong { display: block; margin-bottom: 2px; font-size: 13px; } .mall-announcement p { overflow: hidden; margin: 0; color: #777; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .mall-announcement > a { color: #aaa !important; font-size: 24px; text-decoration: none; } .mall-campaign-carousel { margin-top: 0; border-radius: 4px; } .mall-campaign-carousel .shopee-slide { min-height: 260px; padding: 54px 34px 66px; border-radius: 4px; text-align: start; } .mall-campaign-carousel .slide-1 { background: linear-gradient(120deg, #8d071a, #d0011b 62%, #ef5667) !important; } .mall-campaign-carousel .slide-2 { background: linear-gradient(120deg, #743d12, #c66b1d 55%, #f1ad4a) !important; } .mall-campaign-carousel .slide-3 { background: linear-gradient(120deg, #173f35, #2f745a 58%, #68a673) !important; } .mall-campaign-label { display: inline-block; margin-bottom: 12px; padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .65); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px; } .mall-campaign-carousel .shopee-slide-title { max-width: 560px; font-size: 34px !important; line-height: 1.18; } .mall-campaign-carousel .shopee-slide-sub { max-width: 560px; } .mall-section { padding: 18px; background: #fff; } .mall-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .mall-section-heading h2 { margin: 0; color: #222; font-size: 18px; font-weight: 600; line-height: 1.3; } .mall-section-heading > a { flex: none; color: #d0011b !important; font-size: 13px; text-decoration: none; } .mall-voucher-strip { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 12px; } .mall-voucher-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 86px; gap: 12px; padding: 14px 14px 14px 18px; overflow: hidden; border: 1px solid #f3b5bd; background: #fff7f8; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); } .mall-voucher-card::before, .mall-voucher-card::after { content: ""; position: absolute; inset-inline-start: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; } .mall-voucher-card::before { top: -6px; } .mall-voucher-card::after { bottom: -6px; } .mall-voucher-card strong, .mall-voucher-card span { display: block; } .mall-voucher-card strong { margin-bottom: 5px; color: #d0011b; font-size: 15px; } .mall-voucher-card span { color: #777; font-size: 11px; line-height: 1.35; } .mall-voucher-card > a { padding: 7px 10px; border-radius: 2px; background: #d0011b; color: #fff !important; font-size: 11px; font-weight: 600; text-decoration: none; } .mall-category-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .mall-category-rail a { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 8px; color: #333 !important; font-size: 12px; text-align: center; text-decoration: none; } .mall-category-rail span { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid #eee; border-radius: 50%; background: linear-gradient(145deg, #fff, #f3f3f3); font-size: 32px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); } .mall-category-rail a:hover span { border-color: #d0011b; transform: translateY(-2px); } .mall-product-section { margin-block: 16px; padding: 18px !important; background: #fff; } .mall-product-section.shopee-flashsale { border: 0; border-top: 3px solid #d0011b; border-radius: 0; background: #fff; } .mall-product-section .products { margin-bottom: 0 !important; } .mall-contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-block: 16px 90px; padding: 20px; background: #fff; border-top: 3px solid #d0011b; } .mall-contact-panel strong, .mall-contact-panel span { display: block; } .mall-contact-panel span { margin-top: 4px; color: #777; font-size: 13px; } .mall-contact-panel > a { padding: 9px 16px; border: 1px solid #d0011b; color: #d0011b !important; font-size: 13px; text-decoration: none; } .mall-mobile-nav { display: none; } @media (max-width: 767px) { body { padding-bottom: 58px; overflow-x: hidden; } .wp-site-blocks > header, header.wp-block-template-part { background: #d0011b !important; } .wp-site-blocks > header .alignwide, header.wp-block-template-part .alignwide { display: flex !important; flex-wrap: nowrap !important; gap: 10px; padding: 10px 12px !important; } .wp-site-blocks > header .has-global-padding, header.wp-block-template-part .has-global-padding { padding-inline: 0 !important; } .wp-site-blocks > header .alignwide > .wp-block-group:first-child, header.wp-block-template-part .alignwide > .wp-block-group:first-child { flex: 0 0 105px; min-width: 0; gap: 6px; } .wp-site-blocks > header .alignwide > .wp-block-group:last-child, header.wp-block-template-part .alignwide > .wp-block-group:last-child { flex: 1 1 auto; min-width: 0; gap: 6px; } .wp-site-blocks > header .wp-block-site-title, header.wp-block-template-part .wp-block-site-title { min-width: 0; margin: 0; font-size: 13px !important; line-height: 1.25; } .wp-site-blocks > header .wp-block-site-title::after, header.wp-block-template-part .wp-block-site-title::after { content: "MALL"; display: inline-block; margin-inline-start: 6px; padding: 1px 4px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 2px; font-size: 9px; vertical-align: 3px; } .shopee-header-logo img { width: 34px !important; height: 34px !important; border-radius: 50%; } .shopee-search { flex: 1 1 auto; width: auto; min-width: 0; } .shopee-search .wp-block-search__inside-wrapper { width: 100%; border: 0; border-radius: 2px; } .shopee-search .wp-block-search__input { width: 100%; min-width: 0; padding: 8px 12px !important; border-radius: 2px 0 0 2px !important; font-size: 12px; } .shopee-search .wp-block-search__button { border-radius: 0 2px 2px 0 !important; background: #fff !important; } .wp-block-post-content { overflow-x: clip; } .home .wp-block-post-title { display: none; } .wp-site-blocks > header .wp-block-navigation, header.wp-block-template-part .wp-block-navigation { display: none !important; } .home footer.wp-block-template-part, .home .wp-site-blocks > footer { display: none; } .mall-storefront { position: relative; inset-inline-start: -30px; display: block; width: calc(100% + 60px); max-width: none; margin-inline: -30px; padding: 0; background: #f5f5f5; } .mall-shop-hero { min-height: 194px; padding: 18px 14px 14px; border-radius: 0; box-shadow: none; } .mall-shop-profile { gap: 12px; } .mall-shop-logo { width: 72px; height: 72px; } .mall-shop-copy h1 { font-size: 19px; } .mall-shop-badge { font-size: 9px; } .mall-shop-actions { max-width: none; margin-top: 14px; } .mall-shop-actions a { padding: 7px 10px; font-size: 12px; } .mall-shop-stats { justify-content: space-between; gap: 6px; margin-top: 12px; font-size: 10px; } .mall-shop-stats strong { display: block; margin: 0 0 1px; text-align: center; } .mall-shop-tabs { margin-bottom: 8px; } .mall-shop-tabs a { min-width: 92px; padding: 13px 10px; font-size: 12px; } .mall-announcement { margin-bottom: 8px; padding: 12px; border-inline-start: 0; } .mall-announcement-icon { font-size: 18px; } .mall-announcement p { max-width: 255px; } .mall-campaign-carousel { margin-bottom: 8px; border-radius: 0; } .mall-campaign-carousel .shopee-slide { min-height: 240px; padding: 34px 22px 58px; border-radius: 0; } .mall-campaign-carousel .shopee-slide-title { max-width: 310px; font-size: 27px !important; } .mall-campaign-carousel .shopee-slide-sub { max-width: 300px; font-size: 13px; } .mall-campaign-carousel .shopee-slide-btn { margin-top: 16px; padding: 9px 18px; border-radius: 2px; font-size: 12px; } .mall-section { margin-bottom: 8px; padding: 14px 12px; } .mall-section-heading { margin-bottom: 12px; } .mall-section-heading h2 { font-size: 15px; } .mall-section-heading > a { font-size: 11px; } .mall-voucher-strip { display: flex; overflow-x: auto; gap: 8px; margin-inline: -12px; padding-inline: 12px; scroll-snap-type: x proximity; scrollbar-width: none; } .mall-voucher-strip::-webkit-scrollbar { display: none; } .mall-voucher-card { flex: 0 0 285px; min-height: 78px; scroll-snap-align: start; } .mall-category-rail { display: flex; overflow-x: auto; gap: 14px; margin-inline: -12px; padding: 2px 12px 8px; scrollbar-width: none; } .mall-category-rail::-webkit-scrollbar { display: none; } .mall-category-rail a { flex: 0 0 70px; font-size: 10px; } .mall-category-rail span { width: 62px; height: 62px; font-size: 26px; } .mall-product-section { width: 100%; max-width: none; margin-block: 8px; padding: 14px 8px !important; } .mall-product-section .mall-section-heading { padding-inline: 4px; } .mall-product-section .shopee-countdown { margin: 0; padding: 4px 8px; border-radius: 2px; font-size: 10px; } .mall-product-section ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .mall-product-section ul.products::before, .mall-product-section ul.products::after { display: none !important; } .mall-product-section ul.products li.product { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; border-radius: 0 !important; background: #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .11) !important; } .mall-product-section li.product:hover { transform: none; } .mall-product-section li.product img { width: 100%; aspect-ratio: 1; border-radius: 0 !important; object-fit: cover; } .mall-product-section li.product .woocommerce-loop-product__title { display: -webkit-box; min-height: 38px; margin: 0 !important; padding: 8px 8px 2px; overflow: hidden; font-size: 12px !important; line-height: 1.35 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .mall-product-section li.product .price { min-height: 24px; margin: 0 !important; padding: 4px 8px 8px; font-size: 14px !important; } .mall-product-section li.product .button { display: block; margin: 0 8px 8px !important; padding: 7px !important; border-radius: 2px !important; background: #d0011b !important; color: #fff !important; font-size: 10px !important; text-align: center; } .mall-product-section .shopee-rating, .mall-product-section .shopee-sales { font-size: 10px !important; } .mall-contact-panel { margin: 8px 0 70px; padding: 16px 12px; border-top-width: 2px; } .mall-contact-panel strong { font-size: 13px; } .mall-contact-panel span { font-size: 10px; } .mall-contact-panel > a { padding: 8px 10px; font-size: 10px; white-space: nowrap; } .mall-mobile-nav { position: fixed; z-index: 99998; inset-inline: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); height: 58px; padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid #ddd; box-shadow: 0 -2px 8px rgba(0, 0, 0, .08); } .mall-mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #777 !important; font-size: 9px; line-height: 1.15; text-decoration: none; } .mall-mobile-nav a span { font-size: 20px; } .mall-mobile-nav a.active { color: #d0011b !important; } } /* ============================================ 移动端增强适配（全站通用） ============================================ */ @media (max-width: 767px) { /* ---------- 通用商品网格：2 列（商店页/归档/短代码） ---------- */ ul.products, .wc-block-grid ul.wc-block-grid__products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 0 8px !important; } ul.products li.product, .wc-block-grid .wc-block-grid__product { float: none !important; width: auto !important; margin: 0 !important; border-radius: 4px !important; overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .11) !important; } ul.products li.product img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* 商品卡片内容适配 */ ul.products li.product .woocommerce-loop-product__title, .wc-block-grid__product .wp-block-post-title a { font-size: 12px !important; line-height: 1.35 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } ul.products li.product .price { font-size: 14px !important; margin: 0 !important; padding: 4px 8px 6px; } ul.products li.product .button, .add_to_cart_button { display: block; width: auto; margin: 0 8px 8px !important; padding: 7px !important; font-size: 11px !important; text-align: center; } /* ---------- 商品详情页 ---------- */ .woocommerce div.product { overflow: hidden; } .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100% !important; float: none !important; margin: 0 0 16px !important; } .woocommerce div.product div.images img { border-radius: 8px; } .woocommerce div.product .product_title { font-size: 18px !important; } .woocommerce div.product p.price { font-size: 20px !important; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 8px; } .woocommerce div.product form.cart .quantity input { height: 40px; } .woocommerce div.product form.cart .button { flex: 1; min-width: 140px; } /* ---------- 购物车页 ---------- */ .wc-block-cart .wc-block-cart__items, .wc-block-cart .wc-block-cart__totals { width: 100% !important; float: none !important; margin: 0 0 14px !important; } .wc-block-cart-item { padding: 12px 0 !important; } .wc-block-cart-item .wc-block-cart-item__image img { width: 72px !important; height: 72px !important; border-radius: 6px !important; } .wc-block-cart-item__product-name a { font-size: 13px !important; } .wc-block-cart__submit-button { padding: 12px !important; } /* ---------- 结账页 ---------- */ .wc-block-checkout .wc-block-checkout__sidebar, .wc-block-checkout .wc-block-checkout__main { width: 100% !important; float: none !important; } .woocommerce form .form-row { float: none !important; width: 100% !important; } /* ---------- 其他通用 ---------- */ .woocommerce-breadcrumb { font-size: 11px !important; padding: 8px 12px !important; } .woocommerce-result-count, .woocommerce-ordering { float: none !important; margin: 8px 12px !important; display: inline-block; } .woocommerce-ordering select { font-size: 12px !important; padding: 6px !important; } } /* ---------- 小屏手机（480px 以下） ---------- */ @media (max-width: 480px) { .shopee-slide .shopee-slide-title { font-size: 17px !important; } .shopee-slide { padding: 26px 12px !important; } .mall-shop-stats { gap: 8px !important; } .mall-shop-stats span { font-size: 10px !important; } .mall-shop-badge { font-size: 10px !important; } .mall-shop-tabs a { padding: 9px 10px !important; font-size: 12px !important; } .woocommerce div.product form.cart .button { width: 100%; min-width: 0; } } /* ============================================ 移动端：商店页 blocks 商品网格（Product Collection） ============================================ */ @media (max-width: 767px) { /* 网格容器：铺满屏宽，列数交给 WooCommerce 响应式（auto-fill） */ ul.wc-block-product-template, ul.wc-block-grid__products { display: grid !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 8px 8px !important; list-style: none !important; } /* 卡片：flex 纵向，统一高度，底部对齐 */ li.wc-block-product { display: flex !important; flex-direction: column !important; width: auto !important; min-width: 0; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 4px !important; overflow: hidden; background: #fff !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .11) !important; } li.wc-block-product:hover { transform: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .11) !important; } /* 图片：正方形、铺满卡片宽 */ li.wc-block-product .wc-block-components-product-image, li.wc-block-product .wc-block-components-product-image__inner-container { margin: 0 !important; width: 100% !important; } li.wc-block-product .wc-block-components-product-image img { width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 0 !important; } /* 标题：两行截断，统一占位 */ li.wc-block-product .wp-block-post-title { margin: 0 !important; padding: 8px 8px 2px !important; font-size: 12px !important; line-height: 1.35 !important; text-align: left !important; } li.wc-block-product .wp-block-post-title a { font-size: 12px !important; line-height: 1.35 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 32px; text-decoration: none !important; } /* 价格：统一样式 */ li.wc-block-product .wc-block-components-product-price, li.wc-block-product .wc-block-grid__product-price { margin: 0 !important; padding: 2px 8px 4px !important; } li.wc-block-product .wc-block-components-product-price__value { font-size: 14px !important; } li.wc-block-product .wc-block-components-product-price__regular { font-size: 11px !important; } /* 按钮：底部对齐、全宽 */ li.wc-block-product .wp-block-button { margin-top: auto !important; padding: 0 8px 8px !important; } li.wc-block-product .wp-block-button .wp-block-button__link, li.wc-block-product .add_to_cart_button { width: 100%; padding: 7px !important; font-size: 11px !important; text-align: center; border-radius: 2px !important; } } /* ============================================ 移动端：商店页 blocks 卡片对齐修正（精确类名） ============================================ */ @media (max-width: 767px) { /* 标题：强制左对齐、两行截断 */ li.wc-block-product .wp-block-post-title { text-align: left !important; margin: 0 !important; padding: 8px 8px 2px !important; } li.wc-block-product .wp-block-post-title a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 32px; } /* 价格：左对齐，统一占位 */ li.wc-block-product .wp-block-woocommerce-product-price { text-align: left !important; margin: 0 !important; padding: 2px 8px 4px !important; } li.wc-block-product .wp-block-woocommerce-product-price .price, li.wc-block-product .wc-block-components-product-price { margin: 0 !important; } li.wc-block-product .wc-block-components-product-price__value { font-size: 14px !important; color: var(--sp-primary, #ee4d2d) !important; } li.wc-block-product .wc-block-components-product-price__regular { font-size: 11px !important; color: #999 !important; } /* 按钮：全宽、底部对齐 */ li.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto !important; padding: 0 8px 8px !important; text-align: center !important; } li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link, li.wc-block-product .wc-block-components-product-button .wp-block-button__link, li.wc-block-product .add_to_cart_button { display: block; width: 100%; margin: 0 !important; padding: 8px 4px !important; font-size: 12px !important; text-align: center; border-radius: 2px !important; background: var(--sp-primary, #ee4d2d) !important; color: #fff !important; } } /* ============================================ 移动端：突破全局 padding，商品网格铺满屏幕 ============================================ */ @media (max-width: 767px) { /* 商店页 main 内容容器：去掉全局 padding */ main.wp-block-group.has-global-padding, main.is-layout-constrained, .wp-block-post-content.is-layout-constrained { padding-inline: 0 !important; } /* 商品网格：铺满屏宽（仅留 8px 边距） */ ul.wc-block-product-template, ul.wc-block-grid__products { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 8px !important; } /* 面包屑、结果计数等也铺满 */ main .wc-block-breadcrumbs, main .woocommerce-breadcrumb, .wc-block-product-results-count, .woocommerce-result-count { padding-inline: 12px !important; margin-inline: 0 !important; } /* 商店页标题 */ main .wp-block-query-title, main .woocommerce-products-header__title { padding-inline: 12px !important; } } /* ============================================ 移动端：修复商品卡列宽不均（图片撑开 grid） ============================================ */ @media (max-width: 767px) { ul.wc-block-product-template, ul.wc-block-grid__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* grid 项允许收缩到 0 */ ul.wc-block-product-template > *, ul.wc-block-grid__products > * { min-width: 0 !important; max-width: 100% !important; } /* 图片完全自适应列宽 */ li.wc-block-product .wc-block-components-product-image, li.wc-block-product .wc-block-components-product-image__inner-container, li.wc-block-product .wc-block-components-product-image img { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; } li.wc-block-product .wc-block-components-product-image img { aspect-ratio: 1; object-fit: cover; } /* 标题文字防溢出 */ li.wc-block-product .wp-block-post-title, li.wc-block-product .wp-block-post-title a { overflow-wrap: break-word; word-break: break-word; min-width: 0; } } /* ============================================ 移动端：强制 grid 项内容可收缩（修复列宽不均） ============================================ */ @media (max-width: 767px) { ul.wc-block-product-template > li.wc-block-product, ul.wc-block-product-template > li.wc-block-product * { min-width: 0 !important; max-width: 100% !important; } ul.wc-block-product-template > li.wc-block-product img { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: cover !important; } /* 用 flex 强制 2 列（最可靠，不依赖 grid 轨道计算） */ ul.wc-block-product-template.wc-block-product-template__responsive, ul.wc-block-product-template { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } ul.wc-block-product-template > li.wc-block-product { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; } } /* ============================================ 移动端：修复首页模板负偏移（商品出屏） ============================================ */ @media (max-width: 767px) { /* 消除 mall-storefront 的负 margin 偏移 */ .mall-storefront { inset-inline-start: 0 !important; margin-inline: 0 !important; width: 100% !important; } /* 商品网格回到视口内 */ .mall-product-section { margin-inline: 0 !important; width: 100% !important; max-width: none !important; padding-inline: 8px !important; } .mall-product-section ul.products { margin-inline: 0 !important; width: 100% !important; max-width: none !important; } } /* ============================================ 移动端：修复 post-content alignfull 负边距 ============================================ */ @media (max-width: 767px) { .entry-content.alignfull.wp-block-post-content, .wp-block-post-content.alignfull, main > .wp-block-group.alignfull.has-global-padding { margin-inline: 0 !important; width: 100% !important; max-width: none !important; padding-inline: 0 !important; } } /* ============================================ 移动端：商品页/详情页对称留白修复 ============================================ */ @media (max-width: 767px) { /* 商店页商品网格：box-sizing 修复，左右对称 8px */ ul.wc-block-product-template { box-sizing: border-box !important; width: 100% !important; padding-inline: 8px !important; } /* 商品详情页：整体对称 16px 边距（含图片区） */ body.single-product main.wp-block-group, body.single-product main.is-layout-constrained, body.single-product main > .wp-block-group { padding-inline: 16px !important; } body.single-product .woocommerce-product-gallery { margin-inline: 0 !important; width: auto !important; max-width: none !important; } } /* ============================================ 移动端：购物车 + 结账页完整适配 ============================================ */ @media (max-width: 767px) { /* 购物车/结账页整体对称留白 */ body.woocommerce-cart main, body.woocommerce-checkout main, body.woocommerce-cart main.wp-block-group, body.woocommerce-checkout main.wp-block-group { padding-inline: 16px !important; } /* 购物车商品行：图片左 信息右 */ .wc-block-cart-item { display: flex !important; gap: 12px !important; align-items: flex-start !important; flex-wrap: nowrap !important; } .wc-block-cart-item__image { flex: 0 0 76px !important; } .wc-block-cart-item__image img { width: 76px !important; height: 76px !important; object-fit: cover; border-radius: 8px !important; } .wc-block-cart-item__product { flex: 1 1 auto !important; min-width: 0 !important; } .wc-block-cart-item__product-name a { font-size: 13px !important; line-height: 1.4 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .wc-block-cart-item__prices .wc-block-components-product-price__value { font-size: 14px !important; } .wc-block-cart-item__wrap { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap; } /* 数量选择器 */ .wc-block-components-quantity-selector { min-height: 32px !important; max-width: 110px !important; } .wc-block-components-quantity-selector__button { width: 32px !important; height: 32px !important; } .wc-block-components-quantity-selector__input { width: 38px !important; height: 32px !important; } /* 合计区 */ .wc-block-cart__totals { padding: 16px !important; } .wc-block-cart__totals-title { font-size: 16px !important; } .wc-block-cart__submit-button { padding: 14px !important; font-size: 15px !important; } /* 结账页：主区 + 侧栏垂直堆叠 */ .wc-block-checkout__main, .wc-block-checkout__sidebar { width: 100% !important; float: none !important; margin: 0 0 16px !important; } /* 结账表单字段：全宽 + 触控友好 */ .wc-block-checkout .form-row, .wc-block-components-form .form-row, .wc-block-checkout__form .form-row { width: 100% !important; float: none !important; margin-right: 0 !important; } .wc-block-checkout__form input[type="text"], .wc-block-checkout__form input[type="email"], .wc-block-checkout__form input[type="tel"], .wc-block-checkout__form input[type="password"], .wc-block-checkout__form select, .wc-block-components-text-input input, .wc-block-components-combobox input, .wc-block-components-country-input select, .wc-block-components-select select { width: 100% !important; min-height: 46px !important; font-size: 15px !important; border-radius: 6px !important; } /* 结账步骤按钮 */ .wc-block-components-checkout-button { width: 100% !important; padding: 15px !important; font-size: 15px !important; } }