/*
Theme Name: YANGSHEEP THEME
Theme URI: https://yangsheep.com.tw
Description: AiSALE 專用 Blocksy 子主題 — 乾淨白底信任精品設計系統（navy + 白 + 橙金，Fraunces + Inter）。
Author: YANGSHEEP DESIGN
Author URI: https://yangsheep.com.tw
Template: blocksy
Version: 2.1.0
Text Domain: yangsheep-theme
*/

/* ============================================================
   AiSALE 子主題「基礎層」
   🔴 頁面元件樣式（ys-hero/ys-btn/ys-card/ys-cta/ys-footer…）已移至
      GreenShift Global Classes（option gspb_global_settings，前綴 ys-*）。
      設計變數（--ys-*）也在 GLS 的 ys-tokens（body）。
   此檔僅保留：全幅 section 骨架、body 基礎排版、toast、Blocksy 母主題橋接。
   改頁面元件樣式 → 改 GLS（wp/gls/ys-global-classes.css + convert + deploy）。
   ============================================================ */

/* ===== greenlight 全幅 section 骨架（內容統一 92vw / max 1280；全寬元素不受影響） ===== */
.wp-section{display:flex;justify-content:center;flex-direction:column;align-items:center;padding-right:var(--wp--spacing--side, min(3vw, 20px));padding-left:var(--wp--spacing--side, min(3vw, 20px));padding-top:var(--wp--spacing--top, 0px);padding-bottom:var(--wp--spacing--bottom, 0px);margin-top:0px;margin-bottom:0px;position:relative;}
.wp-content-wrap{width:92vw;max-width:1280px;}

/* ===== body 基礎（變數見 GLS ys-tokens；body class = ys-page） ===== */
.ys-page{font-family:var(--ys-sans);color:var(--ys-ink);background:var(--ys-cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
.ys-page h1,.ys-page h2,.ys-page h3,.ys-page h4{font-family:var(--ys-serif);color:var(--ys-navy);font-weight:500;line-height:1.12;letter-spacing:-.01em;margin-top:0;margin-bottom:.4em;}
.ys-page img{max-width:100%;}
/* 🔴 這四條只作用於「自家設計系統區塊」(.wp-section)。
   v2.0.0 曾寫成 `.ys-page .site-main a{color:inherit}` 等，特異性 (0,2,1) 會蓋掉
   FluentCart 按鈕的 `color:var(--fct-*-text-color)`（<a> 版按鈕文字變 ink 深色貼深底＝看不見），
   也會清掉外掛自己的 ul/p/img 排版。外掛 UI 不該吃我們的 reset。 */
.ys-page .site-main .wp-section p{margin-top:0;margin-bottom:1em;}
.ys-page .site-main .wp-section ul{margin:0;padding-left:0;list-style:none;}
.ys-page .site-main .wp-section a{color:inherit;text-decoration:none;}
.ys-page .site-main .wp-section img{display:block;}

/* ===== Toast（asal.js 生成，全站） ===== */
.ys-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ys-navy);color:var(--ys-cream);padding:.85rem 1.4rem;border-radius:10px;box-shadow:var(--ys-shadow-lg);font-size:.92rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.23,1,.32,1);z-index:100;}
.ys-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   Blocksy 母主題橋接（依賴 Blocksy DOM，不進 GLS）
   ============================================================ */
.ys-page .site-title,.ys-page .site-title a{font-family:var(--ys-serif);font-weight:600;letter-spacing:-.02em;}
.ys-page .ct-header .menu li > a{font-family:var(--ys-sans);font-weight:500;}
.ys-page .ct-header .ct-button,.ys-page .ct-header [class*="ct-button"]{font-family:var(--ys-sans);font-weight:600;border-radius:10px;}

/* 頁面內容區不留 Blocksy 預設上下距（全幅 section 自帶留白） */
.ys-page.page .site-main{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;}

/* Header：白底 + 細分隔線 + CTA 橙色（自訂器 Button 元素）；內容寬對齊 92vw/1280 */
.ys-page .ct-header{border-bottom:1px solid var(--ys-line);}
.ys-page .ct-header .ct-container{width:92vw;max-width:1280px;padding-left:0;padding-right:0;}
.ys-page .ct-header [data-id="button"] .ct-button{background:var(--ys-orange);border-radius:10px;font-weight:600;}
.ys-page .ct-header [data-id="button"] .ct-button:hover{background:var(--ys-orange-deep);}

/* Offcanvas（手機側欄，深色底）內帳號元件亮色化 */
.ys-page #offcanvas .ys-fcb-account__toggle{color:#fff;}
.ys-page #offcanvas .ys-fcb-open{color:#fff;border-color:rgba(255,255,255,.35);}
.ys-page #offcanvas .ys-fcb-open:hover{border-color:#fff;}

/* Footer Content Block：解除 Blocksy 容器寬度限制，讓 navy 區全幅延伸（ys-footer 本體樣式在 GLS） */
.ys-page .ct-footer [data-row]{padding:0;}
.ys-page .ct-footer .ct-container{max-width:none;width:100%;padding:0;margin:0;}
.ys-page .ct-footer [data-column="content-block"]{width:100%;}
.ys-page .ct-footer .ct-header-content-block{margin:0;width:100%;}
.ys-page .ct-footer .entry-content{margin:0;}

/* ============================================================
   FluentCart 橋接（依賴 FluentCart DOM／CSS 變數，不進 GLS）
   FluentCart 官方以 :root 的 `--fct-*` 供主題覆寫；
   🔴 必須寫在 `:root`：FluentCart 的衍生變數（--fct-card-btn-* / --fct-direct-btn-* …）
      也宣告在 :root，其 `var(--fct-base, 預設)` 在 :root 就已完成代換，
      寫到 body 才覆寫 base 變數是「來不及」的（衍生值早已定案並繼承下去）。
   顏色沿用 §14.5 三層 palette fallback → 改 Blocksy 調色盤，FluentCart 一起變。
   ============================================================ */
:root{
	/* 文字／框線／底色 */
	--fct-primary-text-color:var(--wp--preset--color--palette-color-3,var(--theme-palette-color-3,#1A1C22));
	--fct-secondary-text-color:#667085;                                  /* = --ys-muted（不在調色盤 8 格） */
	--fct-border-color:var(--wp--preset--color--palette-color-5,var(--theme-palette-color-5,#E7E9EE));
	--fct-active-border-color:var(--wp--preset--color--palette-color-4,var(--theme-palette-color-4,#16244A));
	--fct-primary-bg-color:var(--wp--preset--color--palette-color-4,var(--theme-palette-color-4,#16244A));

	/* 主要按鈕（Buy Now／商品卡 Add To Cart／購物車抽屜結帳）＝ AiSALE 橙，同 .ys-btn--primary */
	--fct-btn-bg-color:var(--wp--preset--color--palette-color-1,var(--theme-palette-color-1,#DB8A3E));
	--fct-btn-text-color:#ffffff;
	--fct-btn-border-color:var(--wp--preset--color--palette-color-1,var(--theme-palette-color-1,#DB8A3E));

	/* 次要按鈕（商品頁 Add To Cart／View Cart）＝ 白底 navy 字，同 .ys-btn--ghost */
	--fct-secondary-btn-bg-color:var(--wp--preset--color--palette-color-8,var(--theme-palette-color-8,#FFFFFF));
	--fct-secondary-btn-text-color:var(--wp--preset--color--palette-color-4,var(--theme-palette-color-4,#16244A));
	--fct-secondary-btn-border-color:var(--wp--preset--color--palette-color-5,var(--theme-palette-color-5,#E7E9EE));
	--fct-secondary-btn-hover-bg-color:var(--wp--preset--color--palette-color-6,var(--theme-palette-color-6,#F3F5F8));
}

/* 按鈕外觀對齊 .ys-btn：圓角 10px、字重 600 */
.ys-page .fct-product-card button,
.ys-page .fluent-cart-direct-checkout-button,
.ys-page .fluent-cart-add-to-cart-button,
.ys-page .fct-btn{border-radius:10px;font-weight:600;}

/* 主要按鈕：去掉 FluentCart 的白色漸層光澤＋內陰影（AiSALE 是平面色塊），並鎖白字 */
.ys-page .fct-product-card button,
.ys-page .fct-product-card button:hover,
.ys-page .fluent-cart-direct-checkout-button,
.ys-page .fluent-cart-direct-checkout-button:hover{
	background-image:none;box-shadow:none;border-color:transparent;
	color:var(--fct-btn-text-color,#fff);
}
.ys-page .fct-product-card button:hover,
.ys-page .fluent-cart-direct-checkout-button:hover{background-color:var(--ys-orange-deep,#C5772C);}

/* 商品卡標題維持 navy（reset 收斂後不再 color:inherit，否則會吃到 Blocksy 連結色） */
.ys-page .fct-product-card-title{color:var(--ys-navy,#16244A);}
.ys-page .fct-product-card-title:hover{color:var(--ys-orange-deep,#C5772C);}

/* 商品單頁：Blocksy 的作者頭像／日期 meta 對商品沒有意義 */
.ys-page.single-fluent-products .entry-meta{display:none;}

/* 購物車頁「Go to Checkout」：FluentCart 只給 `a.checkout-button[role=button]`，本身沒有按鈕樣式
   （改樣式前是純文字，且被舊 reset 染成 ink 深色）→ 補成 .ys-btn--primary 的外觀 */
.ys-page .fluent-cart-cart-cart-button-wrap{display:flex;justify-content:flex-end;margin-top:1.4rem;}
.ys-page .fluent-cart-cart-cart-button-wrap .checkout-button{
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--ys-orange,#DB8A3E);color:#fff;
	font-family:var(--ys-sans);font-weight:600;font-size:1rem;line-height:1;
	padding:1rem 1.8rem;border-radius:10px;text-decoration:none;white-space:nowrap;
	transition:background-color .2s ease;
}
.ys-page .fluent-cart-cart-cart-button-wrap .checkout-button:hover{background:var(--ys-orange-deep,#C5772C);color:#fff;}