/* ============================================================
   shop-theme.css — 상품 페이지를 새 랜딩(concept) 톤으로 맞추는 오버레이
   styles.css 뒤에 로드해서 색·타이포·헤더만 덮어쓴다.
   ============================================================ */

:root{
  --ink:#161513;
  --green:#1F3A2E;
  --green-2:#2E5343;
  --paper:#FFFFFF;
  --soft:#F5F5F3;
  --white:#fff;
  --line:rgba(22,21,19,.12);
  --muted:#6E6A64;
  --kr:"Hahmlet",serif;
  --fr:"Fraunces",serif;
  --sans:"Pretendard",system-ui,sans-serif;
  --tick:34px;
}

body{background:var(--paper);font-family:var(--sans);font-weight:400}

/* ---------- 상단 티커 (랜딩과 동일) ---------- */
.am-tick{position:fixed;top:0;left:0;right:0;height:var(--tick);z-index:31;background:var(--green);color:#F2EFE6;
  display:flex;align-items:center;overflow:hidden;pointer-events:none}
.am-tick__t{display:flex;white-space:nowrap;width:max-content;animation:amtk 46s linear infinite;
  font-family:var(--fr);font-style:italic;font-size:12.5px;letter-spacing:.04em}
.am-tick__t b{font-weight:400;padding:0 20px;display:inline-flex;align-items:center;gap:20px}
.am-tick__t i{font-style:normal;opacity:.55}
@keyframes amtk{to{transform:translateX(-50%)}}

/* ---------- 헤더: 흰 배경 + 초록 글씨 고정 ---------- */
.site-header{
  top:var(--tick)!important;
  background:#fff!important;
  color:var(--green)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 1px 12px -6px rgba(20,18,14,.25);
  backdrop-filter:none!important;
}
.site-header a,.site-header button{color:var(--green)!important}
.site-header nav a{font-family:var(--kr);font-weight:500;letter-spacing:.02em}
.site-header .logo img,.site-header img[src*="logo"]{filter:none}
body{padding-top:var(--tick)}

/* 헤더 우측 그룹 — 이용안내 · 메인 · 장바구니 */
.am-right{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.am-right .cart-button{grid-column:auto!important;justify-self:auto!important;margin:0}
.am-util{font-family:var(--kr);font-size:13.5px;font-weight:500;white-space:nowrap;line-height:1;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:.2s}
.am-util:hover{border-bottom-color:currentColor}
.am-home{display:inline-flex;align-items:center;gap:5px;border:1.4px solid currentColor;border-radius:99px;
  padding:8px 14px;font-family:var(--kr);font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;transition:.25s}
.am-home:hover{background:var(--green);border-color:var(--green);color:#fff!important}
/* 데스크톱 내비가 로고를 밀지 않도록 */
.site-header .desktop-nav{white-space:nowrap;min-width:0;gap:clamp(16px,2vw,30px)}
.site-header .wordmark{grid-column:2;justify-self:center}
@media(max-width:1024px){.am-util{display:none}}
@media(max-width:900px){.am-home{display:none}}

/* ---------- 상세 팝업 안 카테고리 이동 바 ---------- */
.product-jump{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  padding:14px clamp(58px,6vw,72px) 14px clamp(18px,3vw,42px);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.product-jump a{font-family:var(--kr);font-size:13.5px;font-weight:500;color:var(--green);
  padding-bottom:2px;border-bottom:1px solid transparent;transition:.2s;white-space:nowrap}
.product-jump a:hover{border-bottom-color:currentColor}
.product-jump__home{margin-left:auto;border:1.4px solid var(--green);border-radius:99px;
  padding:7px 14px!important;font-weight:600!important}
.product-jump__home:hover{background:var(--green);color:#fff}
#productDialog .product-close{z-index:6}
@media(max-width:600px){
  .product-jump{gap:12px;padding:11px 50px 11px 16px}
  .product-jump a{font-size:12.5px}
  .product-jump__home{padding:6px 11px!important}
}

/* ---------- 타이포 ---------- */
h1,h2,h3,h4,.section-title,.product-name,.product-title{font-family:var(--kr);font-weight:600;letter-spacing:-.01em}
.eyebrow,.label,.kicker,.section-label{font-family:var(--fr);font-style:italic;color:var(--green)}
.price,.product-price{font-family:var(--fr);color:var(--muted);letter-spacing:.01em}

/* ---------- 상품 카드 ---------- */
.product-card,.product-item{background:transparent}
.product-card img,.product-item img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.product-card:hover img,.product-item:hover img{transform:scale(1.04)}
.product-grid{gap:clamp(10px,1.5vw,22px)}

/* ---------- 관련·최근 본 상품 섹션 ---------- */
.related-products{border-top:1.6px solid var(--green);padding-top:clamp(22px,3vw,36px);margin-top:clamp(34px,5vw,64px)}
.related-products h2,.related-products h3{font-family:var(--kr);font-weight:600;font-size:clamp(17px,2vw,22px);margin-bottom:clamp(14px,2vw,22px)}
.related-products.recently-viewed{border-top-color:var(--line)}

/* ---------- 버튼 ---------- */
.btn,.button,button.primary,.cta{font-family:var(--kr);font-weight:600;border-radius:99px}
.btn-primary,button.primary,.cta{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover,button.primary:hover,.cta:hover{background:var(--green-2)}

/* ---------- 푸터 ---------- */
.site-footer,footer{background:var(--green);color:#fff}
.site-footer a,footer a{color:#fff;opacity:.92}
.site-footer a:hover,footer a:hover{opacity:.65}

/* ---------- 플로팅 카톡 (랜딩과 동일 톤) ---------- */
.floating-kakao,#floatingKakao{background:var(--green)!important;border-radius:99px;
  font-family:var(--kr);font-weight:600;box-shadow:0 12px 30px -10px rgba(31,58,46,.55)}

@media(max-width:720px){
  .am-tick__t{font-size:11.5px}
  .am-home{padding:7px 12px;font-size:12.5px;margin-left:8px}
}