/*
Theme Name: 伽玹 Jia Xuan
Theme URI: https://example.com
Author: 伽玹企業有限公司
Description: 伽玹|北歐自然風格的生活家電選物商店 block theme。柔和幾何、安靜綠調、寬鬆留白。支援 Site Editor 全站可視化編輯與 WooCommerce。
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: daily-objects
*/

:root {
  --do-ink: #26312a;
  --do-paper: #f2f0e8;
  --do-plum: #536b5a;
  --do-deep: #26372c;
  --do-apricot: #c8956d;
  --do-sticker: #d3aa84;
  --do-sage: #bec8b9;
  --do-mist: #e1e6dd;
  --do-cream: #faf9f4;
  --do-line: rgba(38, 49, 42, 0.18);
  --do-serif: "DFKai-SB", "Noto Serif TC", serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; }

/* 讓 header 模板組件的外層包裹不構成 sticky 的定位容器 */
header.wp-block-template-part { display: contents; }

/* ---------- 公告列 ---------- */
.do-announcement {
  min-height: 38px;
  padding: 8px clamp(20px, 5vw, 72px);
  background: var(--do-deep);
  color: #fffaf4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.do-announcement.do-announcement { gap: 14px; }
.do-announcement p { margin: 0; color: #fffaf4; }
.do-announcement .do-announcement-tag {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
}
@media (max-width: 560px) { .do-announcement .do-announcement-tag { display: none; } }

/* ---------- 頁首 ---------- */
.do-site-header {
  margin: 12px clamp(14px, 3vw, 42px) 0;
  height: 82px;
  padding: 0 clamp(18px, 3vw, 38px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 18px;
  background: rgba(250, 249, 244, 0.9);
  box-shadow: 0 10px 35px rgba(46, 64, 51, 0.08);
  position: sticky;
  top: 12px;
  z-index: 20;
  backdrop-filter: blur(12px);
}
.do-brand { display: flex; align-items: center; gap: 12px; }
.do-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--do-plum);
  color: #fff;
  border-radius: 12px 2px 12px 2px;
  font-family: var(--do-serif);
  font-size: 20px;
}
.do-brand-text { display: flex; flex-direction: column; }
.do-brand-text .wp-block-site-title { margin: 0; }
.do-brand-text .wp-block-site-title a {
  font-family: var(--do-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
}
.do-brand-sub { margin: 2px 0 0; font-size: 9px; letter-spacing: 0.2em; opacity: 0.62; }
.do-site-header .wp-block-navigation { font-size: 13px; letter-spacing: 0.08em; }
.do-site-header .wp-block-navigation a { position: relative; }
.do-site-header .wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--do-apricot);
  transition: right 0.2s ease;
}
.do-site-header .wp-block-navigation a:hover::after,
.do-site-header .wp-block-navigation a:focus-visible::after { right: 0; }
.do-header-actions { display: flex; align-items: center; }
.do-header-actions.do-header-actions { gap: 8px; }
.do-member-button a {
  padding: 11px 15px !important;
  border-radius: 99px;
  color: var(--do-plum) !important;
  background: #edf0e9 !important;
  font-size: 12px;
  font-weight: 700;
}
.do-member-button a:hover { background: #dfe6dc !important; }

/* Mini-cart(購物袋)*/
.do-site-header .wc-block-mini-cart__button,
.do-site-header .wp-block-woocommerce-mini-cart button {
  border: 0;
  background: #e1e6dd;
  padding: 10px 14px;
  border-radius: 99px;
  color: var(--do-ink);
  cursor: pointer;
}
.wc-block-mini-cart__drawer { background: #f8f7f1; }

@media (max-width: 900px) {
  .do-site-header { margin: 8px 10px 0; height: 78px; }
  .do-brand-sub { display: none; }
}
@media (max-width: 560px) {
  .do-member-button { display: none; }
  .do-brand-mark { width: 36px; height: 36px; font-size: 17px; }
  .do-brand-text .wp-block-site-title a { font-size: 16px; }
  .do-site-header { padding: 0 14px; }
}
/* 行動版導覽 overlay 底色貼合主題 */
.wp-block-navigation__responsive-container.has-modal-open { background-color: var(--do-paper) !important; }

/* ---------- Hero ---------- */
.do-hero {
  padding: 52px clamp(18px, 4vw, 60px) 70px;
}
.do-hero .wp-block-columns { gap: clamp(40px, 6vw, 92px); align-items: center; }
.do-hero-copy { padding: clamp(35px, 5vw, 75px) clamp(10px, 3vw, 44px); }
.do-eyebrow {
  margin: 0 0 24px;
  color: var(--do-plum);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.do-hero-title {
  margin: 0;
  max-width: 660px;
  font-size: clamp(48px, 5.8vw, 88px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.do-hero-title em { display: block; color: var(--do-plum); font-style: normal; }
.do-hero-intro {
  max-width: 480px;
  margin: 34px 0;
  color: #65706a;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
}
.do-cta .wp-block-button__link {
  min-width: 188px;
  padding: 15px 22px;
  display: inline-flex;
  justify-content: space-between;
  gap: 20px;
  background: var(--do-plum);
  color: #fff;
  border-radius: 99px;
  font-size: 13px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.do-cta .wp-block-button__link:hover { transform: translateY(-2px); background: var(--do-deep); }
.do-commerce-note {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--do-line);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
}
.do-commerce-badge {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e1e6dd;
  color: var(--do-plum);
  font-size: 10px;
  font-weight: 900;
  margin: 0;
}
.do-commerce-note p { margin: 0; color: #657068; font-size: 10px; line-height: 1.55; }
.do-commerce-note strong { display: block; color: var(--do-deep); font-size: 11px; }

.do-hero-visual { position: relative; }
.do-hero-visual figure.wp-block-image {
  margin: 0;
  position: relative;
}
.do-hero-visual figure.wp-block-image::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 170px 14px 170px 14px;
  pointer-events: none;
}
.do-hero-visual img {
  width: 100%;
  min-height: 500px;
  max-height: 640px;
  object-fit: cover;
  border-radius: 180px 18px 180px 18px;
  filter: saturate(0.82) contrast(0.95);
}
.do-hero-sticker {
  position: absolute;
  right: 24px;
  bottom: 26px;
  z-index: 2;
  width: 155px;
  height: 155px;
  padding: 22px;
  background: var(--do-sticker);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-4deg);
}
.do-hero-sticker p { margin: 0; }
.do-hero-sticker .do-sticker-num {
  font-size: 11px;
  border-bottom: 1px solid rgba(38, 27, 31, 0.35);
  padding-bottom: 5px;
}
.do-hero-sticker .do-sticker-text {
  font-family: var(--do-serif);
  font-size: 18px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .do-hero { padding: 28px 14px 55px; }
  .do-hero-visual img { min-height: 400px; border-radius: 110px 16px 110px 16px; }
  .do-hero-visual figure.wp-block-image::before { border-radius: 100px 12px 100px 12px; }
  .do-hero-sticker { width: 125px; height: 125px; padding: 17px; }
  .do-hero-sticker .do-sticker-text { font-size: 15px; }
}
/* 核心 columns 於 781px 堆疊:手機版讓照片排在文案上方(還原原設計) */
@media (max-width: 781px) {
  .do-hero .wp-block-columns > .do-hero-visual { order: -1; }
  .do-hero-copy { padding-top: 30px; }
}

/* ---------- 品牌故事 ---------- */
.do-story {
  margin: 0 clamp(18px, 4vw, 60px);
  padding: clamp(50px, 7vw, 100px) clamp(30px, 8vw, 120px);
  border-radius: 28px;
  background: var(--do-mist);
}
.do-story .wp-block-columns { gap: 50px; align-items: flex-start; }
.do-story h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 47px);
  line-height: 1.55;
  font-weight: 500;
}
.do-story-note { margin: 8px 0 0; color: #6c7a70; font-size: 14px; line-height: 2; }
@media (max-width: 560px) { .do-story { margin: 0 12px; } }

/* ---------- 商品區 ---------- */
.do-products { padding: clamp(90px, 11vw, 155px) clamp(20px, 5vw, 72px) clamp(75px, 9vw, 130px); }
.do-products-heading.do-products-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.do-products-heading h2 { margin: 0; font-size: clamp(38px, 4vw, 58px); font-weight: 500; }
.do-products-lead { max-width: 340px; margin: 0 0 6px; color: #76827a; font-size: 13px; line-height: 1.8; }
.do-filters {
  margin: 48px 0 30px;
  padding: 11px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(38, 49, 42, 0.12);
  border-bottom: 1px solid rgba(38, 49, 42, 0.12);
}
.do-filters .wp-block-button__link {
  padding: 9px 17px;
  border-radius: 99px;
  background: transparent;
  color: var(--do-ink);
  font-size: 12px;
  font-weight: 400;
}
.do-filters .do-filter-active .wp-block-button__link { background: var(--do-plum); color: #fff; }
.do-filters .wp-block-button__link:hover { background: var(--do-mist); }

/* 商品卡片(Product Collection)— 強制 3/2/1 欄響應式格線 */
.do-product-grid .wc-block-product-template__responsive,
.do-product-grid ul.wc-block-product-template {
  gap: 28px;
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 900px) {
  .do-product-grid .wc-block-product-template__responsive,
  .do-product-grid ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .do-product-grid .wc-block-product-template__responsive,
  .do-product-grid ul.wc-block-product-template { grid-template-columns: 1fr !important; }
}
.do-product-grid .wc-block-product,
.do-product-grid li.product {
  padding: 13px 13px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 12px 35px rgba(46, 64, 51, 0.06);
}
.do-product-grid .wc-block-components-product-image {
  overflow: hidden;
  border-radius: 15px;
}
.do-product-grid .wc-block-components-product-image a { display: block; height: 100%; }
.do-product-grid .wc-block-components-product-image img,
.do-product-grid .wc-block-product img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 15px;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.do-product-grid .wc-block-product:hover img { transform: scale(1.035); }
.do-product-grid .wp-block-post-title {
  margin: 19px 6px 0;
  font-family: var(--do-serif);
  font-size: 22px;
  font-weight: 500;
}
.do-product-grid .wp-block-post-title a { text-decoration: none; }
.do-product-grid .do-product-note,
.do-product-grid .wc-block-components-product-summary {
  min-height: 43px;
  margin: 8px 6px 18px;
  color: #74807a;
  font-size: 12px;
  line-height: 1.75;
}
/* 卡片底列:價格靠左、加入購物車靠右(還原原設計的單列動作區) */
.do-product-grid .wc-block-product,
.do-product-grid li.product {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-auto-rows: min-content;
}
.do-product-grid .wc-block-product > * { grid-column: 1 / -1; }
.do-product-grid .wc-block-components-product-price,
.do-product-grid .wp-block-woocommerce-product-price {
  grid-column: 1;
  margin: 0 0 0 6px;
  padding-top: 13px;
  border-top: 1px solid var(--do-line);
  font-size: 14px;
  font-weight: 700;
  display: block;
}
.do-product-grid .wp-block-woocommerce-product-button {
  grid-column: 2;
  margin: 0 6px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--do-line);
}
.do-product-grid .wc-block-components-product-button__button,
.do-product-grid .add_to_cart_button {
  border: 0;
  border-radius: 99px;
  background: var(--do-plum);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
}
.do-product-grid .wc-block-components-product-button__button:hover { background: var(--do-deep); }

/* ---------- 服務條 ---------- */
.do-service-strip {
  margin: 0 clamp(20px, 5vw, 72px) clamp(80px, 8vw, 120px);
  padding: 34px 0;
  border-radius: 24px;
  background: var(--do-sage);
}
.do-service-strip .wp-block-columns { gap: 0; }
.do-service-item {
  padding: 0 clamp(20px, 3vw, 48px);
  display: flex;
  align-items: center;
  gap: 20px;
  border-right: 1px solid rgba(38, 27, 31, 0.2);
}
.do-service-item:last-child { border-right: 0; }
.do-service-num { font-family: serif; font-size: 25px; opacity: 0.45; margin: 0; }
.do-service-item p { margin: 0; font-size: 11px; line-height: 1.6; }
.do-service-item strong { display: block; font-size: 14px; }
@media (max-width: 781px) {
  .do-service-item { padding: 18px clamp(20px, 3vw, 48px); border-right: 0; border-bottom: 1px solid rgba(38, 27, 31, 0.2); }
  .do-service-item:last-child { border-bottom: 0; }
}

/* ---------- 頁尾 ---------- */
.do-footer {
  margin: 0 16px 16px;
  padding: clamp(60px, 8vw, 110px) clamp(25px, 6vw, 90px) 25px;
  border-radius: 34px;
  background: var(--do-deep);
  color: #fff7ee;
}
.do-footer a { color: rgba(255, 247, 238, 0.72); }
.do-footer a:hover { color: #fff; }
.do-footer-brand {
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
.do-brand-mark.do-light { background: #fff7ee; color: var(--do-deep); flex: 0 0 auto; }
.do-footer-brand h2 {
  margin: 0;
  color: #fff7ee;
  font-size: clamp(34px, 5vw, 67px);
  font-weight: 500;
}
.do-footer-columns { padding: 55px 0 75px; }
.do-footer-columns h3 {
  margin: 0 0 18px;
  color: #e8b79b;
  font-family: var(--wp--preset--font-family--sans, sans-serif);
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
}
.do-footer-columns p, .do-footer-columns a { display: block; width: fit-content; margin: 8px 0; font-size: 12px; }
.do-footer-columns p { color: rgba(255, 247, 238, 0.72); }
.do-copyright {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 247, 238, 0.55);
  font-size: 9px;
  letter-spacing: 0.18em;
}
@media (max-width: 560px) { .do-footer { margin: 0 8px 8px; } }

/* ---------- 法務/內頁 ---------- */
.do-legal-article { padding: clamp(70px, 9vw, 120px) 0 100px; }
.do-legal-title, .do-page-title {
  margin: 0;
  font-size: clamp(48px, 7vw, 86px);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.do-legal-lead {
  margin: 30px 0 70px;
  padding: 26px 28px;
  border-left: 4px solid var(--do-plum);
  border-radius: 0 18px 18px 0;
  background: var(--do-mist);
  color: #536159;
  font-size: 15px;
  line-height: 2;
}
.do-legal-section-title {
  margin: 30px 0 14px;
  padding-top: 30px;
  border-top: 1px solid rgba(38, 49, 42, 0.16);
  font-size: 24px;
  font-weight: 500;
}
.do-legal-body { margin: 0; color: #606b63; font-size: 14px; line-height: 2; }
.do-legal-updated { margin-top: 35px; color: #7c877f; font-size: 11px; text-align: right; }

/* ---------- WooCommerce 通用 ---------- */
.woocommerce-store-notice { background: var(--do-deep); color: #fffaf4; }
.wc-block-components-button:not(.is-link) {
  border-radius: 99px !important;
  background: var(--do-plum);
  color: #fff;
}
.wc-block-components-button:not(.is-link):hover { background: var(--do-deep); }
.onsale { background: var(--do-apricot) !important; }

/* 商店/商品內頁容器留白 */
.woocommerce-page .wp-block-post-content,
.single-product .wp-block-post-content { padding: 0 clamp(20px, 5vw, 72px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}