/*
Theme Name:   SumaSelect Child
Theme URI:    https://spmasoft.com/
Description:  SumaSelect 香港站子主题（独立于任何其它站点）
Author:       SumaSelect
Template:     storefront
Version:      1.1.0
Text Domain:  sumaselect-child
*/

/* 品牌变量：Phase 2 按 VI 调整 */
:root{
  --suma-primary:#0f3d91;
  --suma-primary-dark:#0a2b69;
  --suma-accent:#e8442a;
  --suma-ink:#1b1f24;
  --suma-muted:#5a6472;
  --suma-line:#e3e7ee;
  --suma-bg:#ffffff;
  --suma-radius:10px;
}

/* ===== SumaSelect 品牌与区块样式 ===== */
.suma-hero{background:linear-gradient(135deg,var(--suma-primary) 0%,var(--suma-primary-dark) 100%);color:#fff;padding:56px 32px;border-radius:var(--suma-radius);margin-bottom:40px}
.suma-hero h1{color:#fff;font-size:2.2em;line-height:1.3;margin-bottom:16px}
.suma-hero p{color:rgba(255,255,255,.9);font-size:1.05em;margin-bottom:24px}
.suma-hero .button{background:#fff;color:var(--suma-primary);border-color:#fff;margin-right:12px}
.suma-hero .button.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.suma-usp ul{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.suma-usp li{background:#f7f9fc;border:1px solid var(--suma-line);border-radius:var(--suma-radius);padding:20px;font-size:.95em;margin:0}
.suma-cards{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.suma-cards li{border:1px solid var(--suma-line);border-radius:var(--suma-radius);padding:22px;background:#fff;margin:0}
.suma-cards h3{margin:0 0 8px;font-size:1.1em}
.suma-cards h3 a{text-decoration:none}
.suma-cards p{margin:0;color:var(--suma-muted);font-size:.95em}
ul.products li.product .price{color:var(--suma-accent);font-weight:700}
.suma-table{width:100%;border-collapse:collapse;margin:0 0 32px}
.suma-table th,.suma-table td{border:1px solid var(--suma-line);padding:12px 14px;text-align:left;vertical-align:top}
.suma-table th{background:#f7f9fc;white-space:nowrap;width:180px}
.suma-form input[type=text],.suma-form input[type=email],.suma-form textarea,.suma-form select{width:100%;max-width:560px;padding:10px;border:1px solid var(--suma-line);border-radius:6px}
.suma-form-notice{padding:12px 16px;border-radius:6px;margin-bottom:20px}
.suma-form-notice.ok{background:#e8f6ee;border:1px solid #b7e0c8}
.suma-form-notice.err{background:#fdecea;border:1px solid #f5c2c0}
@media(max-width:768px){.suma-hero{padding:32px 20px}.suma-hero h1{font-size:1.6em}}

/* 真实照片区块 */
.suma-hero--photo{background-size:cover;background-position:center;background-repeat:no-repeat}
.suma-figure{margin:0 0 32px}
.suma-figure img{width:100%;height:auto;border-radius:12px;display:block}
.suma-figure figcaption{margin-top:10px;font-size:.9em;color:var(--suma-muted)}
/* 商品图：品牌标识按 contain 展示，避免裁切 */
ul.products li.product a img{object-fit:contain;background:#fff;padding:22px;height:200px}
.single-product div.product .woocommerce-product-gallery__image img{object-fit:contain;background:#fff;padding:32px}


/* ===== 页头 CTA：搜索框旁「立即諮詢」（沿用 Storefront 百分比浮动栅格） ===== */
.suma-header-cta{float:right;text-align:right;margin-bottom:1.41575em}
.suma-header-cta .suma-cta{background:var(--suma-accent);border-color:var(--suma-accent);color:#fff;border-radius:999px;padding:10px 18px;font-size:.94em;font-weight:700;letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 8px rgba(232,68,42,.28);display:inline-block;line-height:1.2}
.suma-header-cta .suma-cta:hover,.suma-header-cta .suma-cta:focus{background:#c9351e;border-color:#c9351e;color:#fff;box-shadow:0 4px 12px rgba(232,68,42,.36)}

/* 桌面端：品牌区让出一列给 CTA，搜索框保持在 CTA 左侧，三者同一行 */
@media (min-width:768px){
  .woocommerce-active .site-header .site-branding{width:42%}
  .woocommerce-active .site-header .site-search{width:19%}
  .suma-header-cta{width:auto;max-width:26%;margin-right:0}
  .suma-header-cta .suma-cta{margin-top:.15em}
}
/* 手机端：CTA 独占一行右对齐，不与菜单按钮抢位 */
@media (max-width:767px){
  .suma-header-cta{float:none;clear:both;width:100%;margin:0 0 .8em;text-align:right}
  .suma-header-cta .suma-cta{padding:9px 18px;font-size:.9em}
}

/* ===== 页头语言切换器 ===== */
.suma-lang-switch{float:right;display:flex;align-items:center;gap:6px;margin:6px 0 1.41575em 10px}
.suma-lang-switch a{display:inline-block;font-size:.78em;line-height:1;padding:7px 11px;border:1px solid var(--suma-line);border-radius:999px;color:var(--suma-muted);text-decoration:none;white-space:nowrap}
.suma-lang-switch a:hover{border-color:var(--suma-primary);color:var(--suma-primary)}
.suma-lang-switch a.is-current{background:var(--suma-primary);border-color:var(--suma-primary);color:#fff;font-weight:700}
@media (min-width:768px){ .suma-lang-switch{width:auto;max-width:18%;margin-right:0;justify-content:flex-end;gap:5px} }
@media (max-width:767px){ .suma-lang-switch{float:none;clear:both;justify-content:flex-end;margin:0 0 .6em} }

/* 平板区间：四个元素同处一行，缩小按钮与切换器，避免相互挤压 */
@media (min-width:768px) and (max-width:1100px){
  .woocommerce-active .site-header .site-branding{width:34%}
  .woocommerce-active .site-header .site-search{width:17%}
  .suma-header-cta{max-width:24%}
  .suma-header-cta .suma-cta{padding:9px 13px;font-size:.84em}
  .suma-lang-switch a{font-size:.72em;padding:6px 8px}
  /* 窄屏把切换器单独放一行，避免与搜索框/CTA 抢宽度导致页面横向溢出 */
  .suma-lang-switch{float:none;clear:both;width:100%;max-width:none;margin:0 0 .7em;justify-content:flex-end}
}

/* ===== 首頁 hero 輪播 ===== */
.suma-slider{position:relative;overflow:hidden;padding:0;border-radius:var(--suma-radius);min-height:300px}
.suma-slider .suma-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;background-size:cover;background-position:center;padding:56px 32px;display:flex;flex-direction:column;justify-content:center}
.suma-slider .suma-slide.is-active{opacity:1;visibility:visible;position:relative}
.suma-slider .suma-slide h1,.suma-slider .suma-slide h2{color:#fff;font-size:2.1em;line-height:1.32;margin:0 0 14px;max-width:22em}
.suma-slider .suma-slide p{color:rgba(255,255,255,.92);font-size:1.03em;margin:0 0 22px;max-width:44em}
.suma-slider .suma-slide__cta{margin:0}
.suma-slider .suma-slide__cta .button{background:#fff;color:var(--suma-primary);border-color:#fff;margin-right:12px}
.suma-slider .suma-slide__cta .button.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.suma-slider__nav{position:absolute;left:0;right:0;bottom:18px;display:flex;gap:10px;justify-content:center}
.suma-slider__nav .suma-dot{width:11px;height:11px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.8);background:transparent;cursor:pointer;transition:background .25s,transform .25s}
.suma-slider__nav .suma-dot.is-active{background:#fff;transform:scale(1.15)}
.suma-slider__nav .suma-dot:hover{background:rgba(255,255,255,.6)}
@media (max-width:768px){
  .suma-slider .suma-slide{padding:32px 20px}
  .suma-slider .suma-slide h1,.suma-slider .suma-slide h2{font-size:1.5em}
  .suma-slider .suma-slide p{font-size:.95em}
  .suma-slider__nav{bottom:12px}
}
@media (prefers-reduced-motion: reduce){
  .suma-slider .suma-slide{transition:none}
}

/* ===== FAQ（分組側欄 + 手風琴） ===== */
.suma-faq{display:flex;gap:32px;align-items:flex-start;margin:8px 0 40px}
.suma-faq__side{flex:0 0 200px;display:flex;flex-direction:column;gap:8px;position:sticky;top:16px}
.suma-faq__group{text-align:left;background:#f7f9fc;border:1px solid var(--suma-line);border-radius:8px;padding:10px 14px;font-size:.92em;cursor:pointer;color:var(--suma-ink);transition:.2s}
.suma-faq__group:hover{border-color:var(--suma-primary);color:var(--suma-primary)}
.suma-faq__group.is-active{background:var(--suma-primary);border-color:var(--suma-primary);color:#fff;font-weight:700}
.suma-faq__main{flex:1 1 auto;min-width:0}
.suma-faq__item{border:1px solid var(--suma-line);border-radius:10px;margin-bottom:12px;overflow:hidden;background:#fff}
.suma-faq__item[hidden]{display:none}
.suma-faq__q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;background:#fff;border:0;padding:16px 18px;font-size:1em;font-weight:700;color:var(--suma-ink);cursor:pointer;line-height:1.5}
.suma-faq__q:hover{color:var(--suma-primary)}
.suma-faq__icon{flex:0 0 auto;color:var(--suma-primary);font-size:1.1em;transition:transform .2s}
.suma-faq__item.is-open .suma-faq__icon{transform:rotate(45deg)}
.suma-faq__a{display:none;padding:0 18px 16px;color:var(--suma-muted);font-size:.95em;line-height:1.75}
.suma-faq__item.is-open .suma-faq__a{display:block}
.suma-faq__a p{margin:0}
@media (max-width:768px){
  .suma-faq{flex-direction:column;gap:16px}
  .suma-faq__side{flex:none;width:100%;flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px}
  .suma-faq__group{white-space:nowrap;flex:0 0 auto}
}