/* Soupgod Series Landing – Fullwidth Version v1.0
   -------------------------------------------------
   Purpose: remove .sg-wrap max-width restriction to make full-width layout
   Use: place in /assets/css/sg-landing-fullwidth.css and load instead of sg-landing.css
*/


:root {
  --sg-max: none;
  --sg-border: #e5e7eb;
  --sg-text: #111827;
  --sg-muted: #6b7280;
  --sg-pill-bg: #f3f4f6;
}

/*body.series-landing,
body.tax-soupgod_series {
  background: #fafaf9;
}*/

/* 全域容器：取消寬度限制 */
.sg-wrap {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0 20px; /* 保留左右留白以免貼邊 */
  box-sizing: border-box;
}


/* Hero background full-bleed */
.sg-hero{position:relative;color:#fff;display:flex;align-items:center}
.sg-hero.is-bg{
  width:100vw;
  margin-left:calc(50% - 50vw); /* break out of theme container */
  min-height:var(--hero-h-desktop, 420px);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--hero-pos, center);
}
@media (max-width: 768px){
  .sg-hero.is-bg{ min-height:var(--hero-h-mobile, 300px); }
  .sg-wrap{ padding:0 20px; }
}
.sg-hero .sg-overlay{
  position:absolute;inset:0;
  background:var(--hero-overlay, linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.35)));
  pointer-events:none;
}
.sg-hero .sg-inner{position:relative;z-index:1}
.sg-hero .sg-title{margin:0;font-size:48px;line-height:1.2}
.sg-hero .sg-sub{opacity:.9;margin-top:12px;font-size:20px;max-width:900px}

/* (rest of landing styles kept minimal; you likely already have previous CSS) */
/* 頂部 Hero */
.sg-hero {
  /*background: #1E2A44;*/
  color: #1E2A44;
  padding: 64px 0 40px;
  margin: 0 0 20px;
  text-align: center;
}
.sg-hero h1 {
  margin: 0 auto;
  font-size: 48px;
  line-height: 1.2;
}
.sg-sub {
  opacity: .9;
  margin-top: 12px;
  font-size: 20px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 工具列 */
.sg-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding: 14px 0;
  border-top: 1px solid var(--sg-border);
  border-bottom: 1px solid var(--sg-border);
  margin-bottom: 16px;
  /*background: #fff; */
}

/* 單一系列區塊 */
.sg-series {
  padding: 24px 0 40px;
  border-bottom: 1px solid var(--series-color,#249077);

  /*background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);*/
}

/* 系列標頭 */
.sg-head {
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* ====== 斷點：桌面（左右並排） ====== */
@media (min-width: 992px){
  /* B 與 C 左右並排 */
  .sg-head{
    flex-direction: row;
    align-items: flex-start;
  }
/* 兩欄自適應等寬 
  .sg-head-left, .sg-series-desc{
    flex: 1 1 0;
  }*/
  
    .sg-head-left{
    flex: 0 0 30%;
    max-width: 30%;
    box-sizing: border-box;
  }
  .sg-series-desc{
    flex: 0 0 70%;
    max-width: 70%;
    box-sizing: border-box;
    }
}

/* ======（可選）平板中等寬度也要左右並排的話，開這段 ====== */
/*
@media (min-width: 768px){
  .A .AC-row{ flex-direction: row; }
  .B, .C{ flex: 1 1 0; }
}
*/

.sg-head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: var(--series-color,#249077);
}
.sg-title {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--sg-text);
}
.sg-kv {
  color: var(--sg-muted);
  font-size: 16px;
  margin-top: 4px;
}

/* 色膠囊與徽章 */
.sg-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--sg-pill-bg);
  border: 1px solid var(--sg-border);
  font-weight: 800;
  color: var(--sg-text);
}
.sg-pill .dot {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: var(--series-color,#249077);
}

.sg-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .5rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.2rem;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.15);
}
.sg-badge-pill.is-colored {
  background: var(--series-color,#249077);
  color: #fff;
  border-color: transparent;

}

/* SVG icon fix */
.sg-series-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);*/
  overflow: hidden;
  /*flex: 0 0 auto;*/
}
.sg-series-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 系列描述與標籤 */
.sg-desc {
  margin: 6px 0 10px;
  color: #374151;
  line-height: 1.6;
  max-width: 80ch;
}
.sg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px;
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.sg-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--sg-border);
  font-weight: 700;
  color: #374151;
  font-size: .85rem;
  margin: .2rem;
}
.sg-tag .dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--series-color,#249077);
  margin-right: .35rem;
  opacity: .9;
}

/* 商品區塊（維持原比例但放寬左右間距） */
.sg-slider { position: relative; padding: 0 10px; }
.sg-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px)/4);
  gap: 20px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
@media (max-width: 1024px){ .sg-track{grid-auto-columns:calc((100% - 40px)/3);} }
@media (max-width: 680px){ .sg-track{grid-auto-columns:calc((100% - 20px)/2);} }

.sg-card {
  scroll-snap-align: center;
  border: 1px solid var(--sg-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items:center; 
  transition: box-shadow .2s,transform .2s;
}
.sg-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* 其他保留原版樣式 */

.sg-media img { width:100%; height:100%; object-fit:cover; display:block; }
.sg-body { padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.sg-name { margin:0; font-size:16px; font-weight:800; color:#111827; line-height:1.4; }
.sg-price { font-weight:800; color:#1f2937; }
.sg-bottom { display:flex; justify-content:space-between; padding:0 12px 12px; }
.sg-add { display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:9px; background:var(--series-color,#249077); color:#fff; font-weight:800; border:none; cursor:pointer; }
.sg-nav button { pointer-events:auto; position:absolute; top:40%; transform:translateY(-50%); border:1px solid var(--sg-border); background:#fff;color:var(--series-color,#249077); border-radius:999px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sg-prev{left:-6px} .sg-next{right:-6px}


.sg-series-info{
  width: 100% !important;
  display: block;
  float: none !important;
  justify-content: center;      /* 水平置中內容 */
  align-items: center; */         /* 垂直置中內容 */
  min-height: 100px;            /* 可自行調整高度 */
  box-sizing: border-box;
  /* 若原本是 inline-block / grid 兩欄，以下能協助覆寫 */
  flex: 0 0 auto;
}
.sg-series-desc{

  display: flex;
  justify-content: center;      /* 水平置中 */
  align-items: center;         /* 垂直置中（如需） */
  /*text-align: center;*/
  width: 100%;
  min-height: 150px;            /* 視覺示意，可依實際修改 */
  box-sizing: border-box;
  /* 讓 C 在桌面能與 B 等寬 */
}
 /* 兩欄自適應等寬 
.sg-head-left .sg-series-desc{
    flex: 1 1 0;
  }
*/

.sg-view { 
  justify-content: right !important;
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--series-color,#249077);
  /*border: 1px solid var(--sg-border); */
  font-weight: 700;
  color: #fff;
  font-size: .85rem;
  margin: 0.2rem 2rem;}
  
 .sg-view a:hover {
  color: #FF0000; /* 設定滑鼠懸停時為紅色 */
}

  .sg-view a:visited {
  color: #fff; /* 設定已訪問過的連結為紫色 */
}

/* icon塊：內容水平置中（可同時垂直置中） */
.sg-series-icons{
  display: flex;
  justify-content: center;      /* 水平置中 */
  align-items: center;          /* 垂直置中（如需） */
  text-align: center;
  background: #fff;
  width: 100%;
  min-height: 50px;  
  border-radius: 8px;   
  padding:10px 12px;
         /* 視覺示意，可依實際修改 */
  box-sizing: border-box;
}