/* ==========================================================================
   Oat & Sage — Design Tokens
   风格定位:米燕麦背景 + 深苔藻绿 + 陶土棕点缀,克制的衬线标题 + 干净无衬线正文
   参考对标:Everlane / Allbirds 的留白与材质感,但避开"暖白+橙棕"的AI默认配色
   ========================================================================== */
:root{
	/* 色板 */
	--oas-bg:        #F7F5EF;   /* 燕麦背景,偏冷一点的暖白,不是常见的 #F4F1EA */
	--oas-surface:   #FFFFFF;   /* 卡片底色 */
	--oas-ink:       #1E231F;   /* 深墨绿黑,替代纯黑 */
	--oas-ink-soft:  #5B6459;   /* 次要文字 */
	--oas-line:      #E4E1D6;   /* 分割线/边框 */
	--oas-sage:      #45573F;   /* 主品牌色:苔藻绿 */
	--oas-sage-dark: #2E3B2A;
	--oas-clay:      #B5714F;   /* 点缀色:陶土棕(比 #D97757 更沉,更少见) */
	--oas-brick:     #A23E33;   /* 折扣/警示色 */
	--oas-radius:    2px;

	/* 字体 */
	--oas-font-display: 'Fraunces', Georgia, serif;
	--oas-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--oas-font-mono:    'Space Mono', 'Courier New', monospace;
}

/* ==========================================================================
   基础重置
   ========================================================================== */
body{
	background: var(--oas-bg);
	color: var(--oas-ink);
	font-family: var(--oas-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
	font-family: var(--oas-font-display);
	color: var(--oas-ink);
	font-weight: 500;
	letter-spacing: -0.01em;
}
a{ color: var(--oas-ink); }
.woocommerce-breadcrumb{ font-size: 13px; color: var(--oas-ink-soft); }
::selection{ background: var(--oas-sage); color: #fff; }

/* 通用按钮 */
.oas-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce-page a.button, .woocommerce-page button.button, input.button{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 28px;
	border: 1px solid var(--oas-ink);
	border-radius: var(--oas-radius);
	background: transparent;
	color: var(--oas-ink) !important;
	font-family: var(--oas-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .15s ease;
	cursor: pointer;
}
.oas-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
input.button:hover{
	background: var(--oas-ink);
	color: var(--oas-bg) !important;
}
.oas-btn--primary, .woocommerce #respond input#submit, .single_add_to_cart_button{
	background: var(--oas-sage);
	border-color: var(--oas-sage);
	color: #fff !important;
}
.oas-btn--primary:hover, .woocommerce #respond input#submit:hover, .single_add_to_cart_button:hover{
	background: var(--oas-sage-dark);
	border-color: var(--oas-sage-dark);
	color:#fff !important;
}
.oas-btn--dark{ background: var(--oas-ink); border-color: var(--oas-ink); color:#fff !important; }
.oas-btn--outline{ background: transparent; }
.oas-center{ text-align: center; margin-top: 32px; }

/* ==========================================================================
   顶部语言 / 币种切换条(全球化功能:自动按 IP 匹配币种 + EN/ES 双语切换)
   ========================================================================== */
.oas-top-bar{
	background: var(--oas-ink);
	color: #E9E7DC;
}
.oas-top-bar__inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 24px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	font-family: var(--oas-font-body);
	font-size: 12px;
	letter-spacing: .02em;
}
.oas-currency-switcher select{
	background: transparent;
	color: #E9E7DC;
	border: none;
	font-family: var(--oas-font-mono);
	font-size: 12px;
	cursor: pointer;
	padding: 2px 4px;
}
.oas-currency-switcher select option{ color: var(--oas-ink); }
.oas-lang-switcher{
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--oas-font-mono);
	text-transform: uppercase;
}
.oas-lang-switcher a{
	color: #B9B6A8;
	text-decoration: none;
	transition: color .15s ease;
}
.oas-lang-switcher a:hover,
.oas-lang-switcher a.is-active{ color: #fff; font-weight: 700; }
.oas-switcher-sep{ color: #6C7568; }
@media (max-width: 600px){
	.oas-top-bar__inner{ justify-content: center; flex-wrap: wrap; padding: 8px 16px; }
}

/* ==========================================================================
   顶部头部(复用 Storefront 结构,仅重绘外观)
   ========================================================================== */
#masthead.site-header{
	background: var(--oas-bg);
	border-bottom: 1px solid var(--oas-line);
	box-shadow: none;
	padding: 18px 0;
}
.site-header .site-branding .site-title, .site-header .site-branding .site-title a{
	font-family: var(--oas-font-display);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--oas-ink) !important;
}
.site-header .site-branding .site-description{ display:none; }
.main-navigation ul li a{
	font-family: var(--oas-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--oas-ink);
}
.main-navigation ul li a:hover{ color: var(--oas-sage); }
.site-header-cart .cart-contents{
	font-family: var(--oas-font-mono);
	color: var(--oas-ink);
}
.site-search input[type="search"]{
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
	background: var(--oas-surface);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.oas-hero{
	max-width: 780px;
	margin: 72px auto 88px;
	padding: 0 24px;
	text-align: center;
}
.oas-hero__tag{
	display:inline-block;
	font-family: var(--oas-font-mono);
	font-size: 12px;
	letter-spacing: .18em;
	color: var(--oas-clay);
	border: 1px solid var(--oas-clay);
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 24px;
}
.oas-hero__title{
	font-size: clamp(36px, 6vw, 64px);
	line-height: 1.08;
	margin: 0 0 20px;
}
.oas-hero__subtitle{
	color: var(--oas-ink-soft);
	font-size: 17px;
	max-width: 520px;
	margin: 0 auto 32px;
}

/* ==========================================================================
   分类货架 —— 签名元素:模拟"吊牌"的圆孔切角卡片
   ========================================================================== */
.oas-section-title{
	display:flex;
	align-items: baseline;
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto 32px;
	padding: 0 24px;
	font-size: 26px;
}
.oas-section-title__en{
	font-family: var(--oas-font-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--oas-ink-soft);
	text-transform: uppercase;
}
.oas-shelf{ max-width: 1200px; margin: 0 auto 88px; padding: 0 24px; }
.oas-shelf__grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}
.oas-tag-card{
	position: relative;
	display: block;
	background: var(--oas-surface);
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
	padding: 16px 14px 18px;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.oas-tag-card:hover{ border-color: var(--oas-sage); transform: translateY(-3px); }
.oas-tag-card__hole{
	position: absolute;
	top: 10px; right: 10px;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 1.5px solid var(--oas-line);
	background: var(--oas-bg);
}
.oas-tag-card__img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: var(--oas-radius);
	margin-bottom: 12px;
	background: #eee;
}
.oas-tag-card__name{
	display:block;
	font-weight: 600;
	font-size: 14px;
	color: var(--oas-ink);
}
.oas-tag-card__count{
	display:block;
	font-family: var(--oas-font-mono);
	font-size: 11px;
	color: var(--oas-ink-soft);
	margin-top: 2px;
}

/* ==========================================================================
   商品网格(首页 + 商品列表页通用,覆盖 WooCommerce 默认 ul.products)
   ========================================================================== */
.oas-featured, .oas-featured--alt{ max-width: 1200px; margin: 0 auto 88px; padding: 0 24px; }
.oas-featured--alt{ background: #F1EEE4; padding: 56px 24px; border-radius: 4px; }

.woocommerce ul.products, .oas-product-grid ul.products{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
}
.woocommerce ul.products li.product{
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}
.woocommerce ul.products li.product img{
	border-radius: var(--oas-radius);
	aspect-ratio: 3/4;
	object-fit: cover;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family: var(--oas-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--oas-ink);
	margin: 12px 0 4px;
}
.woocommerce ul.products li.product .price{
	font-family: var(--oas-font-mono);
	font-size: 14px;
	color: var(--oas-ink-soft);
}
.woocommerce ul.products li.product .price ins{ color: var(--oas-brick); text-decoration: none; }
.woocommerce ul.products li.product .price del{ opacity: .5; }
.woocommerce span.onsale{
	background: var(--oas-clay) !important;
	font-family: var(--oas-font-mono);
	font-size: 11px !important;
	border-radius: 999px !important;
	min-height: unset !important;
	min-width: unset !important;
	padding: 4px 10px !important;
	line-height: 1.4 !important;
}
.woocommerce ul.products li.product .button{
	margin-top: 12px;
	width: 100%;
	justify-content: center;
	padding: 10px 20px;
}
.woocommerce ul.products li.product .star-rating{ display:none; } /* 简约风格隐藏星级,减少视觉噪音 */

/* ==========================================================================
   促销 Banner
   ========================================================================== */
.oas-banner{
	max-width: 1200px;
	margin: 0 auto 88px;
	padding: 72px 48px;
	background: var(--oas-sage);
	color: #fff;
	border-radius: 4px;
}
.oas-banner__text{ max-width: 520px; }
.oas-tag{
	display:inline-block;
	font-family: var(--oas-font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	background: rgba(255,255,255,.15);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.oas-banner h2{ color:#fff; font-size: 32px; margin: 0 0 12px; }
.oas-banner p{ opacity:.85; margin-bottom: 24px; }
.oas-banner .oas-btn{ border-color:#fff; color:#fff !important; background: transparent; }
.oas-banner .oas-btn:hover{ background:#fff; color: var(--oas-sage) !important; }

/* ==========================================================================
   信任条
   ========================================================================== */
.oas-trust{
	max-width: 1200px;
	margin: 0 auto 88px;
	padding: 40px 24px;
	border-top: 1px solid var(--oas-line);
	border-bottom: 1px solid var(--oas-line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.oas-trust__item{ display:flex; gap: 12px; align-items: flex-start; }
.oas-trust__icon{
	width: 34px; height: 34px; flex: none;
	border-radius: 50%;
	background: var(--oas-bg);
	border: 1px solid var(--oas-line);
}
.oas-trust__title{ font-weight: 600; font-size: 14px; margin: 0; }
.oas-trust__desc{ font-size: 13px; color: var(--oas-ink-soft); margin: 2px 0 0; }

/* ==========================================================================
   订阅区
   ========================================================================== */
.oas-newsletter{
	max-width: 620px;
	margin: 0 auto 96px;
	padding: 0 24px;
	text-align: center;
}
.oas-newsletter h2{ font-size: 28px; margin-bottom: 8px; }
.oas-newsletter p{ color: var(--oas-ink-soft); margin-bottom: 24px; }
.oas-newsletter__form{ display:flex; gap: 8px; }
.oas-newsletter__form input[type="email"]{
	flex:1;
	padding: 13px 16px;
	border: 1px solid var(--oas-ink);
	border-radius: var(--oas-radius);
	background: var(--oas-surface);
	font-family: var(--oas-font-body);
}

/* ==========================================================================
   商品详情页
   ========================================================================== */
.woocommerce div.product .woocommerce-product-gallery img{ border-radius: var(--oas-radius); }
.woocommerce div.product .product_title{ font-size: 32px; margin-bottom: 8px; }
.woocommerce div.product p.price{
	font-family: var(--oas-font-mono);
	font-size: 22px;
	color: var(--oas-ink);
}
.woocommerce div.product .woocommerce-product-details__short-description{
	color: var(--oas-ink-soft);
	margin: 16px 0 24px;
}
.woocommerce div.product form.cart .quantity input.qty{
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
	height: 46px;
}
.woocommerce-tabs ul.tabs li{ border-radius: 0; }
.woocommerce-tabs ul.tabs li.active{ border-bottom: 2px solid var(--oas-sage); }
.related.products .oas-section-title, .related.products > h2{
	font-family: var(--oas-font-display);
}

/* ==========================================================================
   购物车 / 结算页
   ========================================================================== */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table{
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
}
.woocommerce-cart table.cart th, .woocommerce-checkout table.shop_table th{
	background: var(--oas-bg);
	font-family: var(--oas-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
#order_review, .woocommerce-checkout-review-order{
	background: var(--oas-surface);
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
	padding: 24px;
}

/* ==========================================================================
   页脚
   ========================================================================== */
#colophon.site-footer{
	background: var(--oas-ink);
	color: #D8DBD4;
	padding: 56px 0 32px;
}
#colophon.site-footer a{ color: #D8DBD4; }
#colophon.site-footer a:hover{ color: #fff; }
#colophon .widget-title{
	font-family: var(--oas-font-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8B9385;
}

/* ==========================================================================
   移动端头部:汉堡菜单 / 底部悬浮工具条(Storefront 自带结构,这里补齐配色和排版)
   ========================================================================== */

/* 汉堡菜单按钮(Storefront 自带 .menu-toggle,默认在窄屏才显示) */
.main-navigation .menu-toggle{
	background: transparent;
	border: 1px solid var(--oas-line);
	border-radius: var(--oas-radius);
	color: var(--oas-ink);
	font-family: var(--oas-font-body);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 10px 16px;
	min-height: 44px; /* 保证手指点击热区足够大 */
}
.main-navigation .menu-toggle:hover{ background: var(--oas-ink); color: var(--oas-bg); border-color: var(--oas-ink); }

/* 展开后的下拉菜单面板 */
@media (max-width: 768px){
	.main-navigation ul.nav-menu, .main-navigation ul.menu{
		background: var(--oas-surface);
		border: 1px solid var(--oas-line);
		border-radius: var(--oas-radius);
		margin-top: 8px;
		padding: 8px 0;
	}
	.main-navigation ul.nav-menu li, .main-navigation ul.menu li{
		width: 100%;
	}
	.main-navigation ul.nav-menu li a, .main-navigation ul.menu li a{
		display: block;
		padding: 14px 20px; /* 手指点击热区加大 */
		border-bottom: 1px solid var(--oas-line);
	}
	.main-navigation ul.nav-menu li:last-child a, .main-navigation ul.menu li:last-child a{ border-bottom: none; }
}

/* Storefront 自带的底部悬浮工具条(手机上常见的搜索/账户/购物车固定条) */
.storefront-handheld-footer-bar{
	background: var(--oas-surface);
	border-top: 1px solid var(--oas-line);
	box-shadow: 0 -2px 8px rgba(0,0,0,.05);
	padding-bottom: env(safe-area-inset-bottom, 0); /* 适配 iPhone 底部安全区,避免被手势条遮挡 */
}
.storefront-handheld-footer-bar ul li a{ color: var(--oas-ink); }
.storefront-handheld-footer-bar .site-search a i,
.storefront-handheld-footer-bar .my-account a i,
.storefront-handheld-footer-bar .cart a i{ color: var(--oas-sage); }

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 992px){
	.oas-shelf__grid{ grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products, .oas-product-grid ul.products{ grid-template-columns: repeat(3, 1fr); }
	.oas-trust{ grid-template-columns: repeat(2, 1fr); }
}

/* 768px:头部改为可换行的紧凑排布,搜索框独占一行 */
@media (max-width: 768px){
	#masthead.site-header{ padding: 14px 0; }
	#masthead.site-header .site-header-cart.menu{ margin-left: auto; }
	.site-header .col-full{ flex-wrap: wrap; row-gap: 10px; }
	.site-search{ order: 3; width: 100%; }
	.site-search input[type="search"]{ width: 100%; }
	.oas-hero{ margin: 48px auto 56px; }
	.oas-banner{ padding: 48px 24px; }
	.oas-banner h2{ font-size: 26px; }
	.oas-section-title{ font-size: 22px; flex-wrap: wrap; }
}

@media (max-width: 600px){
	.oas-shelf__grid{ grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products, .oas-product-grid ul.products{ grid-template-columns: repeat(2, 1fr); }
	.oas-trust{ grid-template-columns: 1fr; }
	.oas-newsletter__form{ flex-direction: column; }
	.oas-banner{ padding: 40px 24px; }
	.woocommerce div.product .product_title{ font-size: 24px; }
	.woocommerce div.product p.price{ font-size: 18px; }
}

/* 480px 及以下(常见手机竖屏宽度):货架卡片/页脚改单列,提升可读性 */
@media (max-width: 480px){
	.oas-shelf__grid{ grid-template-columns: 1fr 1fr; gap: 12px; } /* 保留2列,卡片太窄反而不好看 */
	.footer-grid, #colophon .col-full > .row{ grid-template-columns: 1fr !important; }
	.oas-hero__title{ font-size: 30px; }
	.oas-top-bar__inner{ font-size: 11px; gap: 12px; }
	.oas-currency-switcher select{ max-width: 140px; }
}

/* 购物车 / 结算页表格在窄屏上允许横向滑动,避免挤压变形导致内容看不清 */
@media (max-width: 700px){
	.woocommerce-cart table.cart,
	.woocommerce-checkout table.shop_table,
	.woocommerce-order-details table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	.woocommerce-cart table.cart tbody,
	.woocommerce-cart table.cart thead,
	.woocommerce-checkout table.shop_table tbody,
	.woocommerce-checkout table.shop_table thead{
		display: table;
		width: 100%;
	}
	#order_review, .woocommerce-checkout-review-order{ padding: 16px; }
}

/* 防止任何模块把页面撑出横向滚动条(手机端常见问题) */
html, body{ overflow-x: hidden; max-width: 100%; }
img, table{ max-width: 100%; }

/* 无障碍:可见的键盘焦点 */
a:focus-visible, button:focus-visible, input:focus-visible{
	outline: 2px solid var(--oas-sage);
	outline-offset: 2px;
}

/* 尊重用户的"减少动画"系统设置 */
@media (prefers-reduced-motion: reduce){
	*{ animation: none !important; transition: none !important; }
}