/*
Theme Name: Storefront Ocean Child
Theme URI: https://shop.fish88.tw
Description: Storefront 子主題，海洋主題視覺客製化（導覽列、首頁Banner、服務保證橫條、商品卡片、分類側欄）。Storefront本身更新不會影響此檔案。
Author: fish88.tw
Template: storefront
Version: 1.2.0
Text Domain: storefront-ocean-child
*/

/* =========================================
   海洋主題色彩變數
   ========================================= */
:root {
	--ocean-primary: #042C53;   /* 深藏青 */
	--ocean-secondary: #378ADD; /* 亮青藍 */
	--ocean-accent: #FAC775;    /* 金黃 */
	--ocean-bg-light: #E6F1FB;  /* 淺色背景 */
	--ocean-text-on-dark: #F5F1E8;  /* 深藏青底上的文字 */
	--ocean-text-on-light: #0C447C; /* 淺色底上的文字 */
}

/* =========================================
   第二步：頂部導覽列
   ========================================= */
#masthead.site-header {
	background-color: var(--ocean-primary);
}

#masthead .site-branding a,
#masthead .site-branding .site-title a {
	color: var(--ocean-text-on-dark);
}

#masthead .site-branding .site-title a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

#masthead .site-branding .site-title a::before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAC775' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c3.2-4 7.8-6.2 12.3-6.2 3 0 5.6 2.1 7.5 4.6-1 1.2-1 2.4 0 3.6-1.9 2.5-4.5 4.6-7.5 4.6-4.5 0-9.1-2.2-12.3-6.2z'/%3E%3Ccircle cx='16.8' cy='10.3' r='0.9' fill='%23FAC775' stroke='none'/%3E%3Cpath d='M2 12L0.3 9.3M2 12l-1.7 2.7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ocean-member-icon {
	float: right;
	margin-right: 14px;
	margin-bottom: 1.41575em;
	display: flex;
	align-items: center;
}

/* <768px：Storefront把帳號/購物車移到底部handheld footer bar，
   這裡的浮動icon會變成唯一殘留的float，撐開header底部空白，故隱藏避免重複 */
@media (max-width: 767px) {
	.ocean-member-icon {
		display: none;
	}
}

.ocean-member-icon a {
	display: inline-flex;
	align-items: center;
	color: var(--ocean-text-on-dark);
}

.ocean-member-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	flex-shrink: 0;
}

#masthead #site-navigation ul li a,
#masthead .main-navigation ul li a {
	color: var(--ocean-text-on-dark);
}

#masthead #site-navigation ul li a:hover,
#masthead .main-navigation ul li a:hover {
	color: #85B7EB;
}

#masthead #site-navigation ul li.current-menu-item > a,
#masthead #site-navigation ul li.current_page_item > a,
#masthead .main-navigation ul li.current-menu-item > a,
#masthead .main-navigation ul li.current_page_item > a {
	color: var(--ocean-accent);
}

#masthead .site-header-cart a,
#masthead .site-header-cart .amount,
#masthead .site-header-cart .count {
	color: var(--ocean-text-on-dark);
}

#masthead #site-navigation-menu-toggle {
	color: var(--ocean-text-on-dark);
	background-color: transparent;
}

/* 導覽列下方漸層裝飾線 */
.ocean-nav-decor-line {
	height: 3px;
	width: 100%;
	background: linear-gradient(90deg, #042C53 0%, #378ADD 55%, #FAC775 100%);
}

/* =========================================
   第三步：首頁 Banner
   ========================================= */
.ocean-hero-banner {
	position: relative;
	width: 100%;
	min-height: 440px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	margin-bottom: 0;
	border-radius: 14px;
}

.ocean-hero-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 44, 83, 0.15) 0%, rgba(4, 44, 83, 0.72) 100%);
}

.ocean-hero-banner__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	padding: 2.5rem 6vw;
	text-align: right;
	color: #ffffff;
}

.ocean-hero-banner__headline {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 1.25rem;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	word-break: keep-all;
	overflow-wrap: normal;
}

.ocean-hero-banner__subheadline {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 2rem;
	color: #F5F1E8;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.ocean-hero-banner__button {
	display: inline-block;
	background-color: var(--ocean-accent);
	color: var(--ocean-primary) !important;
	font-weight: 700;
	padding: 0.75rem 2rem;
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ocean-hero-banner__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(4, 44, 83, 0.35);
	color: var(--ocean-primary) !important;
}

@media (max-width: 600px) {
	.ocean-hero-banner {
		min-height: 320px;
		justify-content: center;
	}
	.ocean-hero-banner__content {
		text-align: center;
		max-width: 100%;
	}
	.ocean-hero-banner__headline {
		font-size: 1.5rem;
	}
}

/* =========================================
   第四步：服務保證橫條
   ========================================= */
.ocean-service-bar {
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
}

.ocean-service-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.25rem 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1rem;
}

.ocean-service-bar__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ocean-primary);
	font-weight: 600;
	font-size: 0.95rem;
}

.ocean-service-bar__item svg {
	width: 28px;
	height: 28px;
	stroke: var(--ocean-primary);
	flex-shrink: 0;
}

/* =========================================
   Coming Soon 管理員預覽提示條：淡化，不搶視覺
   ========================================= */
#coming-soon-footer-banner {
	min-height: auto;
	padding: 8px 16px;
	font-size: 12px;
	background: #f7f7f7;
	color: #767676;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

#coming-soon-footer-banner:hover {
	opacity: 1;
}

/* =========================================
   第五步：商品卡片
   ========================================= */
ul.products li.product {
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 12px;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

ul.products li.product:hover {
	border-color: var(--ocean-secondary);
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(4, 44, 83, 0.12);
}

ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
}

ul.products li.product .price {
	color: var(--ocean-primary);
	font-weight: 700;
}

ul.products li.product .price ins {
	color: var(--ocean-primary);
	font-weight: 700;
}

/* =========================================
   第六步：商品分類側邊欄（WooCommerce Product Categories widget）
   ========================================= */
.widget_product_categories ul li,
.widget_layered_nav ul li {
	color: #666;
}

.widget_product_categories ul li.current-cat > a,
.widget_layered_nav ul li.chosen > a {
	background-color: var(--ocean-bg-light);
	color: var(--ocean-text-on-light);
	font-weight: 600;
	border-radius: 4px;
	padding: 2px 8px;
	display: inline-block;
}

.widget_product_categories ul li a,
.widget_layered_nav ul li a {
	color: #666;
}

.widget_product_categories ul li a:hover,
.widget_layered_nav ul li a:hover {
	color: var(--ocean-secondary);
}