/*
Theme Name: NICOCODAILY JP
Theme URI: https://nicocodaily.com
Author: NICOCODAILY
Description: 台湾発デザインブランド NICOCODAILY の日本向けストア用テーマ。WooCommerce 対応・きれいめベーシック。
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: nicoco-jp
*/

/* =====================================================================
   ★★★  ブランド色票 BRAND PALETTE  ★★★
   全站顏色只改這裡就好。改完整站跟著變。
   (後台「外觀→編輯器→樣式→顏色」也能改，見 theme.json)
   ===================================================================== */
:root {
  --ground:      #FAF8F6;  /* 背景暖白 */
  --surface:     #FFFFFF;  /* 卡片/區塊底 */
  --greige:      #EDE7E1;  /* 次要底色 */
  --greige-line: #E2DAD2;  /* 分隔線 */
  --ink:         #211E1C;  /* 主文字/深色 */
  --ink-soft:    #6B635D;  /* 次要文字 */
  --ink-faint:   #9A928B;  /* 淡文字 */
  --accent:      #9B7A86;  /* 品牌主色 霧紫藕 */
  --accent-deep: #6E5460;  /* 主色深階 hover */
  --sale:        #A8564E;  /* 特價紅 */
  --radius: 3px;
  --maxw: 1200px;
}
:root[data-theme="dark"], /* 保留深色支援（後台可切） */
.theme-dark {
  --ground:#1A1715; --surface:#221E1B; --greige:#2C2723; --greige-line:#37302B;
  --ink:#EFE9E3; --ink-soft:#B3A99F; --ink-faint:#7E756C;
  --accent:#C79FAD; --accent-deep:#D9B9C4; --sale:#D98A82;
}
/* =====================================================================
   ↑↑↑  色票結束。以下是版型，一般不用動。  ↑↑↑
   ===================================================================== */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",Meiryo,sans-serif;
  font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.font-mincho { font-family: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif; }
.font-latin { font-family: "Helvetica Neue",Arial,sans-serif; }

/* promo bar */
.promo { background: var(--ink); color: var(--ground); font-size: 12px; letter-spacing:.04em; text-align:center; padding: 8px 16px; }
.promo b { font-weight: 600; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--greige-line); }
.headrow { display:flex; align-items:center; justify-content:space-between; padding: 16px 24px 12px; max-width: var(--maxw); margin:0 auto; }
.wordmark { font-family:"Helvetica Neue",Arial,sans-serif; font-weight:300; font-size:22px; letter-spacing:.42em; padding-left:.42em; color:var(--ink); text-align:center; }
.wordmark small { display:block; font-size:9px; letter-spacing:.34em; color:var(--ink-faint); margin-top:3px; padding-left:0; }
.header-icons { display:flex; gap:18px; align-items:center; color:var(--ink-soft); }
.header-icons svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.4; }
.header-icons a:hover { color: var(--accent-deep); }
.main-nav { border-top:1px solid var(--greige-line); display:flex; justify-content:center; gap:32px; padding:12px 0; font-size:12.5px; letter-spacing:.08em; flex-wrap:wrap; }
.main-nav a { color:var(--ink-soft); transition:color .18s; }
.main-nav a:hover { color:var(--ink); }
.main-nav a.is-sale { color:var(--sale); font-weight:600; }

/* hero */
.hero { position:relative; background: radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--accent) 26%, var(--greige)) 0%, var(--greige) 55%); min-height:500px; display:flex; align-items:center; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 0); background-size:22px 22px; opacity:.5; }
.hero-inner { max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:2; width:100%; }
.hero-eyebrow { font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.32em; color:var(--accent-deep); margin-bottom:20px; }
.hero h1 { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:500; font-size:clamp(30px,5vw,50px); line-height:1.35; margin:0; letter-spacing:.02em; text-wrap:balance; }
.hero h1 .em { color:var(--accent-deep); }
.hero p.lead { font-size:15px; color:var(--ink-soft); max-width:30em; margin:20px 0 30px; line-height:1.9; }

.btn { display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.1em; background:var(--ink); color:var(--ground); padding:15px 34px; border-radius:var(--radius); transition:background .2s, transform .2s; border:1px solid var(--ink); cursor:pointer; }
.btn:hover { background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1px); color:var(--ground); }
.btn.ghost { background:transparent; color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--ground); }

/* sections */
.section { padding: 64px 0; }
.sec-head { text-align:center; margin-bottom:38px; }
.sec-head .en { font-family:"Helvetica Neue",Arial,sans-serif; font-size:24px; letter-spacing:.18em; font-weight:300; color:var(--ink); margin:0; }
.sec-head .jp { font-size:12px; letter-spacing:.18em; color:var(--ink-faint); margin-top:8px; }

/* category tiles */
.cats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cat { position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--greige); }
.cat .ph { position:absolute; inset:0; transition:transform .5s ease; }
.cat:hover .ph { transform:scale(1.04); }
.cat .label { position:absolute; left:0; right:0; bottom:0; padding:14px 16px; z-index:2; background:linear-gradient(to top, color-mix(in srgb, var(--ink) 55%, transparent), transparent); color:#fff; }
.cat .label .en { font-family:"Helvetica Neue",Arial,sans-serif; font-size:15px; letter-spacing:.12em; }
.cat .label .jp { font-size:11px; opacity:.85; }

/* placeholder image look */
.ph { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--greige)) 0%, var(--greige) 60%), var(--greige); display:flex; align-items:center; justify-content:center; }
.ph::after { content:"N"; font-family:"Helvetica Neue",Arial,sans-serif; font-weight:300; font-size:34px; color:color-mix(in srgb, var(--ink) 15%, transparent); }

/* brand strip */
.brand { background:var(--greige); }
.brand-inner { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.brand .visual { aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; }
.brand .eyebrow { font-family:"Helvetica Neue",Arial,sans-serif; font-size:11px; letter-spacing:.3em; color:var(--accent-deep); margin-bottom:18px; }
.brand h2 { font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif; font-weight:500; font-size:clamp(22px,3vw,30px); line-height:1.55; margin:0 0 20px; letter-spacing:.02em; text-wrap:balance; }
.brand p { color:var(--ink-soft); line-height:2; margin:0 0 26px; font-size:14px; }
.brand a.link { font-size:13px; letter-spacing:.06em; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:3px; display:inline-flex; align-items:center; gap:8px; transition:color .2s; }
.brand a.link:hover { color:var(--accent-deep); }
.brand a.link svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* trust bar */
.trust { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.trust .item { text-align:center; padding:0 12px; }
.trust .item svg { width:26px; height:26px; stroke:var(--accent-deep); fill:none; stroke-width:1.3; margin-bottom:12px; }
.trust .item h3 { font-size:13px; letter-spacing:.06em; margin:0 0 6px; color:var(--ink); }
.trust .item p { font-size:12px; color:var(--ink-soft); margin:0; line-height:1.7; }

/* footer */
.site-footer { background:var(--ink); color:color-mix(in srgb, var(--ground) 78%, transparent); padding:56px 0 28px; margin-top:40px; }
.foot-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid color-mix(in srgb, var(--ground) 16%, transparent); }
.foot-brand .wm { font-family:"Helvetica Neue",Arial,sans-serif; font-weight:300; letter-spacing:.34em; font-size:17px; color:var(--ground); }
.foot-brand p { font-size:12px; line-height:1.9; margin-top:14px; max-width:24em; color:color-mix(in srgb, var(--ground) 62%, transparent); }
.foot-cols h4 { font-size:11px; letter-spacing:.16em; font-family:"Helvetica Neue",Arial,sans-serif; color:color-mix(in srgb, var(--ground) 90%, transparent); margin:0 0 16px; }
.foot-cols ul { list-style:none; margin:0; padding:0; }
.foot-cols li { margin-bottom:10px; }
.foot-cols li a { font-size:12.5px; color:color-mix(in srgb, var(--ground) 66%, transparent); transition:color .18s; }
.foot-cols li a:hover { color:var(--ground); }
.pay { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.paychip { font-size:11px; letter-spacing:.03em; padding:6px 11px; border-radius:3px; background:color-mix(in srgb, var(--ground) 12%, transparent); color:color-mix(in srgb, var(--ground) 82%, transparent); border:1px solid color-mix(in srgb, var(--ground) 14%, transparent); }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:11px; color:color-mix(in srgb, var(--ground) 50%, transparent); flex-wrap:wrap; gap:10px; }
.foot-bottom .en { font-family:"Helvetica Neue",Arial,sans-serif; letter-spacing:.1em; }

/* ---- WooCommerce styling via palette ---- */
.woocommerce-page .wrap, .woo-container { max-width: var(--maxw); margin: 0 auto; padding: 40px 24px 20px; }
.woocommerce ul.products li.product .price { color: var(--ink) !important; font-family:"Helvetica Neue",Arial,sans-serif; }
.woocommerce ul.products li.product .price del { color: var(--ink-faint); }
.woocommerce ul.products li.product .price ins { color: var(--sale); text-decoration:none; }
.woocommerce span.onsale { background: var(--sale); color:#fff; }
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:14px !important; color:var(--ink); font-weight:400; }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt {
  background: var(--ink) !important; color: var(--ground) !important; border-radius: var(--radius); letter-spacing:.06em; border:1px solid var(--ink);
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button.alt:hover {
  background: var(--accent-deep) !important; border-color: var(--accent-deep);
}
.woocommerce-store-notice, p.demo_store { background: var(--accent-deep); }

/* homepage product grid uses woo shortcode; give spacing */
.home-products .woocommerce { margin-top: 4px; }

/* --- override WooCommerce legacy float grid with a real CSS grid --- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
  text-align: left;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 0 12px !important;
  border-radius: var(--radius);
  background: var(--greige);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 !important;
  margin: 0 0 5px !important;
  line-height: 1.5;
}
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 10px;
  font-size: 14px !important;
  font-variant-numeric: tabular-nums;
}
.woocommerce ul.products li.product .button {
  font-size: 12px !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  display: inline-block;
}
.woocommerce ul.products li.product .onsale {
  top: 10px; left: 10px; right: auto; margin: 0;
  border-radius: 2px; min-height: 0; min-width: 0;
  padding: 3px 8px; font-size: 10px; line-height: 1.4;
}
@media (max-width: 900px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
}

/* placeholder blocks: make them read as "photo goes here", not blank */
.ph { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--greige)) 0%, color-mix(in srgb, var(--ink) 6%, var(--greige)) 100%); }
.ph::after { color: color-mix(in srgb, var(--ink) 26%, transparent); }
.brand .visual { max-height: 420px; }

/* responsive */
@media (max-width: 900px) {
  .brand-inner { grid-template-columns:1fr; gap:28px; }
  .foot-cols { grid-template-columns:1fr 1fr; gap:28px; }
  .main-nav { gap:18px; overflow-x:auto; justify-content:flex-start; padding:12px 20px; }
}
@media (max-width: 640px) {
  .cats { grid-template-columns:repeat(2,1fr); }
  .trust { grid-template-columns:1fr; gap:26px; }
  .hero { min-height:420px; } .hero-inner { padding:0 24px; }
  .section { padding:46px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
:focus-visible { outline:2px solid var(--accent-deep); outline-offset:3px; }