/*! © 2026 Oba Go 欧爸优选 shop.obago.com.au 版权所有，未经许可不得复制使用。Fingerprint: obgshop-kts9r7wjor */
/* 页头。每个页面都加载。 */

/* 页头往下滑时固定在顶部（菜单和购物车随时能点）。Astra 的粘性页头是 Pro 功能，这里用 position: sticky 实现；
   Astra 给 body 设了 overflow-x: hidden，但 html 没设，body 的 overflow 会转交给视口，sticky 照常生效。
   登录后顶部有 WordPress 工具栏：宽屏 32px、≤782px 46px，≤600px 时工具栏不固定、会滚走，所以回到 0。 */
#masthead {
	position: sticky;
	top: 0;
	z-index: 99;
	background: #fff;
}
.admin-bar #masthead {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}
@media (max-width: 600px) {
	.admin-bar #masthead {
		top: 0;
	}
}
/* ≤425px 往下滑时页头往上收起、往上滑出现（mu-plugins/obago-header-autohide.php 加减 obago-header-hidden）。
   往上推出自身高度再多 2px，盖住下沿的阴影线。 */
#masthead {
	transition: transform 0.25s ease;
}
#masthead.obago-header-hidden {
	transform: translateY(calc(-100% - 2px));
}
@media (prefers-reduced-motion: reduce) {
	#masthead {
		transition: none;
	}
}

/* 页头购物车：细线推车图标 + 40px 圆角正方形细边框，右上角件数角标（空购物车不显示）。
   Astra 自带的推车是实心的 Font Awesome 图标，这里隐藏它的 svg，在同一个位置用 CSS mask 画 Lucide 的细线
   shopping-cart（ISC 许可）。颜色：主色蓝 #3e8fc4，悬停深蓝 #2e6f9c，角标用强调色珊瑚橙 #e8834b（跟主站一致）。
   markup：a.cart-container > .ast-addon-cart-wrap > i.astra-icon（角标是它的 ::after）> span.ast-icon > svg。 */
/* 外面几层都用 flex 垂直居中、外框用块级 flex：inline-flex 会落在文字行里，下面多出一截行高，
   整块变成 47px 高、外框被顶高，跟旁边 40px 的菜单按钮中线对不齐。 */
.site-header .ast-header-woo-cart,
.site-header .ast-site-header-cart,
.site-header .ast-site-header-cart-li {
	display: flex;
	align-items: center;
}
.site-header .ast-site-header-cart .cart-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid #3e8fc4;
	border-radius: 10px;
	color: #3e8fc4;
}
.site-header .ast-site-header-cart .cart-container:hover {
	border-color: #2e6f9c;
	color: #2e6f9c;
}
/* Astra 免费版在图标不是默认款、样式为 outline 时，会给 .ast-addon-cart-wrap 加 2px 描边
   （`.ast-menu-cart-outline .ast-addon-cart-wrap`），跟上面的外框叠成双框，这里去掉。 */
.site-header .ast-site-header-cart .ast-addon-cart-wrap {
	display: flex;
	padding: 0;
	line-height: 1;
	border: 0;
}
.site-header .ast-site-header-cart i.astra-icon {
	display: block;
	padding: 0;
}
.site-header .ast-site-header-cart .ast-icon svg {
	display: none;
}
.site-header .ast-site-header-cart .ast-icon {
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-header .ast-site-header-cart i.astra-icon:after {
	top: -16px;
	right: -18px;
	background: #e8834b;
	color: #fff;
	box-shadow: none;
}
.site-header .ast-site-header-cart i.astra-icon[data-cart-total="0"]:after {
	display: none;
}

/* 文字 Logo（Oba Go + 欧爸优选）：跟主站 obago.com.au 页头同一套——拉丁文用 Plus Jakarta Sans 800 + 主色蓝，
   中文副标题用标题字体普惠体、字重 500（只托管了 600，浏览器取最接近的 600）。
   必须连 .site-title a 一起写：Astra 的标题字体规则直接指定在 <a> 上，只写 .site-title 的话 <a> 不继承。 */
.site-title,
.site-title a {
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 800;
	letter-spacing: 0.5px;
}
.site-title a,
.site-title a:hover,
.site-title a:focus,
.site-title a:visited {
	color: #3e8fc4;
}
.site-header .site-description {
	font-family: "Alibaba PuHuiTi 3.0", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-weight: 500;
	color: #2b2a28;
}

/* 三部分当一个 Logo 排：第一行 Oba Go + 欧爸优选（右边，按文字基线对齐）；第二行品类标语
   （mu-plugins/obago-header-categories.php），宽度锁定跟第一行一样、五个词两端分布。
   inline-grid 让容器宽度只由第一行决定；品类行 width:0 + min-width:100% 不参与撑宽，只占满第一行的宽度。
   所以各档字号要保证品类行放得进第一行的宽度，改字号时一起看。 */
.site-header .ast-site-title-wrap {
	display: inline-grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	column-gap: 12px;
}
.site-header .ast-site-title-wrap .site-description {
	margin: 0;
}
.site-header .obago-site-categories {
	grid-column: 1 / -1;
	width: 0;
	min-width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 4px 0 0;
	font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	line-height: 1.4;
	color: #888;
	white-space: nowrap;
}

/* 字号：Oba Go 的 35/26/24px 是 Astra 设置 font-size-site-title；断点跟 Astra 的平板 921px / 手机 544px 一致。 */
.site-header .ast-site-title-wrap .site-description {
	font-size: 22px;
}
.site-header .obago-site-categories {
	font-size: 14px;
}
@media (max-width: 921px) {
	.site-header .ast-site-title-wrap .site-description {
		font-size: 17px;
	}
	.site-header .obago-site-categories {
		font-size: 12px;
	}
}
@media (max-width: 544px) {
	.site-header .ast-site-title-wrap .site-description {
		font-size: 15px;
	}
	.site-header .obago-site-categories {
		font-size: 11px;
	}
}

/* 页头商品搜索框（markup 见 mu-plugins/obago-header-search.php）：圆角胶囊输入框，主色细边框（跟购物车外框同色同粗细），
   右边一个主色实心圆的放大镜按钮（Lucide search 图标，CSS mask 画）。
   电脑版在 Logo 和导航之间，占满中间空位、最宽 420px；手机版在 Logo 那一行下面单独一整行。
   选择器带 .site-header 和 input[type="search"]，权重盖过 Astra 给全站表单输入框设的边框、内边距和圆角。 */
.site-header .obago-header-search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.site-header .obago-header-search input[type="search"] {
	width: 100%;
	height: 40px;
	padding: 0 48px 0 18px;
	border: 1.5px solid #3e8fc4;
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	line-height: 40px;
	color: #2b2a28;
	box-shadow: none;
	outline: 0;
	text-overflow: ellipsis;
}
.site-header .obago-header-search input[type="search"]::placeholder {
	color: #999;
}
.site-header .obago-header-search input[type="search"]:focus {
	border-color: #2e6f9c;
	box-shadow: 0 0 0 3px rgba(62, 143, 196, 0.15);
}
.site-header .obago-header-search button {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #3e8fc4;
	cursor: pointer;
}
.site-header .obago-header-search button:hover,
.site-header .obago-header-search button:focus-visible {
	background: #2e6f9c;
}
.site-header .obago-header-search button::before {
	content: "";
	position: absolute;
	inset: 8px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 电脑版：Astra 这一行是两列 grid（auto auto，左列 Logo、右列导航+购物车），左列改成占满剩余宽度，
   搜索框在 Logo 和导航之间的空位里居中，两边至少留 32px；Logo 不跟着压缩（压缩了标语会折成两行）。 */
#ast-desktop-header .site-primary-header-wrap .ast-builder-grid-row {
	grid-template-columns: minmax(0, 1fr) auto;
}
#ast-desktop-header .site-header-primary-section-left > .ast-builder-layout-element {
	flex-shrink: 0;
}
#ast-desktop-header .obago-header-search {
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0 auto;
	padding: 0 32px;
	box-sizing: content-box;
}
/* 按钮按表单定位，表单两边有留白，这里把留白加回去，按钮才落在输入框里面。 */
#ast-desktop-header .obago-header-search button {
	right: 36px;
}
/* 手机版：Logo 那一行下面，左右跟页头内容对齐。 */
#ast-mobile-header .obago-header-search {
	padding: 0 0 12px;
}
/* 窄一点的电脑屏（<1100px）中间空位只剩两三百像素，两边留白减半，把宽度让给输入框。 */
@media (max-width: 1099px) {
	#ast-desktop-header .obago-header-search {
		padding: 0 16px;
	}
	#ast-desktop-header .obago-header-search button {
		right: 20px;
	}
}

/* 电脑版页头分两行：第一行 Logo + 搜索框 + 我的帐户 + 购物车，第二行品类导航（Astra 的 below 行，菜单是“主菜单”）。
   第二行改成白底、48px 高，第一个菜单项去掉左内边距，跟上面的 Logo 左对齐。 */
#ast-desktop-header .ast-below-header-bar {
	background: #fff;
}
#ast-desktop-header .site-below-header-wrap {
	min-height: 48px;
}
#ast-desktop-header .ast-below-header-bar .main-header-menu > .menu-item:first-child > .menu-link {
	padding-left: 0;
}
/* 主菜单同时是手机弹出菜单，“我的帐户”只给手机用（菜单项加了 obago-mobile-only 类）；电脑版第一行右边已有“我的帐户”。 */
#ast-desktop-header .menu-item.obago-mobile-only {
	display: none;
}
/* 我的帐户（Astra 的 account 元素，文字样式）：前面加 Lucide 的细线 user 图标，深色文字，悬停变主色。 */
.site-header .ast-header-account-link {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-right: 12px;
	font-size: 15px;
	color: #2b2a28;
}
.site-header .ast-header-account-link:hover {
	color: #3e8fc4;
}
.site-header .ast-header-account-link::before {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 手机页头也放了“我的帐户”（跟购物车、菜单按钮并排），只显示图标、不显示文字，不然会把 Logo 挤成几行。 */
#ast-mobile-header .ast-header-account-link {
	gap: 0;
	margin-right: 0;
	padding: 4px;
	font-size: 0;
}
#ast-mobile-header .ast-header-account-link::before {
	width: 26px;
	height: 26px;
}
/* 加了图标以后，右边三个按钮（我的帐户、购物车、菜单）之间的留白收紧，总宽度跟原来只有购物车、菜单时差不多，Logo 不会被挤成两行。 */
#ast-mobile-header .ast-header-account {
	padding: 0 4px 0 0;
}
#ast-mobile-header .ast-header-woo-cart {
	padding: 0 4px;
}
#ast-mobile-header [data-section="section-header-mobile-trigger"] {
	padding-left: 4px;
}
#ast-mobile-header .ast-button-wrap .menu-toggle {
	padding-left: 4px;
	padding-right: 0;
}

/* 很窄的手机（320px 左右）上，“Oba Go 欧爸优选”不折行：不让它在空格、汉字之间断开，不到 360px 宽时字稍微缩小一点放得下。 */
#ast-mobile-header .site-title,
#ast-mobile-header .site-title a,
#ast-mobile-header .site-description {
	white-space: nowrap;
}
@media (max-width: 359px) {
	#ast-mobile-header .site-title,
	#ast-mobile-header .site-title a {
		font-size: 20px;
	}
	#ast-mobile-header .site-description {
		font-size: 14px;
	}
}

/* 页头上方的蓝底公告条（mu-plugins/obago-topbar.php）。手机上只留公告文字，“直邮须知”链接放不下一行，去掉。 */
.obago-topbar {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 8px 16px;
	background: #3e8fc4;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.obago-topbar a,
.obago-topbar a:hover,
.obago-topbar a:focus {
	color: #fff;
	text-decoration: underline;
}
@media (max-width: 544px) {
	.obago-topbar {
		padding: 6px 12px;
		font-size: 12px;
	}
	.obago-topbar a {
		display: none;
	}
}