/*
Theme Name: Hiyori (芳芳百貨)
Theme URI: https://wp.38-54-89-54.nip.io
Description: 芳芳百貨溫暖文青風子主題，基於 Storefront。男裝／女裝／客製印花，大地色系、襯線標題、日常平價定位。
Author: 芳芳百貨
Template: storefront
Version: 1.0.0
Text Domain: hiyori
*/

/* ============ 設計變數 ============ */
:root{
  --hy-cream:#F5F0E8;
  --hy-cream-2:#FBF7F0;
  --hy-warm:#EFE7D9;
  --hy-warm-2:#E3D5C0;
  --hy-brown:#4A3F35;
  --hy-brown-2:#7a6d5d;
  --hy-muted:#a89880;
  --hy-terra:#C77B54;
  --hy-terra-d:#a5623f;
  --hy-sand:#E0D0B8;
  --hy-sand-2:#EAD9C5;
}

/* ============ 全域覆蓋 Storefront ============ */
body{
  background-color:var(--hy-cream) !important;
  color:var(--hy-brown);
  font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;
}
#page,#content{ background:transparent !important; }
h1,h2,h3,h4,.site-title,.hy-serif{
  font-family:"Noto Serif TC","Songti TC",serif !important;
  color:var(--hy-brown);
}
a{ color:var(--hy-terra); }
a:hover{ color:var(--hy-terra-d); }

/* header / 導航 */
.site-header,.storefront-primary-navigation{
  background-color:var(--hy-cream-2) !important;
  border-bottom:0.5px solid #e6ddcd;
}
.site-branding .site-title a{ color:var(--hy-brown) !important; }
.site-branding .site-title{ font-family:"Noto Serif TC",serif !important; letter-spacing:.14em; }
.main-navigation ul li a,
.site-header .site-header-cart .cart-contents,
.site-header a{ color:var(--hy-brown) !important; }
.main-navigation ul li a:hover{ color:var(--hy-terra) !important; }
.site-header-cart .cart-contents .count{ background-color:var(--hy-terra) !important; color:#fff !important; }

/* 按鈕統一赤陶色 */
button,input[type="submit"],
.button,a.button,button.button,
.added_to_cart,.single_add_to_cart_button,
.wc-block-components-button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background-color:var(--hy-terra) !important;
  color:#fff !important;
  border-radius:26px !important;
  border:none !important;
}
button:hover,.button:hover,a.button:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background-color:var(--hy-terra-d) !important;
}

/* footer 深棕 */
.site-footer{
  background-color:var(--hy-brown) !important;
  color:#D8CBB8 !important;
}
.site-footer a{ color:#E7DBC9 !important; }
.site-footer .site-info{ background-color:var(--hy-brown) !important; }

/* 首頁全寬（不留側欄位） */
.hy-front{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  margin:0 !important;
}

/* ============ 公告條 ============ */
.hy-announce{
  background:var(--hy-brown);
  color:#E7DBC9;
  text-align:center;
  font-size:13px;
  padding:9px 12px;
  letter-spacing:.3px;
}
.hy-announce i{ vertical-align:-2px; }

/* ============ Hero ============ */
.hy-hero{
  background:var(--hy-warm);
  border-radius:16px;
  padding:44px 40px;
  margin:26px 0 34px;
}
.hy-hero-inner{ display:flex; align-items:center; gap:32px; }
.hy-hero-text{ flex:1; }
.hy-eyebrow{ font-size:12px; letter-spacing:3px; color:var(--hy-muted); margin-bottom:12px; }
.hy-hero-title{
  font-size:38px; line-height:1.25; margin:0 0 16px; font-weight:600;
}
.hy-hero-text p{ font-size:15px; color:var(--hy-brown-2); line-height:1.9; max-width:330px; margin:0 0 26px; }
.hy-hero-img{
  width:240px; height:260px; background:var(--hy-sand); border-radius:16px;
  display:flex; align-items:center; justify-content:center; color:#C0AE92; font-size:64px; flex-shrink:0;
}
.hy-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--hy-terra); color:#fff !important; text-decoration:none;
  padding:13px 28px; border-radius:26px; font-size:14px; font-weight:500;
}
.hy-btn:hover{ background:var(--hy-terra-d); }

/* ============ 區塊標題 ============ */
.hy-sec-head{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 22px; }
.hy-sec-title{ font-size:23px; margin:0; font-weight:600; }
.hy-sec-more{ font-size:13px; color:var(--hy-terra); text-decoration:none; }

/* ============ 分類圓圈 ============ */
.hy-cats{ margin:36px 0; }
.hy-cats-row{ display:flex; justify-content:center; gap:46px; flex-wrap:wrap; }
.hy-cat{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; }
.hy-cat-ic{
  width:86px; height:86px; border-radius:50%; background:var(--hy-sand-2); color:#b8946e;
  display:flex; align-items:center; justify-content:center; font-size:30px; transition:transform .15s;
}
.hy-cat:nth-child(4) .hy-cat-ic{ color:var(--hy-terra); }
.hy-cat:hover .hy-cat-ic{ transform:translateY(-4px); }
.hy-cat span{ font-size:14px; color:var(--hy-brown); }

/* ============ 商品格 ============ */
.hy-new{ margin:44px 0; }
.hy-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hy-pcard{ text-decoration:none; display:block; }
.hy-pimg{
  aspect-ratio:3/4; background:var(--hy-sand-2); border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:#c3a583; font-size:34px; position:relative;
}
.hy-pimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hy-pcard:hover .hy-pimg{ opacity:.88; }
.hy-badge{
  position:absolute; top:10px; left:10px; font-size:11px; font-weight:500;
  background:var(--hy-brown); color:#E7DBC9; padding:3px 9px; border-radius:20px;
}
.hy-pname{ font-size:14px; color:var(--hy-brown); margin-top:12px; }
.hy-pprice,.hy-pprice .amount,.hy-pprice .woocommerce-Price-amount{ font-size:14px; color:var(--hy-terra) !important; font-weight:500; margin-top:4px; }

/* ============ 穿搭日誌 ============ */
.hy-look{ display:flex; align-items:stretch; margin:48px 0; border-radius:16px; overflow:hidden; background:var(--hy-warm); }
.hy-look-img{ width:44%; background:var(--hy-sand); min-height:240px; display:flex; align-items:center; justify-content:center; color:#B79C74; font-size:54px; }
.hy-look-body{ flex:1; padding:40px 36px; }
.hy-look-body .hy-eyebrow{ margin-bottom:10px; }
.hy-look-title{ font-size:24px; line-height:1.4; margin:0 0 14px; font-weight:600; }
.hy-look-body p{ font-size:14px; color:var(--hy-brown-2); line-height:1.9; margin:0 0 18px; }
.hy-link{ font-size:13px; color:var(--hy-terra); font-weight:500; text-decoration:none; }

/* ============ 客製印花橫幅（配角） ============ */
.hy-print{ display:flex; align-items:center; gap:22px; padding:24px 28px; background:var(--hy-warm-2); border-radius:14px; margin:40px 0; }
.hy-print-ic{ width:60px; height:60px; border-radius:12px; background:var(--hy-terra); color:#fbe9dd; display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; }
.hy-print-body{ flex:1; }
.hy-print h3{ font-size:16px; margin:0; font-weight:500; }
.hy-print p{ font-size:13px; color:var(--hy-brown-2); margin:5px 0 0; line-height:1.6; }
.hy-print-btn{ font-size:13px; color:var(--hy-brown) !important; border:1px solid #C1A985; padding:9px 18px; border-radius:24px; text-decoration:none; white-space:nowrap; }
.hy-print-btn:hover{ background:#d8c3a3; }

/* ============ 信任條 ============ */
.hy-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:34px 0; margin:24px 0 40px; border-top:0.5px solid #e0d6c5; border-bottom:0.5px solid #e0d6c5; }
.hy-trust-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.hy-trust-item i{ font-size:26px; color:var(--hy-terra); }
.hy-trust-item span{ font-size:13px; color:var(--hy-brown-2); line-height:1.5; }

/* ============ 響應式 ============ */
@media(max-width:768px){
  .hy-hero{ padding:30px 22px; }
  .hy-hero-inner{ flex-direction:column; align-items:flex-start; }
  .hy-hero-img{ width:100%; height:200px; }
  .hy-hero-title{ font-size:30px; }
  .hy-grid{ grid-template-columns:repeat(2,1fr); }
  .hy-trust{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .hy-look{ flex-direction:column; }
  .hy-look-img{ width:100%; }
  .hy-cats-row{ gap:22px; }
  .hy-cat-ic{ width:72px; height:72px; font-size:26px; }
  .hy-print{ flex-wrap:wrap; }
}