@media (max-width: 980px) {
  .guide-intro-box { padding:28px 24px; }
  .guide-intro-box h2 { font-size:24px; }
  .guide-intro-box p { font-size:13px; line-height:1.75; }
}

@media (max-width: 720px) {
  .guide-intro-section { padding-top:18px; }
  .guide-intro-box { padding:24px 18px; }
  .guide-intro-box h2 { font-size:22px; }
  .guide-intro-box p { font-size:12px; line-height:1.72; }
  .guide-intro-tags { gap:8px; margin-top:18px; }
  .guide-intro-tags a { min-height:34px; padding:0 12px; font-size:11px; }
}

:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --text: #17191f;
  --muted: #6f7480;
  --line: #e9ebef;
  --accent: #111318;
  --soft: #f0f2f5;
  --max: 1280px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(24, 31, 42, .08);
  --jp-red: #d93a3a;
  --jp-red-dark: #b9282f;
  --jp-red-soft: #fff3f3;
  --jp-navy: #173c68;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  letter-spacing: -.02em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(calc(100% - 36px), var(--max));
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 13px;
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font-family: Georgia, serif; font-style: italic; font-size: 21px; }
.brand-copy small { margin-top: 5px; color: #999da6; font-size: 8px; letter-spacing: .14em; }
.main-nav { display: flex; justify-content: center; gap: 28px; font-size: 13px; font-weight: 700; }
.main-nav a { padding: 26px 0 24px; position: relative; }
.main-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 17px; width: 0; height: 2px;
  background: var(--accent); transform: translateX(-50%); transition: width .2s ease;
}
.main-nav a:hover::after, .main-nav a.is-current::after { width: 18px; }
.header-side { display: flex; align-items: center; gap: 10px; }
.header-pill { padding: 9px 13px; background: #f5f6f8; border-radius: 999px; font-size: 12px; font-weight: 700; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: #222; margin: 5px 0; }

/* =========================================================
   MAIN HERO / PROMOTION CARDS
   ========================================================= */
.hero-section { padding: 30px 0 18px; background: #fff; }
.section-inner { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.hero-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 18px; }
.hero-head h1 { margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.14; letter-spacing: -.055em; }
.hero-head p { max-width: 540px; margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.promo-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}
.promo-card {
  min-height: 292px;
  padding: 22px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  box-shadow: 0 12px 28px rgba(20,22,28,.10);
  isolation: isolate;
}
.promo-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--card-bg, linear-gradient(145deg,#556070,#20242c));
}
.promo-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.74) 100%);
}
.promo-art { position: absolute; right: -7%; top: 28px; width: 72%; height: 145px; opacity: .94; }
.mock-box { position: absolute; width: 72px; height: 94px; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 16px 30px rgba(0,0,0,.20); }
.mock-box::after { content:"JP"; position:absolute; left:10px; bottom:10px; font-weight:900; color:#222; font-size:18px; }
.mock-bottle { position: absolute; width: 54px; height: 86px; border-radius: 18px 18px 12px 12px; background: rgba(255,255,255,.9); box-shadow: 0 14px 28px rgba(0,0,0,.18); }
.mock-bottle::before { content:""; position:absolute; width:34px; height:13px; left:10px; top:-8px; background:#222; border-radius:4px; }
.promo-art .mock-box:nth-child(1) { right: 70px; top: 24px; transform: rotate(-7deg); }
.promo-art .mock-box:nth-child(2) { right: 10px; top: 40px; transform: rotate(7deg); }
.promo-art .mock-bottle { right: 111px; top: 64px; transform: rotate(5deg); }
.promo-card small { font-size: 10px; opacity: .76; margin-bottom: 8px; letter-spacing: .08em; }
.promo-card h2 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.04em; }
.promo-card p { margin: 9px 0 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.80); }

/* CATEGORY CHIPS */
.category-strip { padding: 16px 0 32px; background: #fff; border-bottom: 1px solid var(--line); }
.category-list { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.category-list a { padding: 9px 13px; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; }
.category-list a:hover { border-color: #b5bac4; background: #fafafa; }
.category-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff694b; margin-right: 6px; }

/* =========================================================
   PRODUCT / CONTENT CARD SECTION
   ========================================================= */
.content-section { padding: 54px 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.section-head h2 { margin: 0; font-size: 26px; letter-spacing: -.045em; }
.section-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.section-tabs { display: flex; gap: 7px; }
.section-tabs span { padding: 8px 12px; border-radius: 999px; background: #eceef2; color: #686d78; font-size: 11px; font-weight: 800; }
.section-tabs span:first-child { background: #16181d; color: #fff; }
.product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.product-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-thumb { height: 205px; background: linear-gradient(145deg,#eef0f4,#dfe3e9); display:grid; place-items:center; position:relative; overflow:hidden; }
.product-pack { width: 94px; height: 124px; border-radius: 7px; background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 28px rgba(18,24,34,.16); position:relative; }
.product-pack::before { content:"JAPAN"; position:absolute; left:12px; top:14px; font-size:10px; font-weight:900; color:#777; letter-spacing:.12em; }
.product-pack::after { content:attr(data-label); position:absolute; left:12px; right:12px; bottom:18px; font-size:18px; line-height:1.05; font-weight:900; color:#222; }
.product-card:nth-child(2) .product-pack { background:#e9f1e6; }
.product-card:nth-child(3) .product-pack { background:#efe6f4; }
.product-card:nth-child(4) .product-pack { background:#ece8e5; }
.product-card:nth-child(5) .product-pack { background:#f7eae1; }
.product-body { padding: 15px; }
.product-body small { color:#9a9fa8; font-size:10px; }
.product-body h3 { margin:7px 0 9px; font-size:14px; line-height:1.45; }
.product-body p { margin:0; font-size:12px; color:var(--muted); line-height:1.55; }
.product-meta { margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-meta strong { font-size:14px; }
.product-meta a { font-size:11px; font-weight:800; padding:7px 9px; border-radius:8px; background:#f2f3f5; }

/* INFORMATION BLOCKS */
.info-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:18px; }
.info-panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.info-panel h2, .info-panel h3 { margin-top:0; }
.info-panel p { color:var(--muted); line-height:1.8; font-size:14px; }
.guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
.guide-item { display:block; padding:18px; border-radius:14px; background:#f6f7f9; border:1px solid #eceef2; }
.guide-item small { color:#9a9fa8; font-size:10px; letter-spacing:.08em; }
.guide-item strong { display:block; margin-top:7px; font-size:15px; }
.guide-item span { display:block; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.55; }

/* SUB PAGES */
.sub-hero { padding: 64px 0 44px; background:#fff; border-bottom:1px solid var(--line); }
.sub-hero small { font-size:11px; letter-spacing:.13em; color:#8f949d; font-weight:800; }
.sub-hero h1 { margin:12px 0 16px; font-size:clamp(34px,5vw,58px); letter-spacing:-.065em; line-height:1.04; }
.sub-hero p { max-width:760px; margin:0; color:var(--muted); line-height:1.8; }
.article-section { padding:48px 0 64px; }
.article-layout { display:grid; grid-template-columns: 1fr 300px; gap:24px; align-items:start; }
.article-main { background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px; }
.article-main h2 { margin:36px 0 12px; font-size:24px; }
.article-main h2:first-child { margin-top:0; }
.article-main p, .article-main li { color:#5f6570; line-height:1.85; font-size:14px; }
.article-main ul { padding-left:20px; }
.side-card { position:sticky; top:94px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; }
.side-card strong { display:block; font-size:16px; margin-bottom:12px; }
.side-card a { display:block; padding:11px 0; border-top:1px solid var(--line); font-size:13px; color:#555b66; }
.side-card a:first-of-type { border-top:0; }

/* FAQ */
.faq-list { display:grid; gap:10px; }
.faq-list details { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq-list summary { cursor:pointer; list-style:none; padding:19px 20px; font-weight:800; font-size:14px; display:flex; gap:13px; align-items:center; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { width:28px; height:28px; border-radius:50%; background:#f0f1f3; display:grid; place-items:center; font-size:11px; color:#656b75; flex:0 0 28px; }
.faq-list p { margin:0; padding:0 20px 20px 61px; color:var(--muted); font-size:13px; line-height:1.75; }

/* FOOTER */
.footer-guide-bar { background:#fff; border-top:1px solid var(--line); }
.footer-guide-inner { width:min(calc(100% - 36px),var(--max)); margin:0 auto; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-guide-label { font-size:10px; letter-spacing:.12em; font-weight:900; color:#9a9fa8; }
.footer-guide-links { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; font-weight:800; }
.site-footer { background:#17191f; color:#fff; padding:28px 0; }
.footer-inner { width:min(calc(100% - 36px),var(--max)); margin:0 auto; }
.footer-inner p { margin:5px 0; color:#9da2ac; font-size:11px; line-height:1.6; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1060px) {
  .header-inner { grid-template-columns:auto 1fr auto; }
  .main-nav { position:fixed; left:18px; right:18px; top:78px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; display:none; flex-direction:column; gap:0; box-shadow:var(--shadow); }
  .main-nav.is-open { display:flex; }
  .main-nav a { padding:13px 10px; border-bottom:1px solid var(--line); }
  .main-nav a:last-child { border-bottom:0; }
  .main-nav a::after { display:none; }
  .menu-toggle { display:block; }
  .header-side { display:none; }
  .promo-track { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .promo-card:nth-child(n+4) { display:none; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-card:nth-child(n+4) { display:none; }
  .article-layout { grid-template-columns:1fr; }
  .side-card { position:static; }
}

@media (max-width: 720px) {
  .header-inner { width:min(calc(100% - 24px),var(--max)); min-height:64px; }
  .brand-copy strong { font-size:18px; }
  .main-nav { top:70px; left:12px; right:12px; }
  .hero-section { padding-top:22px; }
  .section-inner { width:min(calc(100% - 24px),var(--max)); }
  .hero-head { display:block; }
  .hero-head p { margin-top:12px; }
  .promo-track { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; margin-right:-12px; }
  .promo-card { display:flex !important; flex:0 0 78vw; min-height:255px; scroll-snap-align:start; }
  .category-strip { padding:14px 0 24px; }
  .category-list { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .category-list a { white-space:nowrap; }
  .content-section { padding:40px 0; }
  .section-head { display:block; }
  .section-tabs { margin-top:14px; }
  .product-grid { display:flex; overflow-x:auto; gap:12px; margin-right:-12px; padding-bottom:4px; scroll-snap-type:x mandatory; }
  .product-card { display:block !important; flex:0 0 66vw; scroll-snap-align:start; }
  .product-thumb { height:180px; }
  .info-grid { grid-template-columns:1fr; }
  .guide-list { grid-template-columns:1fr; }
  .info-panel { padding:22px; }
  .sub-hero { padding:42px 0 34px; }
  .article-section { padding:34px 0 48px; }
  .article-main { padding:23px; border-radius:14px; }
  .footer-guide-inner { align-items:flex-start; flex-direction:column; padding:18px 0; }
  .footer-guide-links { gap:14px 18px; }
  .faq-list p { padding-left:20px; }
}

/* =========================================================
   HOME V2 / SHOPPING-MALL STYLE INDEX
   Reference layout only - independently implemented
   ========================================================= */
.home-page { background:#fff; color:#151515; }
.shop-container { width:min(calc(100% - 36px),1180px); margin:0 auto; }

/* TOP UTILITY */
.top-utility { background:#1e1f20; color:#fff; }
.top-utility-inner { width:min(calc(100% - 36px),1180px); height:34px; margin:0 auto; display:flex; align-items:center; justify-content:flex-end; }
.top-utility nav { display:flex; gap:7px; }
.top-utility a { font-size:10px; line-height:1; padding:5px 9px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:#f2f2f2; }

/* HEADER */
.home-header { position:relative; background:#fff; border-bottom:1px solid #ededed; backdrop-filter:none; }
.home-header .header-inner { width:min(calc(100% - 36px),1180px); min-height:78px; grid-template-columns:180px 1fr; gap:20px; }
.home-header .brand-copy strong { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:25px; letter-spacing:-.07em; }
.home-header .brand-copy small { color:#aaa; letter-spacing:.12em; font-size:8px; }
.home-header .main-nav { gap:30px; font-size:13px; }
.home-header .main-nav a { padding:30px 0 28px; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.search-pill { width:190px; height:34px; border:1px solid #ddd; border-radius:999px; color:#aaa; padding:0 12px; display:flex; justify-content:space-between; align-items:center; font-size:10px; }
.search-pill b { color:#444; font-size:15px; }
.header-icon { width:28px; height:28px; display:grid; place-items:center; font-size:15px; color:#444; }

/* HERO */
.shop-visual-section { position:relative; background:#fff; padding:12px 0 18px; overflow:hidden; }
.visual-wide-track { width:calc(100% + 330px); margin-left:-165px; padding:0 0 5px; display:flex; gap:9px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }
.visual-wide-track::-webkit-scrollbar { display:none; }
.visual-card { flex:0 0 clamp(290px,24vw,390px); height:335px; scroll-snap-align:center; border-radius:4px; overflow:hidden; color:#fff; position:relative; display:flex; align-items:flex-end; padding:28px; isolation:isolate; }
.visual-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%); }
.tone-navy { background:linear-gradient(145deg,#455c6a,#24313e); }
.tone-pink { background:linear-gradient(145deg,#f1b4ca,#bb597f); }
.tone-mint { background:linear-gradient(145deg,#91dede,#63b8c1); }
.tone-purple { background:linear-gradient(145deg,#e1b0da,#a74a9b); }
.tone-blue { background:linear-gradient(145deg,#597989,#334956); }
.visual-copy { position:relative; z-index:4; }
.visual-copy small { font-size:10px; opacity:.76; letter-spacing:.06em; }
.visual-copy h1,.visual-copy h2 { margin:7px 0 0; font-size:23px; line-height:1.32; letter-spacing:-.045em; }
.visual-copy p { margin:10px 0 0; font-size:11px; color:rgba(255,255,255,.75); }
.visual-product { position:absolute; z-index:1; top:26px; right:20px; width:72%; height:190px; }
.visual-product i { position:absolute; display:block; box-shadow:0 16px 28px rgba(0,0,0,.2); }
.visual-product i:nth-child(1) { width:91px; height:125px; right:72px; top:24px; background:#fff; border-radius:7px; transform:rotate(-7deg); }
.visual-product i:nth-child(1)::after { content:"JAPAN"; position:absolute; left:11px; bottom:14px; color:#222; font-size:15px; font-weight:900; }
.visual-product i:nth-child(2) { width:74px; height:108px; right:5px; top:43px; background:rgba(255,255,255,.94); border-radius:6px; transform:rotate(8deg); }
.visual-product i:nth-child(2)::after { content:"DIRECT"; position:absolute; left:8px; bottom:12px; color:#222; font-size:11px; font-weight:900; }
.visual-product i:nth-child(3) { width:56px; height:92px; right:145px; top:64px; background:#f7f7f7; border-radius:22px 22px 12px 12px; transform:rotate(5deg); }
.visual-product i:nth-child(3)::after { content:"JP"; position:absolute; left:16px; top:32px; color:#333; font-size:18px; font-weight:900; }
.art-coupon i:nth-child(1) { background:#dbff5a; }
.art-coupon i:nth-child(2) { background:#54ea9e; }
.art-delivery i:nth-child(1) { width:116px; border-radius:50% 50% 15px 15px; background:#ede4ea; }
.art-delivery i:nth-child(1)::after { content:"A2"; left:32px; top:44px; bottom:auto; color:#78277a; font-size:27px; }
.art-beauty i:nth-child(3) { background:#f7a9b8; }
.visual-pager { height:23px; display:flex; align-items:center; justify-content:center; gap:5px; color:#999; font-size:9px; }
.visual-pager span { width:18px; height:2px; background:#d6d6d6; }
.visual-pager span:first-child { background:#222; }
.visual-pager b { margin-left:7px; font-size:8px; font-weight:500; }
.visual-arrow { position:absolute; z-index:12; top:50%; width:46px; height:62px; border:1px solid rgba(255,255,255,.58); background:rgba(20,20,20,.48); color:#fff; display:grid; place-items:center; font-size:39px; font-weight:200; line-height:1; cursor:pointer; transform:translateY(-65%); transition:background .2s ease, opacity .2s ease; }
.visual-arrow:hover { background:rgba(20,20,20,.72); }
.visual-arrow-left { left:20px; }
.visual-arrow-right { right:20px; }


/* ROUND CATEGORY */
.round-category-section { padding:8px 0 58px; }
.round-category-list { display:flex; align-items:flex-start; justify-content:center; gap:16px; flex-wrap:wrap; }
.round-category-list a { width:78px; text-align:center; font-size:10px; color:#444; }
.round-category-list i { width:48px; height:48px; margin:0 auto 8px; border-radius:50%; background:#fafafa; border:1px solid #e7e7e7; display:grid; place-items:center; font-style:normal; font-size:16px; font-weight:900; box-shadow:0 3px 8px rgba(0,0,0,.03); }
.round-category-list a:nth-child(1) i { color:#ff6d52; }
.round-category-list a:nth-child(2) i { color:#e7962d; }
.round-category-list a:nth-child(3) i { color:#aa6e9f; }
.round-category-list a:nth-child(4) i { color:#5483af; }
.round-category-list a:nth-child(5) i { color:#7f9d54; }
.round-category-list a:nth-child(6) i { color:#ca6a63; }
.round-category-list a:nth-child(7) i { color:#527c8c; }
.round-category-list a:nth-child(8) i { color:#9a774e; }
.round-category-list a:nth-child(9) i { color:#6e6e6e; }
.round-category-list span { white-space:nowrap; }

/* COMMON SHOP SECTION */
.shop-section { padding:42px 0 54px; background:#fff; }
.shop-section-title { min-height:40px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.shop-section-title h2 { margin:0; font-size:23px; letter-spacing:-.05em; }
.shop-section-title > a { font-size:11px; color:#777; }
.title-with-tabs { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.mini-tabs,.brand-tabs { display:flex; gap:7px; }
.mini-tabs span,.brand-tabs span { padding:6px 12px; background:#f2f2f2; border-radius:999px; font-size:10px; font-weight:700; color:#777; }
.mini-tabs .active,.brand-tabs .active { background:#111; color:#fff; }

/* PRODUCT GRID */
.shop-product-grid { display:grid; gap:14px; }
.five-cols { grid-template-columns:repeat(5,minmax(0,1fr)); }
.four-cols { grid-template-columns:repeat(4,minmax(0,1fr)); }
.shop-product-card { min-width:0; }
.shop-product-thumb { height:222px; background:#f3f3f3; position:relative; display:grid; place-items:center; overflow:hidden; }

.shop-product-thumb.image-thumb { height:244px; background:#f2f2f2; display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; }
.shop-product-thumb.image-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.popular-real-grid .product-visual { transform-origin:center center; }
.popular-real-grid .product-tamushichinki { transform:scale(1.30); }
.popular-real-grid .product-korakku { transform:scale(1.34); }
.popular-real-grid .product-roihi { transform:scale(1.38); }
.popular-real-grid .product-aneron { transform:scale(1.36); }
.popular-real-grid .product-cupnoodle { transform:scale(1.24); }
.popular-real-grid .cart-mark { display:none !important; }
.popular-real-grid .shop-product-info { padding-top:14px; }
.popular-real-grid .shop-product-info small { display:block; margin-bottom:6px; font-size:10px; color:#9a9a9a; }
.popular-real-grid .shop-product-info h3 { margin:0 0 10px; min-height:44px; font-size:14px; line-height:1.45; letter-spacing:-.035em; }
.popular-real-grid .shop-product-info .old-price { display:none; }
.popular-real-grid .shop-product-info strong { font-size:13px; color:#2a5bd7; }
.popular-real-grid .shop-product-info strong em { display:none; }
.cart-mark { position:absolute; right:10px; bottom:9px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.08); display:grid; place-items:center; font-size:12px; }
.pack { position:relative; display:block; width:92px; height:125px; background:#fff; box-shadow:0 12px 18px rgba(0,0,0,.14); border:1px solid rgba(0,0,0,.08); }
.pack::before { content:""; position:absolute; left:8px; top:9px; width:calc(100% - 16px); height:5px; background:currentColor; opacity:.85; }
.pack b,.pack em { position:absolute; left:10px; font-style:normal; }
.pack b { top:24px; font-size:9px; letter-spacing:.08em; }
.pack em { left:10px; right:10px; bottom:13px; font-size:18px; line-height:1; font-weight:900; }
.wide-pack { width:112px; height:91px; }
.round-pack { width:94px; height:120px; border-radius:44px 44px 8px 8px; }
.product-bg-1 { background:#eef1f7; color:#244b7d; }
.product-bg-2 { background:#f0f1ec; color:#506547; }
.product-bg-3 { background:#f4eef7; color:#734689; }
.product-bg-4 { background:#f1eeee; color:#6a4d45; }
.product-bg-5 { background:#f7efeb; color:#d56d40; }
.product-bg-6 { background:#efedf2; color:#8d468d; }
.product-bg-7 { background:#f7f2f7; color:#aa81c0; }
.product-bg-8 { background:#fbf2ef; color:#e57b62; }
.product-bg-9 { background:#edf4ff; color:#3086d8; }
.product-bg-10 { background:#f3f7df; color:#849f2f; }
.product-bg-11 { background:#f3f6fb; color:#6880a9; }
.shop-product-info { padding:11px 1px 0; }
.shop-product-info small { color:#aaa; font-size:9px; }
.shop-product-info h3 { margin:6px 0 8px; min-height:34px; font-size:12px; line-height:1.45; letter-spacing:-.035em; }
.shop-product-info .old-price { margin:0 0 4px; font-size:9px; color:#aaa; text-decoration:none; }
.shop-product-info strong { display:block; font-size:12px; }
.shop-product-info strong em { color:#1b8a67; font-style:normal; margin-right:5px; }
.shop-product-info .rating { display:block; margin-top:4px; font-size:9px; color:#a68541; }

/* JAPAN SHOPPING GUIDE BRIDGE */
.shopping-guide-section { padding-top:26px; }
.shopping-guide-banner { min-height:330px; padding:46px 54px; background:linear-gradient(115deg,#071a3f 0%,#0e3d76 48%,#159cb7 100%); color:#fff; position:relative; overflow:hidden; display:block; }
.shopping-guide-banner::before { content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:80px; top:-120px; background:rgba(112,224,231,.18); filter:blur(2px); }
.shopping-guide-banner::after { content:""; position:absolute; inset:auto -90px -130px auto; width:360px; height:360px; border-radius:50%; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.02); }
.shopping-guide-copy { position:relative; z-index:3; max-width:560px; }
.shopping-guide-copy small { font-size:11px; letter-spacing:.14em; color:#9ce8ef; }
.shopping-guide-copy h2 { margin:13px 0; font-size:32px; line-height:1.26; letter-spacing:-.05em; }
.shopping-guide-copy p { max-width:520px; margin:0; font-size:13px; line-height:1.65; color:rgba(255,255,255,.78); }
.shopping-guide-copy span { display:inline-block; margin-top:25px; padding:11px 17px; background:#fff; color:#173c68; font-size:12px; font-weight:800; }
.shopping-guide-art { position:absolute; right:48px; top:24px; width:430px; height:285px; z-index:2; }
.guide-map { position:absolute; right:24px; top:4px; width:210px; height:245px; opacity:.23; transform:rotate(7deg); }
.guide-map::before,.guide-map::after { content:""; position:absolute; background:#d9f5f4; border-radius:55% 45% 58% 42%; }
.guide-map::before { width:64px; height:180px; right:58px; top:24px; transform:rotate(17deg); box-shadow:-28px 72px 0 -13px #d9f5f4,28px -15px 0 -19px #d9f5f4; }
.guide-map::after { width:28px; height:68px; right:118px; bottom:2px; transform:rotate(24deg); }
.guide-map b { position:absolute; right:66px; top:102px; font-size:16px; letter-spacing:.14em; color:#fff; z-index:2; }
.map-dot { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; z-index:3; box-shadow:0 0 0 5px rgba(255,255,255,.11); }
.dot-1 { right:77px; top:52px; }.dot-2 { right:102px; top:104px; }.dot-3 { right:66px; top:155px; }.dot-4 { right:124px; top:191px; }
.guide-book { position:absolute; right:115px; bottom:3px; width:170px; height:215px; padding:24px 20px; background:linear-gradient(145deg,#f7f9fb,#dce7ee); color:#123a66; border-radius:4px 11px 5px 4px; transform:rotate(-5deg); box-shadow:0 20px 34px rgba(0,0,0,.25); }
.guide-book::before { content:""; position:absolute; left:0; top:0; bottom:0; width:9px; background:#aec4d3; opacity:.65; }
.guide-book small { font-size:9px; letter-spacing:.1em; color:#5482a2; }
.guide-book strong { display:block; margin-top:18px; font-size:28px; line-height:.95; letter-spacing:-.05em; }
.guide-book span { position:absolute; bottom:22px; left:20px; font-size:10px; font-weight:800; letter-spacing:.08em; color:#6c8ea5; }
.guide-bag { position:absolute; right:0; bottom:20px; width:108px; height:116px; background:#f2c75c; border-radius:5px; box-shadow:0 16px 30px rgba(0,0,0,.22); transform:rotate(4deg); }
.guide-bag::before { content:""; position:absolute; left:29px; top:-19px; width:50px; height:34px; border:4px solid #f2c75c; border-bottom:0; border-radius:24px 24px 0 0; }
.guide-bag span { position:absolute; inset:0; display:grid; place-items:center; font-size:28px; font-weight:900; color:#143b68; }
.guide-box { position:absolute; left:5px; bottom:8px; width:142px; height:102px; background:#d7b48a; transform:rotate(5deg); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.guide-box::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:10px; background:#e8cfac; transform:translateX(-50%); }
.guide-box::after { content:""; position:absolute; left:0; right:0; top:20px; height:2px; background:rgba(92,62,36,.16); }
.guide-box i { position:absolute; right:15px; top:14px; width:24px; height:24px; border:2px solid rgba(77,52,32,.28); border-radius:50%; }
.guide-box b { position:absolute; left:15px; bottom:14px; font-size:11px; letter-spacing:.12em; color:#705238; }

/* CUSTOM CATEGORY */
.custom-product-layout { display:grid; grid-template-columns:190px 1fr; gap:28px; }
.custom-category-menu { border-top:1px solid #ddd; }
.custom-category-menu a { min-height:54px; display:grid; grid-template-columns:28px 1fr 16px; align-items:center; gap:7px; border-bottom:1px solid #e9e9e9; font-size:11px; color:#777; }
.custom-category-menu a.active { color:#111; font-weight:800; }
.custom-category-menu i { font-style:normal; font-size:17px; color:#aaa; }
.custom-category-menu b { font-size:17px; font-weight:400; }
.compact-products .shop-product-thumb { height:205px; }

/* BRAND */
.brand-section { background:#fff; }
.brand-feature-layout { display:grid; grid-template-columns:1.65fr .75fr; gap:28px; }
.brand-hero-card { min-height:420px; background:#d6eadb; position:relative; overflow:hidden; padding:48px; }
.brand-hero-copy { position:relative; z-index:3; }
.brand-hero-copy small { font-size:10px; letter-spacing:.12em; color:#557960; }
.brand-hero-copy h2 { margin:11px 0 14px; font-size:33px; line-height:1.25; letter-spacing:-.055em; }
.brand-hero-copy p { font-size:12px; color:#5f7666; }
.brand-product-scene { position:absolute; right:38px; bottom:0; width:390px; height:300px; }
.brand-box { position:absolute; right:30px; bottom:0; width:220px; height:250px; padding:29px; background:#16251f; color:#d5af60; font-size:24px; line-height:1.12; box-shadow:0 19px 30px rgba(0,0,0,.18); }
.brand-box b { display:block; margin-top:16px; color:#fff; font-size:38px; }
.brand-bottle { position:absolute; left:35px; bottom:0; width:82px; height:205px; border-radius:12px 12px 4px 4px; background:#253f33; box-shadow:0 16px 25px rgba(0,0,0,.18); }
.brand-bottle::before { content:""; position:absolute; left:15px; right:15px; top:-21px; height:24px; background:#111; border-radius:4px 4px 2px 2px; }
.brand-side-list { display:grid; gap:12px; align-content:start; }
.brand-side-item { display:grid; grid-template-columns:115px 1fr; gap:13px; align-items:center; }
.mini-thumb { height:112px; background:#f5f5f5; display:grid; place-items:center; }
.mini-pack { width:50px; height:76px; display:block; background:#222; box-shadow:0 10px 17px rgba(0,0,0,.15); }
.mini-pack.brown { background:#604538; }
.mini-pack.red { background:#71382f; }
.brand-side-item small { font-size:9px; color:#aaa; }
.brand-side-item strong { display:block; margin:5px 0; font-size:12px; line-height:1.4; }
.brand-side-item p { margin:0; font-size:10px; color:#777; }
.brand-side-item em { font-style:normal; color:#1b8a67; font-weight:800; }

/* DEAL */
.deal-track-wrap { position:relative; }
.track-arrow { position:absolute; z-index:5; top:90px; width:32px; height:50px; border:0; background:rgba(255,255,255,.9); color:#999; font-size:35px; font-weight:200; cursor:pointer; }
.track-arrow.left { left:-38px; }
.track-arrow.right { right:-38px; }



/* GUIDE INTRO COPY */
.guide-intro-section { padding-top:24px; padding-bottom:8px; }
.guide-intro-box { padding:34px 38px; background:#fff; border:1px solid #ececec; box-shadow:0 18px 34px rgba(0,0,0,.04); }
.guide-intro-box small { display:block; margin-bottom:10px; font-size:11px; letter-spacing:.14em; color:#2a5bd7; }
.guide-intro-box h2 { margin:0 0 12px; font-size:28px; line-height:1.3; letter-spacing:-.045em; }
.guide-intro-box p { margin:0; max-width:980px; font-size:14px; line-height:1.85; color:#666; }
.guide-intro-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.guide-intro-tags a { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; border:1px solid #d8dfef; background:#f7f9ff; color:#173c68; font-size:12px; font-weight:700; }
.guide-intro-tags a:hover { background:#eef3ff; }

/* MOMENT */
.moment-section { background:#fff; padding:62px 0 74px; color:#111; }
.moment-title { margin-bottom:23px; }
.moment-title h2 { margin:0; font-size:24px; letter-spacing:-.04em; color:#111; }
.moment-title p { margin:6px 0 0; color:#666; font-size:11px; }
.moment-track-wrap { position:relative; }
.moment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.moment-card { min-height:500px; padding:18px; position:relative; overflow:hidden; color:#111; display:flex; flex-direction:column; justify-content:flex-start; background:#fff; border:1px solid #ececec; border-radius:24px; box-shadow:0 16px 30px rgba(17,17,17,.06); transition:transform .25s ease, box-shadow .25s ease; }
.moment-card:hover { transform:translateY(-4px); box-shadow:0 20px 34px rgba(17,17,17,.10); }
.quote { position:absolute; left:18px; top:10px; font:700 58px/1 Georgia,serif; color:#d11d61; z-index:2; }
.moment-image { width:100%; margin-top:24px; aspect-ratio:3 / 4; border-radius:18px; overflow:hidden; background:#f6f8fb; }
.moment-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; }
.moment-card strong { margin-top:18px; position:relative; z-index:3; font-size:16px; line-height:1.45; letter-spacing:-.04em; }
.moment-card small { margin-top:8px; font-size:9px; font-weight:900; color:#777; opacity:1; }
.moment-arrow { position:absolute; top:44%; width:32px; height:54px; border:0; background:transparent; color:#999; font-size:39px; cursor:pointer; }
.moment-arrow:hover { color:#222; }
.moment-arrow.left { left:-43px; }.moment-arrow.right { right:-43px; }

/* HOME FAQ */
.home-faq-section { padding-top:58px; padding-bottom:72px; background:#fff; }
.home-faq-section .shop-section-title { align-items:flex-end; }
.home-faq-eyebrow { display:block; margin-bottom:8px; font-size:10px; letter-spacing:.16em; color:#2a5bd7; }
.home-faq-lead { margin:8px 0 0; font-size:12px; color:#777; line-height:1.65; }
.home-faq-more { flex:0 0 auto; margin-bottom:2px; font-size:11px; font-weight:700; color:#173c68; }
.home-faq-list { border-top:1px solid #dfe3e8; }
.home-faq-item { border-bottom:1px solid #e7eaee; background:#fff; }
.home-faq-item summary { min-height:76px; display:grid; grid-template-columns:46px 1fr 28px; align-items:center; gap:10px; cursor:pointer; list-style:none; }
.home-faq-item summary::-webkit-details-marker { display:none; }
.home-faq-item .faq-num { font-size:11px; font-weight:800; color:#9aa4b3; }
.home-faq-item summary strong { font-size:15px; line-height:1.45; letter-spacing:-.035em; color:#111; }
.home-faq-item summary i { width:22px; height:22px; position:relative; justify-self:end; }
.home-faq-item summary i::before,
.home-faq-item summary i::after { content:""; position:absolute; left:50%; top:50%; width:13px; height:1px; background:#666; transform:translate(-50%,-50%); transition:transform .2s ease; }
.home-faq-item summary i::after { transform:translate(-50%,-50%) rotate(90deg); }
.home-faq-item[open] summary i::after { transform:translate(-50%,-50%) rotate(0deg); }
.home-faq-answer { padding:0 38px 22px 56px; }
.home-faq-answer p { margin:0; max-width:900px; font-size:13px; line-height:1.8; color:#666; }
.home-faq-item[open] { background:#fbfcfe; }

/* NOTICE + FOOTER */
.notice-strip { border-top:1px solid #ededed; border-bottom:1px solid #ededed; background:#fff; }
.notice-inner { min-height:54px; display:grid; grid-template-columns:80px 1fr 90px 50px; align-items:center; gap:14px; font-size:10px; }
.notice-inner strong { font-size:11px; }
.notice-inner a { color:#555; }.notice-inner span { color:#aaa; text-align:right; }.notice-more { text-align:right; }
.home-footer-links { background:#f7f7f7; border-bottom:1px solid #e9e9e9; }
.footer-nav-row { min-height:56px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; font-size:10px; color:#555; }
.home-footer { background:#f7f7f7; color:#333; padding:32px 0 42px; }
.footer-home-inner { display:grid; grid-template-columns:210px 1fr; gap:30px; }
.footer-brand strong { display:block; font-family:Georgia,serif; font-style:italic; font-size:20px; }
.footer-brand small { font-size:8px; letter-spacing:.12em; color:#aaa; }
.footer-text p { margin:3px 0; color:#999; font-size:9px; line-height:1.55; }

/* RESPONSIVE - HOME V2 */
@media (max-width:1060px) {
  .home-header .header-inner { grid-template-columns:1fr auto; }
  .home-header .main-nav { top:118px; }
  .header-actions { display:none; }
  .visual-wide-track { width:calc(100% + 150px); margin-left:-75px; }
  .visual-card { height:310px; }
  .five-cols { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .five-cols .shop-product-card:nth-child(n+4) { display:none; }
  .four-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-feature-layout { grid-template-columns:1fr; }
  .brand-side-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .brand-side-item { grid-template-columns:90px 1fr; }
  .moment-grid { grid-template-columns:repeat(4,240px); overflow-x:auto; padding-bottom:7px; }
  .moment-arrow,.track-arrow { display:none; }
}

@media (max-width:720px) {
  .shop-container { width:min(calc(100% - 24px),1180px); }
  .top-utility-inner { width:min(calc(100% - 24px),1180px); height:30px; justify-content:center; overflow:hidden; }
  .top-utility nav { gap:5px; }
  .top-utility a { padding:4px 7px; font-size:8px; }
  .home-header .header-inner { min-height:62px; width:min(calc(100% - 24px),1180px); }
  .home-header .main-nav { top:98px; }
  .home-header .brand-copy strong { font-size:21px; }
  .shop-visual-section { padding-top:8px; }
  .visual-wide-track { width:auto; margin:0; padding:0 12px 5px; }
  .visual-card { flex:0 0 82vw; height:285px; padding:22px; scroll-snap-align:center; }
  .visual-copy h1,.visual-copy h2 { font-size:20px; }
  .visual-product { width:70%; right:5px; top:24px; transform:scale(.88); transform-origin:top right; }
  .visual-arrow { width:38px; height:52px; font-size:32px; transform:translateY(-70%); }
  .visual-arrow-left { left:7px; }
  .visual-arrow-right { right:7px; }
  .round-category-section { padding:8px 0 38px; }
  .round-category-list { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:7px; }
  .round-category-list a { flex:0 0 67px; }
  .round-category-list i { width:44px; height:44px; }
  .shop-section { padding:32px 0 40px; }
  .shop-section-title { align-items:flex-start; margin-bottom:15px; }
  .shop-section-title h2 { font-size:19px; }
  .title-with-tabs { gap:10px; }
  .mini-tabs,.brand-tabs { max-width:100%; overflow-x:auto; }
  .mini-tabs span,.brand-tabs span { white-space:nowrap; }
  .shop-product-grid.five-cols,.shop-product-grid.four-cols { display:flex; overflow-x:auto; gap:11px; padding-bottom:7px; scroll-snap-type:x mandatory; }
  .five-cols .shop-product-card,.four-cols .shop-product-card,.five-cols .shop-product-card:nth-child(n+4) { display:block; flex:0 0 58vw; scroll-snap-align:start; }
  .shop-product-thumb { height:180px; }
  .shop-product-thumb.image-thumb { height:190px; padding:0; }
  .popular-real-grid .product-tamushichinki { transform:scale(1.22); }
  .popular-real-grid .product-korakku { transform:scale(1.26); }
  .popular-real-grid .product-roihi { transform:scale(1.30); }
  .popular-real-grid .product-aneron { transform:scale(1.28); }
  .popular-real-grid .product-cupnoodle { transform:scale(1.18); }
  .popular-real-grid .shop-product-info h3 { min-height:auto; font-size:13px; }
  .popular-real-grid .shop-product-info strong { font-size:12px; color:#2a5bd7; }
  .shopping-guide-banner { min-height:320px; padding:31px 26px; }
  .shopping-guide-copy h2 { font-size:25px; }
  .shopping-guide-copy p { max-width:72%; line-height:1.55; }
  .shopping-guide-art { right:-82px; top:58px; width:285px; height:220px; opacity:.76; transform:scale(.88); transform-origin:center; }
  .guide-book { width:145px; height:185px; right:82px; padding:20px 17px; }
  .guide-book strong { font-size:25px; }
  .guide-bag { right:7px; bottom:16px; width:86px; height:92px; }
  .guide-box { left:24px; bottom:8px; width:112px; height:80px; }
  .guide-map { right:4px; top:-8px; transform:scale(.78) rotate(7deg); }
  .custom-product-layout { grid-template-columns:1fr; gap:15px; }
  .custom-category-menu { display:flex; overflow-x:auto; border-top:0; gap:7px; }
  .custom-category-menu a { min-height:auto; flex:0 0 auto; display:flex; border:1px solid #e7e7e7; border-radius:999px; padding:9px 12px; }
  .custom-category-menu a i,.custom-category-menu a b { display:none; }
  .brand-feature-layout { gap:16px; }
  .brand-hero-card { min-height:350px; padding:30px 25px; }
  .brand-hero-copy h2 { font-size:26px; }
  .brand-product-scene { right:-70px; width:320px; opacity:.86; }
  .brand-side-list { display:flex; overflow-x:auto; gap:12px; }
  .brand-side-item { flex:0 0 74vw; grid-template-columns:100px 1fr; }
  .moment-section { padding:45px 0 52px; }
  .moment-grid { grid-template-columns:none; display:flex; overflow-x:auto; gap:11px; scroll-snap-type:x mandatory; }
  .moment-card { flex:0 0 72vw; min-height:440px; scroll-snap-align:start; }
  .home-faq-section { padding-top:42px; padding-bottom:54px; }
  .home-faq-section .shop-section-title { align-items:flex-start; }
  .home-faq-more { display:none; }
  .home-faq-item summary { min-height:68px; grid-template-columns:34px 1fr 24px; gap:8px; }
  .home-faq-item summary strong { font-size:14px; }
  .home-faq-answer { padding:0 28px 18px 42px; }
  .home-faq-answer p { font-size:12px; line-height:1.72; }
  .notice-inner { grid-template-columns:55px 1fr; min-height:60px; }
  .notice-inner span,.notice-more { display:none; }
  .footer-nav-row { padding:17px 0; gap:15px 20px; }
  .footer-home-inner { grid-template-columns:1fr; gap:15px; }
}


/* =========================================================
   INDEX REFINEMENT V2 - 2026-09-04
   - centered working hero carousel
   - slightly larger home-page typography
   ========================================================= */
.home-page { font-size:15px; }
.home-page .top-utility a { font-size:11px; }
.home-page .home-header .main-nav { font-size:14px; }
.home-page .home-header .brand-copy strong { font-size:26px; }

.home-page .shop-visual-section { padding:16px 0 22px; overflow:hidden; }
.home-page .visual-carousel-shell {
  position:relative;
  width:min(100%, 1520px);
  margin:0 auto;
  padding:0 60px;
  box-sizing:border-box;
}
.home-page .visual-viewport { overflow:hidden; width:100%; }
.home-page .visual-wide-track {
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  box-sizing:border-box;
}
.home-page .visual-wide-track::-webkit-scrollbar { display:none; }
.home-page .visual-card {
  flex:0 0 clamp(300px, 29vw, 390px);
  min-width:0;
  height:350px;
  scroll-snap-align:center;
  padding:30px;
}
.home-page .visual-copy small { font-size:11px; }
.home-page .visual-copy h1,
.home-page .visual-copy h2 { font-size:25px; }
.home-page .visual-copy p { font-size:12px; }
.home-page .visual-arrow {
  top:50%;
  width:48px;
  height:68px;
  transform:translateY(-50%);
  border:0;
  border-radius:3px;
  background:rgba(20,20,20,.58);
  box-shadow:0 5px 18px rgba(0,0,0,.14);
}
.home-page .visual-arrow-left { left:6px; }
.home-page .visual-arrow-right { right:6px; }
.home-page .visual-pager { font-size:10px; }
.home-page .visual-pager b { font-size:10px; }

.home-page .shop-section-title h2 { font-size:25px; }
.home-page .shop-section-title > a { font-size:12px; }
.home-page .mini-tabs span,
.home-page .brand-tabs span { font-size:11px; padding:7px 13px; }
.home-page .shop-product-info small { font-size:11px; }
.home-page .shop-product-info h3 { font-size:14px; line-height:1.5; min-height:42px; }
.home-page .shop-product-info .old-price { font-size:11px; }
.home-page .shop-product-info strong { font-size:14px; }
.home-page .shop-product-info .rating { font-size:10px; }
.home-page .cart-mark { font-size:14px; }
.home-page .shopping-guide-copy small { font-size:11px; }
.home-page .shopping-guide-copy p { font-size:13px; }
.home-page .shopping-guide-copy span { font-size:12px; }
.home-page .moment-title p { font-size:12px; }
.home-page .event-card small { font-size:10px; }
.home-page .event-card strong { font-size:15px; }
.home-page .notice-inner { font-size:11px; }
.home-page .notice-inner strong { font-size:12px; }
.home-page .footer-nav-row { font-size:11px; }
.home-page .footer-text p { font-size:10px; }

@media (max-width:1060px) {
  .home-page .visual-carousel-shell { padding:0 50px; }
  .home-page .visual-card { flex-basis:clamp(285px, 42vw, 360px); }
}

@media (max-width:720px) {
  .home-page { font-size:14px; }
  .home-page .visual-carousel-shell { padding:0 38px; }
  .home-page .visual-card { flex:0 0 min(82vw, 330px); height:310px; padding:25px; }
  .home-page .visual-copy h1,
  .home-page .visual-copy h2 { font-size:22px; }
  .home-page .visual-copy p { font-size:11px; }
  .home-page .visual-arrow { width:34px; height:54px; font-size:30px; }
  .home-page .visual-arrow-left { left:2px; }
  .home-page .visual-arrow-right { right:2px; }
  .home-page .shop-section-title h2 { font-size:21px; }
  .home-page .shop-product-info h3 { font-size:13px; min-height:39px; }
  .home-page .shop-product-info strong { font-size:13px; }
}

/* =========================================================
   HOME HERO CAROUSEL V5
   Reference layout: five cards across, partial edge cards,
   edge-mounted arrows, centered slide, reactive counter.
   ========================================================= */
.home-page .shop-visual-section {
  position: relative;
  padding: 0 0 20px;
  background: #fff;
  overflow: hidden;
}

.home-page .visual-carousel-shell {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.home-page .visual-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.home-page .visual-wide-track {
  --hero-gap: 12px;
  display: flex;
  align-items: stretch;
  gap: var(--hero-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  transform: translate3d(0,0,0);
  transition: transform .52s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  user-select: none;
}

.home-page .visual-wide-track.is-jumping {
  transition: none !important;
}

.home-page .visual-card {
  --accent: #f4bd34;
  position: relative;
  flex: 0 0 clamp(286px, calc((100vw - 120px) / 5), 372px);
  height: 354px;
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
  color: #fff;
  text-decoration: none;
  box-shadow: none;
  isolation: isolate;
  opacity: 1 !important;
  transform: none !important;
}

.home-page .visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.05), transparent 42%);
  pointer-events: none;
}

.home-page .visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 72% 22%, rgba(255,255,255,.20), transparent 27%);
  pointer-events: none;
}

.home-page .tone-navy   { background: linear-gradient(145deg,#496476 0%,#314b5e 52%,#253b4c 100%); --accent:#dfc75d; }
.home-page .tone-pink   { background: linear-gradient(145deg,#efbfd2 0%,#f0adc6 48%,#b85a83 100%); --accent:#ee4f68; }
.home-page .tone-mint   { background: linear-gradient(145deg,#73d7d9 0%,#72cad1 48%,#4eabb7 100%); --accent:#73db3b; }
.home-page .tone-purple { background: linear-gradient(145deg,#e4b7df 0%,#dba0d4 52%,#a9559e 100%); --accent:#812c83; }
.home-page .tone-blue   { background: linear-gradient(145deg,#527385 0%,#3e6072 52%,#2a4657 100%); --accent:#d6c15c; }

/* Product-shaped CSS decoration only; carousel geometry is independent. */
.home-page .visual-product {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-page .visual-product i {
  position: absolute;
  display: block;
  margin: 0;
  box-shadow: 0 18px 28px rgba(24,25,30,.22);
}
.home-page .art-health i:nth-child(1),
.home-page .art-direct i:nth-child(1) {
  width: 138px; height: 154px; right: 86px; top: 62px;
  border-radius: 5px; transform: rotate(-8deg);
  background: linear-gradient(145deg,#263f62,#162841);
  border: 1px solid rgba(255,255,255,.18);
}
.home-page .art-health i:nth-child(1)::before { content:"JAPAN\A HEALTH"; white-space:pre; position:absolute; left:17px; top:28px; color:#f0d776; font-size:15px; line-height:1.15; font-weight:800; }
.home-page .art-health i:nth-child(1)::after { content:"DIRECT"; position:absolute; left:18px; bottom:20px; color:#fff; font-size:24px; font-weight:900; }
.home-page .art-direct i:nth-child(1)::before { content:"HEALTH\A DIRECT"; white-space:pre; position:absolute; left:18px; top:28px; color:#f4d26c; font-size:16px; font-weight:900; line-height:1.05; }
.home-page .art-direct i:nth-child(1)::after { content:"BEST"; position:absolute; left:18px; bottom:19px; color:#fff; font-size:25px; font-weight:950; }
.home-page .art-health i:nth-child(2),
.home-page .art-direct i:nth-child(2) {
  width: 67px; height: 112px; right: 40px; top: 45px;
  border-radius: 15px 15px 12px 12px; transform: rotate(7deg);
  background: linear-gradient(#f0f1eb 0 21%,#edf0e9 21% 100%);
}
.home-page .art-health i:nth-child(2)::before { content:""; position:absolute; left:8px; right:8px; top:32px; height:46px; border-radius:3px; background:#213c59; }
.home-page .art-health i:nth-child(2)::after,
.home-page .art-direct i:nth-child(2)::after { content:"JP"; position:absolute; left:21px; top:45px; color:#e8d06e; font-size:17px; font-weight:900; }
.home-page .art-health i:nth-child(3),
.home-page .art-direct i:nth-child(3) { width:98px; height:68px; right:35px; top:167px; border-radius:4px; transform:rotate(6deg); background:linear-gradient(145deg,#1c3452,#284765); }

.home-page .art-beauty i:nth-child(1) { width:132px; height:150px; right:112px; top:80px; border-radius:4px; transform:rotate(-4deg); background:linear-gradient(145deg,#ff5f7d,#ea345a); }
.home-page .art-beauty i:nth-child(1)::before { content:"INNER\A FLORA"; white-space:pre; position:absolute; left:15px; top:20px; color:#fff; font-size:16px; font-weight:900; line-height:1.05; }
.home-page .art-beauty i:nth-child(1)::after { content:"PROBIOTICS"; position:absolute; left:15px; bottom:18px; font-size:10px; color:rgba(255,255,255,.85); font-weight:700; }
.home-page .art-beauty i:nth-child(2) { width:82px; height:130px; right:47px; top:51px; border-radius:24px 24px 15px 15px; transform:rotate(8deg); background:linear-gradient(#fff 0 20%,#f9faf9 20% 100%); }
.home-page .art-beauty i:nth-child(2)::before { content:"PINK"; position:absolute; left:15px; top:50px; color:#ee4f68; font-size:17px; font-weight:900; }
.home-page .art-beauty i:nth-child(2)::after { content:""; position:absolute; left:22px; right:22px; top:-11px; height:17px; border-radius:8px; background:#ef5a74; }
.home-page .art-beauty i:nth-child(3) { width:48px; height:15px; right:12px; top:70px; border-radius:10px; background:#f6d0a7; transform:rotate(35deg); box-shadow:none; }

.home-page .art-coupon i:nth-child(1) { width:150px; height:88px; right:116px; top:69px; border-radius:5px; transform:rotate(-6deg); background:#fff; }
.home-page .art-coupon i:nth-child(1)::before { content:"10,000"; position:absolute; left:22px; top:24px; color:#111; font-size:29px; font-weight:950; letter-spacing:-.06em; }
.home-page .art-coupon i:nth-child(1)::after { content:"COUPON"; position:absolute; left:23px; top:12px; color:#777; font-size:10px; font-weight:800; }
.home-page .art-coupon i:nth-child(2) { width:100px; height:145px; right:53px; top:46px; border-radius:8px 8px 18px 18px; transform:rotate(3deg); background:linear-gradient(145deg,#5fd839,#3dbf27); }
.home-page .art-coupon i:nth-child(2)::before { content:""; position:absolute; left:45px; top:8px; width:13px; height:55px; border-radius:8px; background:#f4f3ec; }
.home-page .art-coupon i:nth-child(3) { width:105px; height:78px; right:20px; top:147px; border-radius:4px; background:#222831; transform:rotate(-8deg); }
.home-page .art-coupon i:nth-child(3)::before { content:"JP"; position:absolute; left:12px; bottom:10px; color:#f3ca56; font-size:18px; font-weight:900; }

.home-page .art-delivery i:nth-child(1) { width:178px; height:144px; right:63px; top:64px; border-radius:48% 48% 30% 30% / 18% 18% 14% 14%; background:linear-gradient(90deg,#c6bbb1,#eee5dc 22%,#d1c6bb 65%,#afa49c); border-top:13px solid #652463; }
.home-page .art-delivery i:nth-child(1)::before { content:"A2"; position:absolute; left:58px; top:28px; width:58px; height:58px; border:5px solid #6e2b73; border-radius:50%; display:grid; place-items:center; color:#6e2b73; font-size:30px; font-weight:900; }
.home-page .art-delivery i:nth-child(1)::after { content:"PLATINUM"; position:absolute; left:49px; bottom:22px; color:#4a3e3c; font-size:12px; font-weight:800; }
.home-page .art-delivery i:nth-child(2) { width:70px; height:22px; right:232px; top:164px; border-radius:50%; background:#dfd5c8; transform:rotate(-18deg); box-shadow:none; }
.home-page .art-delivery i:nth-child(3) { width:15px; height:100px; right:48px; top:140px; border-radius:8px; background:#b47a4e; transform:rotate(30deg); box-shadow:none; }

.home-page .visual-copy {
  position: absolute;
  z-index: 4;
  left: 24px;
  right: 22px;
  bottom: 24px;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.home-page .visual-copy small { display:block; margin-bottom:7px; font-size:11px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.8); }
.home-page .visual-copy h1,
.home-page .visual-copy h2 { margin:0; font-size:24px; line-height:1.24; letter-spacing:-.045em; color:#fff; font-weight:850; }
.home-page .visual-copy p { margin:10px 0 0; font-size:12px; line-height:1.45; color:rgba(255,255,255,.76); }

.home-page .visual-arrow {
  position: absolute;
  z-index: 30;
  top: calc(50% - 18px);
  width: 42px;
  height: 66px;
  transform: translateY(-50%);
  border: 0;
  background: rgba(37,41,44,.24);
  color: rgba(255,255,255,.95);
  font-size: 36px;
  font-weight: 200;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease;
}
.home-page .visual-arrow:hover { background: rgba(28,31,34,.48); }
.home-page .visual-arrow-left { left: 0; border-radius: 0 6px 6px 0; }
.home-page .visual-arrow-right { right: 0; border-radius: 6px 0 0 6px; }

.home-page .visual-pager {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #8f8f8f;
  font-size: 10px;
}
.home-page .visual-pager span { width: 36px; height: 2px; background: #d9d9d9; transition: background .2s ease; }
.home-page .visual-pager span.is-active { background: #222; }
.home-page .visual-pager b { margin-left: 8px; min-width: 34px; font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .home-page .visual-card { flex-basis: clamp(280px, 38vw, 335px); height: 330px; }
  .home-page .visual-copy h1,
  .home-page .visual-copy h2 { font-size: 22px; }
}

@media (max-width: 720px) {
  .home-page .shop-visual-section { padding-bottom: 14px; }
  .home-page .visual-wide-track { --hero-gap: 9px; }
  .home-page .visual-card { flex: 0 0 82vw; max-width: 330px; height: 315px; }
  .home-page .visual-copy { left: 20px; right: 18px; bottom: 20px; }
  .home-page .visual-copy h1,
  .home-page .visual-copy h2 { font-size: 21px; }
  .home-page .visual-copy p { font-size: 11px; }
  .home-page .visual-product { transform: scale(.88); transform-origin: top right; }
  .home-page .visual-arrow { width: 34px; height: 56px; font-size: 30px; }
  .home-page .visual-pager span { width: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .visual-wide-track { transition: none; }
}


/* =========================================================
   HOME HERO CAROUSEL V6 — edge-clipped reference geometry
   - no horizontal white gutters
   - outer visible cards are intentionally clipped + dimmed
   - arrows sit INSIDE the outer cards, toward the center
   ========================================================= */
.home-page .shop-visual-section {
  padding: 0 0 18px !important;
  overflow: hidden !important;
}

.home-page .visual-carousel-shell,
.home-page .visual-viewport {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.home-page .visual-wide-track {
  --hero-gap: 10px;
  gap: var(--hero-gap) !important;
  padding: 0 !important;
  margin: 0 !important;
}

.home-page .visual-card {
  /* 4.58 cards fit in the viewport: outer cards are clipped on purpose */
  flex: 0 0 calc((100vw - (var(--hero-gap) * 4)) / 4.58) !important;
  width: calc((100vw - (var(--hero-gap) * 4)) / 4.58) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: clamp(390px, 27vw, 455px) !important;
  border-radius: 5px !important;
  transition: filter .28s ease, opacity .28s ease, transform .28s ease !important;
}

/* Only the two OUTER visible cards are subdued. 2~4 remain clear. */
.home-page .visual-card.is-edge-dim::before {
  background:
    linear-gradient(rgba(9,18,25,.42), rgba(9,18,25,.42)),
    linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.05), transparent 42%) !important;
}
.home-page .visual-card.is-edge-dim {
  filter: saturate(.78) brightness(.76);
}
.home-page .visual-card:not(.is-edge-dim) {
  filter: none;
}

/* Arrows are positioned by JS from the actual 1st/5th visible card bounds. */
.home-page .visual-arrow {
  top: 50% !important;
  left: 0;
  right: auto !important;
  width: 42px !important;
  height: 66px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(31,38,43,.40) !important;
  color: #fff !important;
  z-index: 50 !important;
  transition: background .18s ease !important;
}
.home-page .visual-arrow:hover { background: rgba(22,28,32,.62) !important; }
.home-page .visual-arrow-left,
.home-page .visual-arrow-right { left: 0; right: auto !important; }

.home-page .visual-pager {
  height: 38px !important;
  gap: 6px !important;
  padding-top: 3px;
}
.home-page .visual-pager span {
  width: 30px !important;
  height: 2px !important;
  background: #d8d8d8 !important;
  transition: width .2s ease, background .2s ease !important;
}
.home-page .visual-pager span.is-active {
  width: 36px !important;
  background: #202020 !important;
}
.home-page .visual-pager b {
  margin-left: 8px !important;
  min-width: 38px !important;
  font-size: 11px !important;
  color: #777;
}

@media (max-width: 1100px) {
  .home-page .visual-card {
    flex-basis: calc((100vw - (var(--hero-gap) * 3)) / 3.55) !important;
    width: calc((100vw - (var(--hero-gap) * 3)) / 3.55) !important;
    height: clamp(360px, 40vw, 425px) !important;
  }
}

@media (max-width: 720px) {
  .home-page .visual-wide-track { --hero-gap: 8px; }
  .home-page .visual-card {
    flex: 0 0 76vw !important;
    width: 76vw !important;
    max-width: none !important;
    height: 390px !important;
  }
  /* On mobile only the adjacent edge cards are dimmed; current card stays clear. */
  .home-page .visual-arrow {
    width: 36px !important;
    height: 58px !important;
    font-size: 31px !important;
  }
  .home-page .visual-pager span { width: 22px !important; }
  .home-page .visual-pager span.is-active { width: 28px !important; }
}


/* =========================================================
   HOME HERO V8 — stable edge dim state
   Dedicated hero identity + no filter flash during looping.
   ========================================================= */
.home-page .home-hero {
  position: relative;
}

/* During the invisible infinite-loop coordinate reset, card filters must not animate. */
.home-page .visual-wide-track.is-jumping .visual-card {
  transition: none !important;
}

/* Edge cards stay continuously subdued; no temporary bright frame. */
.home-page .visual-card.is-edge-dim {
  filter: saturate(.78) brightness(.76) !important;
}
.home-page .visual-card:not(.is-edge-dim) {
  filter: none !important;
}


/* =========================================================
   INDEX / GLOBAL LAYOUT REFINEMENT V10
   - top utility removed from markup
   - wider, center-balanced header navigation
   - Hepalyse Plus 2 inspired footer guide structure
   - notice bar removed from markup
   ========================================================= */

/* HEADER: balanced around the viewport center */
.site-header .header-inner,
.home-header .header-inner {
  width: min(calc(100% - 56px), 1440px);
  min-height: 82px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  align-items: center;
  column-gap: 28px;
}
.site-header .brand,
.home-header .brand { justify-self: start; }
.site-header .main-nav,
.home-header .main-nav {
  width: 100%;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  font-weight: 700;
}
.site-header .main-nav a,
.home-header .main-nav a {
  flex: 0 0 auto;
  padding: 31px 4px 29px;
}
.site-header .header-side { justify-self: end; }
.site-header .menu-toggle,
.home-header .menu-toggle { justify-self: end; }

/* The old dark utility bar is no longer used. */
.top-utility { display: none !important; }

/* FOOTER: same structural idea as Hepalyse Plus 2, with evenly spread links. */
.footer-guide-bar,
.home-footer-links {
  background: #17191f;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-guide-inner {
  width: min(calc(100% - 56px), 1440px);
  min-height: 78px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 170px minmax(0,1fr);
  align-items: stretch;
  gap: 0;
}
.footer-guide-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-right: 28px;
  color: #8f949e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  border-right: 1px solid rgba(255,255,255,.09);
}
.footer-guide-links {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 0;
  font-size: 13px;
  font-weight: 800;
}
.footer-guide-links a {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #b9bdc5;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: color .2s ease, background .2s ease;
}
.footer-guide-links a:last-child { border-right: 0; }
.footer-guide-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: #fff;
  transition: left .2s ease, right .2s ease;
}
.footer-guide-links a:hover,
.footer-guide-links a.is-current {
  color: #fff;
  background: rgba(255,255,255,.035);
}
.footer-guide-links a:hover::after,
.footer-guide-links a.is-current::after { left: 20%; right: 20%; }

.site-footer,
.home-footer {
  background: #17191f;
  color: #fff;
  padding: 31px 0 36px;
  border-top: 0;
}
.footer-inner {
  width: min(calc(100% - 56px), 1440px);
  margin: 0 auto;
}
.site-footer .footer-copy {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.site-footer .footer-copy p {
  margin: 5px 0;
  color: #8e939d;
  font-size: 11px;
  line-height: 1.7;
}
.site-footer .footer-copy p:first-child { color: #c4c7cd; }

.notice-strip { display: none !important; }

@media (max-width: 1060px) {
  .site-header .header-inner,
  .home-header .header-inner {
    width: min(calc(100% - 36px), 1440px);
    min-height: 72px;
    grid-template-columns: 1fr auto;
    column-gap: 18px;
  }
  .site-header .main-nav,
  .home-header .main-nav {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 78px;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow);
  }
  .site-header .main-nav.is-open,
  .home-header .main-nav.is-open { display: flex; }
  .site-header .main-nav a,
  .home-header .main-nav a { padding: 13px 10px; border-bottom: 1px solid var(--line); }
  .site-header .main-nav a:last-child,
  .home-header .main-nav a:last-child { border-bottom: 0; }
  .site-header .main-nav a::after,
  .home-header .main-nav a::after { display: none; }
  .site-header .header-side { display: none; }
  .site-header .menu-toggle,
  .home-header .menu-toggle { display: block; }

  .footer-guide-inner {
    width: min(calc(100% - 36px), 900px);
    grid-template-columns: 120px minmax(0,1fr);
    min-height: 68px;
  }
  .footer-guide-label { padding-right: 18px; }
  .footer-guide-links a { min-height: 68px; font-size: 12px; padding: 0 5px; }
}

@media (max-width: 720px) {
  .site-header .header-inner,
  .home-header .header-inner { width: calc(100% - 24px); min-height: 64px; }
  .site-header .main-nav,
  .home-header .main-nav { top: 70px; left: 12px; right: 12px; }

  .footer-guide-inner {
    width: calc(100% - 20px);
    grid-template-columns: 72px minmax(0,1fr);
    min-height: 58px;
  }
  .footer-guide-label {
    padding-right: 8px;
    font-size: 8px;
    letter-spacing: .08em;
  }
  .footer-guide-links { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-guide-links a {
    min-height: 46px;
    padding: 0 3px;
    font-size: 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .site-footer,
  .home-footer { padding: 24px 0 84px; }
  .footer-inner { width: calc(100% - 28px); }
  .site-footer .footer-copy p { font-size: 10px; line-height: 1.65; }
}

/* =========================================================
   HOME HERO IMAGE CARDS V12
   Keep the V10 carousel geometry/arrows untouched.
   Only cards 1~4 use supplied campaign images.
   Card 5 remains the existing CSS visual until its image arrives.
   ========================================================= */
.home-page .home-hero .visual-card.has-hero-image {
  background:#111 !important;
}
.home-page .home-hero .visual-card.has-hero-image .hero-card-image {
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}
.home-page .home-hero .visual-card.has-hero-image::after {
  z-index:1;
  background:radial-gradient(circle at 70% 18%,rgba(255,255,255,.10),transparent 30%);
}
.home-page .home-hero .visual-card.has-hero-image::before {
  z-index:2;
}
.home-page .home-hero .visual-card.has-hero-image .visual-copy {
  z-index:4;
}


/* ===== GUIDE INTRO REDESIGN V21 ===== */
.guide-intro-section { padding:34px 0 28px; }
.guide-intro-shell { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr); gap:34px; align-items:center; padding:38px 38px 40px; border:1px solid #dfe7f4; border-radius:28px; background:linear-gradient(135deg, #eef5ff 0%, #f8fbff 48%, #ffffff 100%); box-shadow:0 22px 40px rgba(22, 46, 92, .08); }
.guide-intro-copy small { display:block; margin-bottom:12px; font-size:11px; letter-spacing:.18em; color:#2a5bd7; }
.guide-intro-copy h2 { margin:0 0 16px; font-size:30px; line-height:1.28; letter-spacing:-.045em; color:#111; }
.guide-intro-copy p { margin:0; max-width:760px; font-size:14px; line-height:1.9; color:#5f6877; }
.guide-intro-copy p + p { margin-top:12px; }
.guide-intro-tags { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.guide-intro-tags a { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 17px; border:1px solid #c9d7f1; border-radius:999px; background:#fff; color:#173c68; font-size:12px; font-weight:700; box-shadow:0 8px 20px rgba(33, 73, 148, .08); }
.guide-intro-tags a:hover { background:#f4f8ff; }
.guide-intro-visual { display:flex; justify-content:flex-end; }
.guide-intro-visual-frame { width:100%; max-width:470px; padding:16px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(237,244,255,.98)); box-shadow:0 18px 38px rgba(26, 54, 104, .12); }
.guide-intro-visual-frame img { width:100%; display:block; border-radius:18px; }

@media (max-width: 980px) {
  .guide-intro-section { padding:28px 0 22px; }
  .guide-intro-shell { grid-template-columns:1fr; gap:22px; padding:30px 26px 32px; }
  .guide-intro-copy h2 { font-size:26px; }
  .guide-intro-copy p { font-size:13px; line-height:1.82; }
  .guide-intro-visual { justify-content:center; }
  .guide-intro-visual-frame { max-width:560px; }
}

@media (max-width: 720px) {
  .guide-intro-section { padding:22px 0 16px; }
  .guide-intro-shell { padding:22px 18px 24px; border-radius:22px; gap:18px; }
  .guide-intro-copy h2 { font-size:23px; }
  .guide-intro-copy p { font-size:12px; line-height:1.75; }
  .guide-intro-tags { gap:8px; margin-top:18px; }
  .guide-intro-tags a { min-height:36px; padding:0 12px; font-size:11px; }
  .guide-intro-visual-frame { padding:10px; border-radius:18px; }
  .guide-intro-visual-frame img { border-radius:12px; }
}


/* ===== SHOPPING GUIDE BANNER IMAGE APPLY V22 ===== */
.shopping-guide-banner {
  background:
    linear-gradient(90deg, rgba(9,42,92,.95) 0%, rgba(17,74,131,.92) 38%, rgba(20,114,173,.42) 66%, rgba(20,114,173,.06) 100%),
    url(../images/guide/guide-intro-visual.png) center center / cover no-repeat;
  overflow:hidden;
}
.shopping-guide-copy { position:relative; z-index:2; max-width:520px; }
.shopping-guide-copy p { max-width:460px; }
.shopping-guide-art { display:none !important; }

@media (max-width: 980px) {
  .shopping-guide-banner {
    background:
      linear-gradient(180deg, rgba(9,42,92,.93) 0%, rgba(17,74,131,.84) 44%, rgba(17,74,131,.26) 100%),
      url(../images/guide/guide-intro-visual.png) 68% center / cover no-repeat;
  }
}

@media (max-width: 720px) {
  .shopping-guide-banner {
    background:
      linear-gradient(180deg, rgba(9,42,92,.94) 0%, rgba(17,74,131,.9) 52%, rgba(17,74,131,.48) 100%),
      url(../images/guide/guide-intro-visual.png) 72% center / cover no-repeat;
  }
  .shopping-guide-copy { max-width:none; }
}


/* ===== USER REQUEST FIX V24 =====
   1) 일본 쇼핑 가이드 배너: 파란 오버레이 제거, 원본 가이드 이미지 그대로 사용
   2) '일본 쇼핑 가이드를 먼저...' 섹션: 히어로와 자연스럽게 이어지는 화이트 카드형 레이아웃
   3) JapanDirect MOMENT와 간격 확대
   ========================================================= */
.shopping-guide-section {
  padding-bottom: 32px;
}

.shopping-guide-banner {
  min-height: 330px;
  padding: 48px 54px;
  background: #fff url(../images/guide/guide-intro-visual.png) center center / cover no-repeat !important;
  color: #111 !important;
  border: 1px solid #e7ebf1;
  box-shadow: 0 14px 30px rgba(17, 46, 83, .05);
}
.shopping-guide-banner::before,
.shopping-guide-banner::after {
  display: none !important;
  content: none !important;
}
.shopping-guide-copy {
  position: relative;
  z-index: 2;
  max-width: 500px;
}
.shopping-guide-copy small {
  color: #2a5bd7 !important;
}
.shopping-guide-copy h2 {
  color: #111 !important;
  text-shadow: none !important;
}
.shopping-guide-copy p {
  max-width: 460px;
  color: #566170 !important;
}
.shopping-guide-copy span {
  background: #173c68 !important;
  color: #fff !important;
}
.shopping-guide-art {
  display: none !important;
}

.guide-intro-section {
  padding: 0 0 72px !important;
  margin-top: 0;
}
.guide-intro-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 28px;
  align-items: start;
  padding: 34px 36px !important;
  border: 1px solid #e7ebf1;
  border-radius: 18px;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(17, 46, 83, .04);
}
.guide-intro-copy {
  max-width: none;
}
.guide-intro-copy small {
  display:block;
  margin-bottom:10px;
  font-size:11px;
  letter-spacing:.15em;
  color:#2a5bd7;
}
.guide-intro-copy h2 {
  margin:0 0 14px;
  font-size:28px;
  line-height:1.34;
  letter-spacing:-.045em;
  color:#111;
}
.guide-intro-copy p {
  max-width: none !important;
  font-size: 14px;
  line-height: 1.82;
  color: #5f6877;
}
.guide-intro-copy p + p {
  margin-top: 12px;
}
.guide-intro-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.guide-intro-tags a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border:1px solid #d8dfef;
  border-radius:999px;
  background:#fff;
  color:#173c68;
  font-size:12px;
  font-weight:700;
  box-shadow:none;
}
.guide-intro-tags a:hover {
  background:#f6f9ff;
}
.guide-intro-menu {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.guide-intro-item {
  min-height:145px;
  padding:18px 18px 16px;
  border:1px solid #edf1f6;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:0 8px 20px rgba(17,46,83,.04);
}
.guide-intro-item small {
  display:block;
  margin-bottom:8px;
  font-size:10px;
  letter-spacing:.12em;
  color:#7b8aa5;
}
.guide-intro-item strong {
  display:block;
  margin-bottom:8px;
  font-size:16px;
  line-height:1.45;
  letter-spacing:-.04em;
  color:#111;
}
.guide-intro-item p {
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:#6a7484;
}
.guide-intro-visual,
.guide-intro-visual-frame {
  display: none !important;
}
.moment-section {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .shopping-guide-section { padding-bottom: 28px; }
  .shopping-guide-banner {
    min-height: 310px;
    padding: 38px 30px;
    background: #fff url(../images/guide/guide-intro-visual.png) 68% center / cover no-repeat !important;
  }
  .shopping-guide-copy { max-width: 450px; }
  .guide-intro-section { padding: 0 0 58px !important; }
  .guide-intro-shell { grid-template-columns:1fr; gap:20px; padding: 28px 24px 30px !important; }
  .guide-intro-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .shopping-guide-section { padding-bottom: 22px; }
  .shopping-guide-banner {
    min-height: 290px;
    padding: 30px 22px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 54%, rgba(255,255,255,.20) 100%),
      url(../images/guide/guide-intro-visual.png) 74% center / cover no-repeat !important;
  }
  .shopping-guide-copy { max-width: 72%; }
  .shopping-guide-copy h2 { font-size: 27px; line-height: 1.28; }
  .shopping-guide-copy p { font-size: 12px; line-height: 1.65; }
  .guide-intro-section { padding: 0 0 48px !important; }
  .guide-intro-shell { gap:16px; padding: 22px 18px 24px !important; border-radius: 18px; }
  .guide-intro-copy h2 { font-size: 24px; }
  .guide-intro-tags { gap:8px; margin-top:18px; }
  .guide-intro-tags a { min-height:36px; padding:0 12px; font-size:11px; }
  .guide-intro-menu { grid-template-columns:1fr; gap:10px; }
  .guide-intro-item { min-height:auto; padding:16px 16px 15px; border-radius:14px; }
  .guide-intro-item strong { font-size:14px; }
  .guide-intro-item p { font-size:11px; line-height:1.65; }
}


/* PRODUCT DETAIL PAGES */
.product-detail-page { background:#fff; }
.product-breadcrumb { width:min(calc(100% - 40px),1180px); margin:0 auto; padding:24px 0 14px; display:flex; align-items:center; gap:8px; font-size:10px; color:#9aa1aa; }
.product-breadcrumb a { color:#7c8794; }
.product-breadcrumb b { color:#333; font-weight:700; }
.product-detail-hero { width:min(calc(100% - 40px),1180px); margin:0 auto; min-height:520px; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr); border:1px solid #e7ebf1; background:#fbfcfe; overflow:hidden; }
.product-detail-copy { padding:66px 58px; align-self:center; }
.product-detail-copy > small { display:block; margin-bottom:14px; color:#2a5bd7; font-size:11px; font-weight:800; letter-spacing:.15em; }
.product-detail-copy h1 { margin:0; max-width:650px; font-size:38px; line-height:1.24; letter-spacing:-.055em; color:#111; }
.product-detail-copy p { margin:22px 0 0; max-width:660px; font-size:14px; line-height:1.85; color:#626d7b; }
.product-detail-actions { display:flex; gap:9px; margin-top:28px; }
.product-detail-actions a { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid #d8e0eb; color:#173c68; background:#fff; font-size:11px; font-weight:800; }
.product-detail-actions a:first-child { background:#173c68; border-color:#173c68; color:#fff; }
.product-detail-image { min-height:520px; background:#f3f5f7; overflow:hidden; }
.product-detail-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.product-detail-body { width:min(calc(100% - 40px),1180px); margin:52px auto 76px; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:54px; align-items:start; }
.product-article { min-width:0; }
.product-summary-card { padding:30px 32px; border:1px solid #e5eaf0; background:#f8fbff; }
.product-summary-card small,.product-faq > small { display:block; margin-bottom:8px; font-size:10px; letter-spacing:.16em; font-weight:800; color:#2a5bd7; }
.product-summary-card h2,.product-faq h2 { margin:0 0 18px; font-size:25px; letter-spacing:-.045em; }
.product-summary-card ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.product-summary-card li { position:relative; padding:11px 12px 11px 31px; background:#fff; border:1px solid #e8edf3; font-size:12px; line-height:1.55; color:#3f4955; }
.product-summary-card li::before { content:'✓'; position:absolute; left:12px; top:10px; color:#2a5bd7; font-weight:900; }
.product-article-block { padding:36px 4px; border-bottom:1px solid #eceff2; }
.product-article-block h2 { margin:0 0 14px; font-size:23px; line-height:1.35; letter-spacing:-.045em; }
.product-article-block p { margin:0; font-size:14px; line-height:1.95; color:#626b76; }
.product-caution { margin-top:34px; padding:23px 24px; border-left:3px solid #173c68; background:#f7f8fa; }
.product-caution strong { display:block; margin-bottom:8px; font-size:13px; }
.product-caution p { margin:0; font-size:12px; line-height:1.8; color:#666f79; }
.product-faq { margin-top:48px; padding-top:4px; }
.product-faq-item { border-top:1px solid #e5e8ec; }
.product-faq-item:last-child { border-bottom:1px solid #e5e8ec; }
.product-faq-item summary { position:relative; min-height:66px; padding:21px 42px 18px 0; list-style:none; cursor:pointer; font-size:14px; font-weight:800; line-height:1.5; }
.product-faq-item summary::-webkit-details-marker { display:none; }
.product-faq-item summary i { position:absolute; right:8px; top:50%; width:18px; height:18px; transform:translateY(-50%); }
.product-faq-item summary i::before,.product-faq-item summary i::after { content:''; position:absolute; left:50%; top:50%; width:12px; height:1px; background:#555; transform:translate(-50%,-50%); }
.product-faq-item summary i::after { transform:translate(-50%,-50%) rotate(90deg); transition:.2s; }
.product-faq-item[open] summary i::after { transform:translate(-50%,-50%) rotate(0deg); }
.product-faq-item p { margin:0; padding:0 42px 20px 0; font-size:13px; line-height:1.8; color:#69727d; }
.product-side-nav { position:sticky; top:100px; border-top:2px solid #173c68; }
.product-side-nav strong { display:block; padding:17px 2px 13px; font-size:13px; }
.product-side-nav a { display:block; padding:13px 3px; border-top:1px solid #eceff2; font-size:11px; color:#69727d; }
.product-side-nav a::after { content:'→'; float:right; color:#a1a8b0; }
@media (max-width:980px){
  .product-detail-hero { grid-template-columns:1fr 44%; min-height:450px; }
  .product-detail-copy { padding:48px 34px; }
  .product-detail-copy h1 { font-size:31px; }
  .product-detail-image { min-height:450px; }
  .product-detail-body { grid-template-columns:1fr; gap:30px; }
  .product-side-nav { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #e5e8ec; }
  .product-side-nav strong { grid-column:1/-1; }
}
@media (max-width:720px){
  .product-breadcrumb { width:min(calc(100% - 24px),1180px); padding-top:16px; }
  .product-detail-hero { width:min(calc(100% - 24px),1180px); grid-template-columns:1fr; }
  .product-detail-copy { padding:34px 22px 28px; order:2; }
  .product-detail-copy h1 { font-size:27px; }
  .product-detail-copy p { font-size:12px; line-height:1.72; }
  .product-detail-image { min-height:330px; order:1; }
  .product-detail-actions { flex-wrap:wrap; }
  .product-detail-body { width:min(calc(100% - 24px),1180px); margin:34px auto 56px; }
  .product-summary-card { padding:24px 18px; }
  .product-summary-card h2,.product-faq h2 { font-size:21px; }
  .product-summary-card ul { grid-template-columns:1fr; }
  .product-article-block { padding:28px 2px; }
  .product-article-block h2 { font-size:20px; }
  .product-article-block p { font-size:13px; line-height:1.82; }
  .product-side-nav { grid-template-columns:1fr; }
}


/* =========================================================
   PRODUCT DETAIL EDITORIAL BODY — refined v2
   ========================================================= */
.editorial-body { grid-template-columns:minmax(0,1fr) 238px; gap:44px; margin-top:44px; }
.product-editorial { min-width:0; }
.product-body-intro { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(310px,.92fr); gap:28px; padding:34px; border:1px solid #e7ebf1; border-radius:22px; background:linear-gradient(135deg,#fff 0%,#fbfcfe 65%,#f5f8fc 100%); box-shadow:0 16px 38px rgba(26,49,82,.055); }
.product-body-intro-copy > small { display:block; margin-bottom:11px; font-size:10px; font-weight:800; letter-spacing:.17em; color:#2a5bd7; }
.product-body-intro-copy h2 { margin:0; max-width:650px; font-size:29px; line-height:1.35; letter-spacing:-.05em; color:#111; }
.product-body-intro-copy > p { margin:16px 0 0; max-width:680px; font-size:14px; line-height:1.9; color:#616b78; }
.detail-keyword-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.detail-keyword-nav a { display:inline-flex; align-items:center; min-height:36px; padding:0 13px; border:1px solid #dbe3ee; border-radius:999px; background:#fff; font-size:11px; font-weight:700; color:#173c68; transition:.2s; }
.detail-keyword-nav a:hover { border-color:#9fb4d1; background:#f5f8fc; transform:translateY(-1px); }
.product-body-visual { min-width:0; }
.product-body-image { height:250px; border:1px solid #edf0f4; border-radius:18px; overflow:hidden; background:#f4f6f8; }
.product-body-image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.product-fact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.detail-fact { min-height:69px; padding:12px 13px; border:1px solid #e8edf3; border-radius:13px; background:#fff; }
.detail-fact span { display:block; margin-bottom:5px; font-size:9px; letter-spacing:.08em; color:#9aa4b2; }
.detail-fact strong { display:block; font-size:12px; line-height:1.45; color:#283442; }
.keyword-article-stack { margin-top:26px; border-top:1px solid #dfe4ea; }
.keyword-section { scroll-margin-top:105px; display:grid; grid-template-columns:245px minmax(0,1fr); gap:36px; padding:42px 6px; border-bottom:1px solid #e5e9ee; }
.keyword-section-head { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; }
.keyword-section-head > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#173c68; color:#fff; font-size:10px; font-weight:800; }
.keyword-section-head small { display:block; margin:2px 0 6px; color:#8c99aa; font-size:9px; letter-spacing:.14em; font-weight:800; }
.keyword-section-head h2 { margin:0 0 7px; font-size:20px; line-height:1.3; letter-spacing:-.045em; color:#173c68; }
.keyword-section-head h3 { margin:0; font-size:14px; line-height:1.5; letter-spacing:-.035em; color:#222; font-weight:700; }
.keyword-section-copy p { margin:0; font-size:14px; line-height:1.98; color:#616a75; }
.keyword-section-copy p + p { margin-top:14px; }
.keyword-note { display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:15px 16px; border-left:3px solid #2a5bd7; border-radius:0 12px 12px 0; background:#f6f9fe; }
.keyword-note b { flex:0 0 auto; padding-top:1px; font-size:9px; letter-spacing:.1em; color:#2a5bd7; }
.keyword-note span { font-size:12px; line-height:1.65; color:#43526a; font-weight:700; }
.refined-caution { margin-top:34px; padding:22px 24px; display:grid; grid-template-columns:34px 1fr; gap:14px; border:1px solid #eee5d8; border-radius:16px; background:#fffaf4; }
.caution-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#9d6c2f; color:#fff; font-weight:900; }
.refined-caution strong { display:block; margin:2px 0 7px; font-size:14px; color:#493318; }
.refined-caution p { margin:0; font-size:12px; line-height:1.8; color:#746550; }
.refined-faq { margin-top:50px; padding:30px 30px 10px; border:1px solid #e5e9ee; border-radius:20px; background:#fff; box-shadow:0 14px 30px rgba(26,49,82,.04); }
.refined-faq > small { color:#2a5bd7; }
.refined-faq h2 { font-size:24px; }
.refined-faq .product-faq-item summary { padding-left:2px; }
.editorial-side { top:90px; border:1px solid #e5e9ee; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(26,49,82,.045); }
.editorial-side .side-nav-head { padding:17px 16px 14px; background:#f7f9fc; }
.editorial-side .side-nav-head small,.editorial-side .side-nav-guide > small { display:block; margin-bottom:6px; font-size:9px; letter-spacing:.13em; color:#8896a8; }
.editorial-side .side-nav-head strong { padding:0; font-size:13px; line-height:1.45; }
.editorial-side > a { padding:12px 16px; font-size:11px; color:#536172; }
.editorial-side > a:hover { color:#173c68; background:#fbfcfe; }
.editorial-side .side-nav-guide { margin-top:8px; padding:14px 16px 16px; border-top:1px solid #e8edf2; background:#fbfcfd; }
.editorial-side .side-nav-guide a { display:block; padding:9px 0; border-top:1px solid #edf0f3; font-size:10px; color:#6a7480; }
.editorial-side .side-nav-guide a:first-of-type { border-top:0; }
.editorial-side .side-nav-guide a::after { content:'↗'; float:right; color:#a3acb6; }

@media (max-width:980px) {
  .editorial-body { grid-template-columns:1fr; gap:28px; }
  .product-body-intro { grid-template-columns:1fr; }
  .product-body-image { height:320px; }
  .keyword-section { grid-template-columns:210px minmax(0,1fr); gap:26px; }
  .editorial-side { position:static; display:none; }
}
@media (max-width:720px) {
  .editorial-body { margin-top:28px; }
  .product-body-intro { padding:22px 18px; border-radius:18px; gap:20px; }
  .product-body-intro-copy h2 { font-size:23px; }
  .product-body-intro-copy > p { font-size:12px; line-height:1.78; }
  .detail-keyword-nav { gap:6px; margin-top:17px; }
  .detail-keyword-nav a { min-height:33px; padding:0 10px; font-size:10px; }
  .product-body-image { height:260px; border-radius:14px; }
  .product-fact-grid { grid-template-columns:1fr 1fr; }
  .detail-fact { min-height:64px; padding:10px; }
  .keyword-section { grid-template-columns:1fr; gap:16px; padding:30px 2px; }
  .keyword-section-head { grid-template-columns:30px 1fr; gap:9px; }
  .keyword-section-head h2 { font-size:19px; }
  .keyword-section-head h3 { font-size:13px; }
  .keyword-section-copy p { font-size:13px; line-height:1.84; }
  .keyword-note { margin-top:15px; padding:13px 14px; }
  .keyword-note span { font-size:11px; }
  .refined-caution { padding:18px 16px; grid-template-columns:28px 1fr; }
  .caution-icon { width:26px; height:26px; }
  .refined-faq { margin-top:38px; padding:24px 18px 8px; border-radius:16px; }
  .refined-faq h2 { font-size:21px; }
}


/* ===== PRODUCT DETAIL HERO REFINEMENT V2 ===== */
.product-detail-page { background:#f6f8fb; }
.product-breadcrumb { width:min(calc(100% - 40px),1180px); margin:0 auto; padding:26px 0 14px; }
.product-detail-hero.product-detail-hero-intro {
  width:min(calc(100% - 40px),1180px);
  margin:0 auto;
  min-height:auto;
  display:block;
  border:0;
  background:transparent;
  overflow:visible;
}
.product-detail-hero.product-detail-hero-intro .product-body-intro {
  padding:34px;
  border:1px solid #e4e9f1;
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff 0%,#fbfcfe 68%,#f4f7fb 100%);
  box-shadow:0 18px 42px rgba(21,43,79,.06);
}
.product-detail-hero.product-detail-hero-intro .product-body-intro-copy > small {
  margin-bottom:12px;
  font-size:11px;
}
.product-detail-hero.product-detail-hero-intro .product-main-headline {
  margin:0;
  max-width:680px;
  font-size:32px;
  line-height:1.34;
  letter-spacing:-.055em;
  color:#111;
}
.product-detail-hero.product-detail-hero-intro .product-body-intro-copy > p {
  margin:18px 0 0;
  max-width:700px;
  font-size:14px;
  line-height:1.9;
  color:#5f6877;
}
.product-detail-hero.product-detail-hero-intro .detail-keyword-nav {
  margin-top:24px;
}
.product-detail-hero.product-detail-hero-intro .product-body-image {
  height:286px;
  border-radius:20px;
}
.product-detail-hero.product-detail-hero-intro .product-fact-grid {
  gap:10px;
  margin-top:12px;
}
.product-detail-hero.product-detail-hero-intro .detail-fact {
  min-height:72px;
  padding:13px 14px;
  border-radius:14px;
}
.product-detail-body { margin:34px auto 76px; }
.keyword-article-stack { margin-top:0; border-top:1px solid #dfe4ea; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 12px 28px rgba(17,46,83,.035); }
.keyword-section { padding-left:28px; padding-right:28px; }
.product-caution.refined-caution,
.product-faq.refined-faq,
.product-side-nav.editorial-side { background:#fff; }

@media (max-width: 980px) {
  .product-detail-hero.product-detail-hero-intro .product-body-intro { padding:28px; }
  .product-detail-hero.product-detail-hero-intro .product-main-headline { font-size:28px; }
  .product-detail-body { margin:28px auto 66px; }
  .keyword-section { padding-left:20px; padding-right:20px; }
}

@media (max-width: 720px) {
  .product-breadcrumb { width:min(calc(100% - 24px),1180px); padding:18px 0 10px; }
  .product-detail-hero.product-detail-hero-intro { width:min(calc(100% - 24px),1180px); }
  .product-detail-hero.product-detail-hero-intro .product-body-intro { padding:22px 18px; border-radius:20px; }
  .product-detail-hero.product-detail-hero-intro .product-main-headline { font-size:23px; line-height:1.38; }
  .product-detail-hero.product-detail-hero-intro .product-body-image { height:260px; border-radius:16px; }
  .product-detail-body { width:min(calc(100% - 24px),1180px); margin:24px auto 56px; }
  .keyword-article-stack { border-radius:16px; }
  .keyword-section { padding-left:16px; padding-right:16px; }
}


/* ===== PRODUCT DETAIL HERO LAYOUT TUNE V3 ===== */
.product-detail-hero.product-detail-hero-intro .product-body-intro {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 500px);
  grid-template-areas:
    "copy image"
    "facts image";
  gap: 22px 28px;
  align-items: start;
}
.product-detail-hero.product-detail-hero-intro .product-body-intro-copy {
  grid-area: copy;
  min-width: 0;
  padding-right: 6px;
}
.product-detail-hero.product-detail-hero-intro .product-body-visual {
  display: contents;
}
.product-detail-hero.product-detail-hero-intro .product-body-image {
  grid-area: image;
  height: 100%;
  min-height: 448px;
  border: 1px solid #e9edf3;
  border-radius: 22px;
  background: #f4f6f8;
  box-shadow: 0 16px 34px rgba(17, 46, 83, .06);
}
.product-detail-hero.product-detail-hero-intro .product-body-image img {
  object-fit: cover;
  object-position: center;
}
.product-detail-hero.product-detail-hero-intro .product-fact-grid {
  grid-area: facts;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}
.product-detail-hero.product-detail-hero-intro .detail-fact {
  min-height: 86px;
  padding: 15px 16px;
  border: 1px solid #e7ecf3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 46, 83, .03);
}
.product-detail-hero.product-detail-hero-intro .detail-fact span {
  margin-bottom: 7px;
  font-size: 10px;
  letter-spacing: .08em;
}
.product-detail-hero.product-detail-hero-intro .detail-fact strong {
  font-size: 14px;
  line-height: 1.45;
  color: #172332;
}
.product-detail-hero.product-detail-hero-intro .product-main-headline {
  max-width: 640px;
  font-size: 33px;
  line-height: 1.32;
}
.product-detail-hero.product-detail-hero-intro .product-body-intro-copy > p {
  max-width: 640px;
}
.product-detail-hero.product-detail-hero-intro .detail-keyword-nav {
  gap: 10px;
}
.product-detail-hero.product-detail-hero-intro .detail-keyword-nav a {
  min-height: 38px;
  padding: 0 14px;
  border-color: #d6dfeb;
  background: #fff;
}

@media (max-width: 980px) {
  .product-detail-hero.product-detail-hero-intro .product-body-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "image"
      "facts";
    gap: 20px;
  }
  .product-detail-hero.product-detail-hero-intro .product-body-image {
    min-height: 340px;
  }
}

@media (max-width: 720px) {
  .product-detail-hero.product-detail-hero-intro .product-body-intro {
    gap: 16px;
  }
  .product-detail-hero.product-detail-hero-intro .product-main-headline {
    font-size: 22px;
    line-height: 1.36;
  }
  .product-detail-hero.product-detail-hero-intro .product-body-image {
    min-height: 250px;
    border-radius: 18px;
  }
  .product-detail-hero.product-detail-hero-intro .product-fact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-detail-hero.product-detail-hero-intro .detail-fact {
    min-height: 72px;
    padding: 12px 12px;
    border-radius: 14px;
  }
  .product-detail-hero.product-detail-hero-intro .detail-fact strong {
    font-size: 12px;
  }
}


/* =========================================================
   JAPAN RED / WHITE PREMIUM SYSTEM V4
   ========================================================= */
body { background:#f8f9fb; }
.site-header { background:rgba(255,255,255,.97); border-bottom:1px solid #eceef2; box-shadow:0 4px 18px rgba(18,32,52,.035); }
.site-header::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--jp-red); }
.header-inner { min-height:78px; }
.brand { gap:12px; }
.brand-mark { width:38px; height:38px; background:var(--jp-red); box-shadow:0 8px 18px rgba(217,58,58,.18); font-family:Georgia,serif; font-weight:800; }
.brand-copy strong { font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:23px; letter-spacing:-.055em; color:#101217; }
.brand-copy small { color:#9aa0aa; font-size:8px; letter-spacing:.16em; }
.main-nav { gap:30px; }
.main-nav a { color:#272b33; }
.main-nav a::after { background:var(--jp-red); height:3px; border-radius:3px; }
.main-nav a:hover, .main-nav a.is-current { color:var(--jp-red-dark); }
.main-nav a:hover::after, .main-nav a.is-current::after { width:22px; }
.header-pill { border:1px solid #efdadc; background:#fff7f7; color:#8f2e34; font-size:10px; letter-spacing:.08em; }
.header-pill i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--jp-red); }

/* Home red accents */
.home-page .home-header .brand-mark { display:grid; }
.home-page .home-header .header-inner { grid-template-columns:220px 1fr; }
.home-page .home-header .brand-copy strong { font-size:25px; }
.home-page .shop-section-title h2::before { content:""; display:inline-block; width:5px; height:18px; margin-right:10px; border-radius:4px; background:var(--jp-red); vertical-align:-2px; }
.home-page .visual-pager .is-active, .home-page .visual-pager button.active { background:var(--jp-red) !important; }
.home-page .shopping-guide-copy small,
.home-page .guide-intro-copy small,
.home-page .home-faq-eyebrow { color:var(--jp-red) !important; }
.home-page .shopping-guide-copy span { background:var(--jp-red) !important; }
.home-page .shopping-guide-copy span:hover { background:var(--jp-red-dark) !important; }
.home-page .moment-section .quote { color:var(--jp-red); }
.home-page .moment-card:hover { border-color:#efc9cc; box-shadow:0 20px 36px rgba(140,35,43,.09); }
.home-page .moment-arrow:hover { color:var(--jp-red); }
.home-page .guide-intro-tags a:hover { border-color:#e5aeb2; color:var(--jp-red-dark); background:#fff7f7; }
.home-page .home-faq-item[open] { box-shadow:inset 3px 0 0 var(--jp-red); }
.home-page .home-faq-more { color:var(--jp-red-dark); }

/* Subpage premium hero */
.sub-page { background:#fff; }
.premium-sub-hero { position:relative; padding:58px 0 48px; background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%); overflow:hidden; }
.premium-sub-hero::after { display:none; }
.sub-hero-shell {
  position:relative;
  z-index:1;
  min-height:380px;
  display:flex;
  align-items:center;
  padding:56px 60px;
  border:1px solid #e9edf2;
  border-radius:36px;
  overflow:hidden;
  background-color:#f8fafc;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  box-shadow:0 24px 52px rgba(20,32,54,.08);
  isolation:isolate;
}
.sub-hero-shell::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.92) 28%, rgba(255,255,255,.80) 46%, rgba(255,255,255,.38) 68%, rgba(255,255,255,.12) 100%);
  z-index:0;
}
.sub-hero-shell::after {
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
  z-index:0;
}
.sub-hero-copy { position:relative; z-index:2; max-width:620px; }
.sub-hero-copy > small { display:block; margin-bottom:13px; color:var(--jp-red); font-size:11px; font-weight:900; letter-spacing:.17em; }
.sub-hero-copy h1 { margin:0; font-size:clamp(38px,4.3vw,58px); line-height:1.12; letter-spacing:-.065em; color:#111318; }
.sub-hero-copy p { margin:20px 0 0; max-width:640px; color:#525a66; font-size:14px; line-height:1.85; }
.sub-hero-tags { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.sub-hero-tags a { min-height:40px; display:inline-flex; align-items:center; padding:0 14px; border:1px solid rgba(216,224,233,.92); border-radius:999px; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); color:#374050; font-size:11px; font-weight:800; box-shadow:0 8px 18px rgba(40,56,76,.06); }
.sub-hero-tags a:first-child { border-color:var(--jp-red); background:var(--jp-red); color:#fff; }
.sub-hero-tags a:hover { border-color:#e4adb1; color:var(--jp-red-dark); background:#fff7f7; }
.sub-hero-tags a:first-child:hover { color:#fff; background:var(--jp-red-dark); }
.sub-hero-art { display:none !important; }
.sub-popular .sub-hero-shell { background-image:url('../images/subhero-bg/popular-bg.png'); }
.sub-shopping .sub-hero-shell { background-image:url('../images/subhero-bg/shopping-bg.png'); }
.sub-delivery .sub-hero-shell { background-image:url('../images/subhero-bg/delivery-bg.png'); }
.sub-direct .sub-hero-shell { background-image:url('../images/subhero-bg/direct-bg.png'); }
.sub-faq .sub-hero-shell { background-image:url('../images/subhero-bg/faq-bg.png'); }

/* Legacy art classes retained for compatibility */
.sub-hero-art.hero-photo { min-height:332px; background-color:#f7f9fc; background-repeat:no-repeat; background-position:center center; background-size:cover; }
.sub-hero-art.hero-photo::before { display:none; }
.sub-hero-art.hero-photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 100%); pointer-events:none; }
.hero-photo-popular { background-image:url('../images/subhero/hero-popular.png'); }
.hero-photo-shopping { background-image:url('../images/subhero/hero-shopping.png'); }
.hero-photo-delivery { background-image:url('../images/subhero/hero-delivery.png'); }
.hero-photo-direct { background-image:url('../images/subhero/hero-direct.png'); }
.hero-photo-faq { background-image:url('../images/subhero/hero-faq.png'); }

/* Premium content system */
.premium-content-section { padding:64px 0; background:#fff; }
.premium-content-section.soft-section { background:#fff4ef; border-top:1px solid #efdcd5; border-bottom:1px solid #efdcd5; }
.premium-section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.premium-section-head small,.guide-copy-block > small,.target-shop-shell small { display:block; margin-bottom:8px; color:var(--jp-red); font-size:10px; font-weight:900; letter-spacing:.16em; }
.premium-section-head h2,.guide-copy-block h2,.target-shop-shell h2 { margin:0; font-size:30px; line-height:1.3; letter-spacing:-.05em; color:#15171c; }
.premium-section-head p,.guide-copy-block p,.target-shop-shell p { margin:10px 0 0; color:#6b717c; font-size:13px; line-height:1.8; }
.sub-product-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.sub-product-card { overflow:hidden; border:1px solid #e8ebef; border-radius:18px; background:#fff; transition:.25s; }
.sub-product-card:hover { transform:translateY(-4px); border-color:#efc6c8; box-shadow:0 18px 36px rgba(136,35,42,.08); }
.sub-product-card img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.sub-product-card div { padding:16px; }
.sub-product-card small { color:#9aa0a8; font-size:9px; letter-spacing:.08em; }
.sub-product-card strong { display:block; margin:7px 0 12px; font-size:15px; line-height:1.45; }
.sub-product-card span { color:var(--jp-red-dark); font-size:10px; font-weight:800; }
.two-column-guide { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr); gap:54px; align-items:start; }
.guide-copy-block p + p { margin-top:13px; }
.check-card-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check-card-list > div { min-height:130px; padding:18px; border:1px solid #e5e9ee; border-radius:16px; background:#fff; }
.check-card-list span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff2f2; color:var(--jp-red-dark); font-size:10px; font-weight:900; }
.check-card-list b { display:block; margin:14px 0 6px; font-size:15px; }
.check-card-list p { margin:0; color:#7a8089; font-size:11px; line-height:1.6; }
.category-guide-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.category-guide-card { min-height:220px; padding:22px; border:1px solid #e6e9ee; border-radius:18px; background:#fff; transition:.25s; }
.category-guide-card:nth-child(even){background:#fbfcfe}.category-guide-card:hover{transform:translateY(-3px);border-color:#efc8ca}
.category-guide-card em { color:var(--jp-red); font-style:normal; font-size:11px; font-weight:900; }
.category-guide-card strong { display:block; margin:24px 0 10px; font-size:18px; }
.category-guide-card p { margin:0; color:#717781; font-size:12px; line-height:1.75; }
.category-guide-card span { display:block; margin-top:20px; color:#9b5458; font-size:10px; font-weight:800; }
.mini-matrix { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-matrix div { padding:22px; border:1px solid #e6e9ee; border-radius:16px; background:#fff; }
.mini-matrix b { display:block; color:#23262d; font-size:16px; }.mini-matrix span { display:block; margin-top:8px; color:#9b5458; font-size:11px; }
.step-flow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.step-flow-card { min-height:220px; padding:22px; border:1px solid #e6e9ee; border-radius:18px; background:#fff; position:relative; overflow:hidden; }
.step-flow-card::after { content:""; position:absolute; width:78px; height:78px; right:-20px; top:-20px; border-radius:50%; background:#fff3f3; }
.step-flow-card > span { color:var(--jp-red); font-size:12px; font-weight:900; }.step-flow-card small{display:block;margin-top:35px;color:#9da3ab;font-size:9px;letter-spacing:.13em}.step-flow-card strong{display:block;margin:9px 0;font-size:17px}.step-flow-card p{margin:0;color:#747a84;font-size:12px;line-height:1.7}
.price-formula { padding:28px; border:1px solid #e4e8ee; border-radius:20px; background:#fff; text-align:center; box-shadow:0 14px 30px rgba(23,60,104,.04); }.price-formula small{display:block;color:var(--jp-red);font-size:10px;letter-spacing:.16em;font-weight:900}.price-formula strong{display:block;margin:14px 0;font-size:19px}.price-formula i{font-style:normal;color:#bbb;font-size:17px}.price-formula b{display:block;margin-top:18px;padding:13px;border-radius:12px;background:var(--jp-navy);color:#fff;font-size:12px;letter-spacing:.08em}
.delivery-timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid #e5e9ee; border-radius:20px; overflow:hidden; }
.timeline-step { min-height:220px; padding:24px; background:#fff; border-right:1px solid #e8ebef; }.timeline-step:last-child{border-right:0}.timeline-step > span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff2f2;color:var(--jp-red-dark);font-size:10px;font-weight:900}.timeline-step small{display:block;margin-top:28px;color:#9ba1aa;font-size:9px;letter-spacing:.13em}.timeline-step strong{display:block;margin:8px 0;font-size:17px}.timeline-step p{margin:0;color:#747a84;font-size:12px;line-height:1.7}
.standard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.standard-card { min-height:165px; padding:22px; border:1px solid #e6e9ee; border-radius:18px; background:#fff; }.standard-card span{color:var(--jp-red);font-size:10px;font-weight:900}.standard-card strong{display:block;margin:22px 0 8px;font-size:17px}.standard-card p{margin:0;color:#747a84;font-size:12px;line-height:1.65}
.target-shop-shell { display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; padding:34px 36px; border:1px solid #e5e9ee; border-radius:20px; background:#fff; }
.target-shop-btn { min-width:220px; min-height:54px; display:flex; align-items:center; justify-content:center; gap:28px; padding:0 18px; border-radius:12px; background:var(--jp-red); color:#fff; font-size:12px; font-weight:900; }.target-shop-btn:hover{background:var(--jp-red-dark)}
.faq-topic-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }.faq-topic-strip span{padding:9px 13px;border:1px solid #edd6d8;border-radius:999px;background:#fff7f7;color:#9b343a;font-size:10px;font-weight:800}
.premium-faq-list { gap:0; border-top:1px solid #e2e5e9; }.premium-faq-list details{border:0;border-bottom:1px solid #e7e9ed;border-radius:0}.premium-faq-list summary{padding:22px 8px}.premium-faq-list summary span{background:#fff0f0;color:var(--jp-red-dark)}.premium-faq-list details[open]{background:#fffafa}.premium-faq-list p{padding:0 20px 24px 61px}

/* Product pages: red primary accents */
.product-detail-page { background:#f8f9fb; }
.product-detail-hero.product-detail-hero-intro .product-body-intro-copy > small,
.product-detail-hero.product-detail-hero-intro .detail-keyword-nav a:hover,
.keyword-section-head h2,
.keyword-note b,
.product-faq.refined-faq > small,
.product-side-nav .side-nav-head small { color:var(--jp-red-dark) !important; }
.product-detail-hero.product-detail-hero-intro .detail-keyword-nav a:hover { border-color:#e7b3b6; background:#fff6f6; }
.keyword-section-head > span { background:var(--jp-red); }
.keyword-note { border-left-color:var(--jp-red); background:#fff7f7; }
.product-side-nav.editorial-side a:hover { color:var(--jp-red-dark); }
.product-caution.refined-caution .caution-icon { background:var(--jp-red) !important; }
.product-faq-item[open] { border-color:#efc7c9; }

/* footer / quick guide polish */
.footer-guide-bar { border-top:1px solid #eceef1; background:#fff; }
.footer-guide-label { color:var(--jp-red-dark) !important; }
.footer-guide-links a:hover { color:var(--jp-red-dark); }
.site-footer { background:#101820; }

@media (max-width: 1100px) {
  .sub-product-grid,.category-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .step-flow-grid,.delivery-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .timeline-step:nth-child(2){border-right:0}.timeline-step:nth-child(-n+2){border-bottom:1px solid #e8ebef}
}
@media (max-width: 980px) {
  .header-inner { grid-template-columns:auto 1fr auto; }
  .sub-hero-shell { min-height:330px; padding:42px 34px; }
  .sub-hero-shell::before { background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 35%, rgba(255,255,255,.72) 100%); }
  .two-column-guide { grid-template-columns:1fr; gap:28px; }
  .standard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .site-header::before { height:2px; }
  .brand-mark { width:32px; height:32px; font-size:11px; }
  .brand-copy strong { font-size:19px; }
  .premium-sub-hero { padding:36px 0 30px; }
  .sub-hero-shell { min-height:300px; padding:34px 22px; border-radius:24px; background-position:72% center; }
  .sub-hero-shell::before { inset:0; background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.82) 100%); }
  .sub-hero-shell::after { inset:10px; border-radius:18px; }
  .sub-hero-copy h1 { font-size:34px; }
  .sub-hero-copy p { font-size:12px; line-height:1.72; }
  .premium-content-section { padding:44px 0; }
  .premium-section-head h2,.guide-copy-block h2,.target-shop-shell h2 { font-size:24px; }
  .sub-product-grid,.category-guide-grid,.step-flow-grid,.standard-grid { grid-template-columns:1fr; }
  .sub-product-card { display:grid; grid-template-columns:120px 1fr; }.sub-product-card img{height:100%;aspect-ratio:auto}.sub-product-card div{padding:14px}
  .check-card-list,.mini-matrix { grid-template-columns:1fr; }
  .delivery-timeline { grid-template-columns:1fr; }.timeline-step{border-right:0;border-bottom:1px solid #e8ebef}.timeline-step:last-child{border-bottom:0}
  .target-shop-shell { grid-template-columns:1fr; padding:24px 20px; }.target-shop-btn{min-width:0;width:100%}
  .art-card-a{left:22px;top:35px}.art-card-b{left:145px;top:113px}.art-card-c{left:48px;bottom:20px}
  .shopping-phone{left:35px;top:20px;transform:scale(.83);transform-origin:top left}.shopping-ticket{right:22px;top:55px}.shopping-box{right:26px;bottom:25px}
  .shield-art{left:30px;top:56px;transform:scale(.8);transform-origin:top left}.direct-panel{right:24px;top:50px;width:180px}
  .faq-q{left:34px;top:58px;transform:scale(.78);transform-origin:top left}.faq-mini{right:28px;top:40px;width:145px}.faq-mini.second{right:48px;top:146px}
}


/* =========================================================
   GLOBAL HEADER POSITION UNIFICATION V6
   - index / subpages / product detail pages use one geometry
   ========================================================= */
.site-header .header-inner,
.home-header .header-inner {
  width: min(calc(100% - 56px), 1440px) !important;
  min-height: 82px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) 170px !important;
  align-items: center !important;
  column-gap: 30px !important;
}
.site-header .brand,
.home-header .brand {
  justify-self: start !important;
}
.site-header .main-nav,
.home-header .main-nav {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 0 !important;
}
.site-header .main-nav a,
.home-header .main-nav a {
  width: 100%;
  text-align: center;
  padding: 31px 8px 29px !important;
  white-space: nowrap;
}
.site-header .header-side,
.home-header .header-side {
  display: flex;
  justify-self: end !important;
  align-items: center;
}
.site-header .menu-toggle,
.home-header .menu-toggle {
  justify-self: end !important;
}

/* Undo the older home-only two-column header. */
.home-page .home-header .header-inner {
  grid-template-columns: 220px minmax(0, 1fr) 170px !important;
}
.home-page .home-header .main-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

@media (max-width: 980px) {
  .site-header .header-inner,
  .home-header .header-inner,
  .home-page .home-header .header-inner {
    width: min(calc(100% - 36px), 1440px) !important;
    min-height: 74px !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 16px !important;
  }
  .site-header .main-nav,
  .home-header .main-nav,
  .home-page .home-header .main-nav {
    position: fixed !important;
    left: 18px !important;
    right: 18px !important;
    top: 80px !important;
    width: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: var(--shadow) !important;
  }
  .site-header .main-nav.is-open,
  .home-header .main-nav.is-open,
  .home-page .home-header .main-nav.is-open {
    display: grid !important;
  }
  .site-header .main-nav a,
  .home-header .main-nav a {
    padding: 13px 10px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--line);
  }
  .site-header .main-nav a:last-child,
  .home-header .main-nav a:last-child {
    border-bottom: 0;
  }
  .site-header .header-side,
  .home-header .header-side {
    display: none !important;
  }
  .site-header .menu-toggle,
  .home-header .menu-toggle {
    display: block !important;
  }
}

@media (max-width: 720px) {
  .site-header .header-inner,
  .home-header .header-inner,
  .home-page .home-header .header-inner {
    width: calc(100% - 24px) !important;
    min-height: 64px !important;
  }
  .site-header .main-nav,
  .home-header .main-nav,
  .home-page .home-header .main-nav {
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
  }
}


/* =========================================================
   SUBPAGE ARTICLE CONTENT EXPANSION V7
   ========================================================= */
.article-info-section { padding-top:72px; padding-bottom:76px; }
.article-info-head { max-width:900px; margin-bottom:34px; }
.article-info-head > small { display:block; margin-bottom:10px; color:var(--jp-red,#e53935); font-size:10px; font-weight:800; letter-spacing:.16em; }
.article-info-head h2 { margin:0; max-width:900px; font-size:31px; line-height:1.36; letter-spacing:-.045em; color:#111; }
.article-info-head p { margin:15px 0 0; max-width:850px; font-size:14px; line-height:1.9; color:#687281; }
.article-prose-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.article-prose-block { padding:28px 30px; border:1px solid #e6eaf0; border-radius:18px; background:#fff; }
.article-prose-block h3 { margin:0 0 14px; font-size:20px; line-height:1.45; letter-spacing:-.04em; color:#15191f; }
.article-prose-block p { margin:0; font-size:14px; line-height:1.92; color:#626d7a; }
.article-prose-block p + p { margin-top:14px; }
.info-check-table { margin-top:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid #e5e9ef; border-radius:18px; overflow:hidden; background:#fff; }
.info-check-table > div { min-height:92px; padding:22px 24px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #edf0f4; border-bottom:1px solid #edf0f4; }
.info-check-table > div:nth-child(2n) { border-right:0; }
.info-check-table > div:nth-last-child(-n+2) { border-bottom:0; }
.info-check-table b { font-size:15px; color:#171b20; }
.info-check-table span { margin-top:7px; font-size:12px; line-height:1.6; color:#777f8d; }
.article-two-column { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:54px; align-items:start; }
.article-two-column .article-info-head { margin-bottom:0; }
.article-point-list { border-top:1px solid #dfe4ea; }
.article-point-list > div { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; padding:19px 2px; border-bottom:1px solid #e7ebef; }
.article-point-list span { font-size:10px; font-weight:900; color:var(--jp-red,#e53935); padding-top:4px; }
.article-point-list p { margin:0; font-size:13px; line-height:1.75; color:#66717e; }
.article-point-list b { color:#17202b; }
.shopping-example-card { margin-top:24px; padding:28px 30px; border:1px solid #e6eaf0; border-left:4px solid var(--jp-red,#e53935); border-radius:0 18px 18px 0; background:#fff; }
.shopping-example-card > small { color:var(--jp-red,#e53935); font-size:9px; font-weight:900; letter-spacing:.14em; }
.shopping-example-card h3 { margin:8px 0 18px; font-size:20px; }
.shopping-example-row { display:grid; grid-template-columns:110px 1fr 180px; gap:16px; padding:13px 0; border-top:1px solid #eef1f4; align-items:center; }
.shopping-example-row span { font-size:11px; color:#8993a1; }
.shopping-example-row b { font-size:14px; }
.shopping-example-row em { font-size:11px; font-style:normal; color:#bd3939; }
.shopping-example-card > p { margin:16px 0 0; font-size:12px; line-height:1.75; color:#697381; }
.delivery-status-grid,.trust-signal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:26px; }
.delivery-status-grid > div,.trust-signal-grid > div { min-height:142px; padding:22px; border:1px solid #e6eaf0; border-radius:17px; background:#fff; }
.delivery-status-grid small { color:#9aa4b2; font-size:9px; letter-spacing:.12em; }
.delivery-status-grid b { display:block; margin:12px 0 9px; color:#173c68; font-size:14px; }
.delivery-status-grid p,.trust-signal-grid p { margin:0; font-size:12px; line-height:1.7; color:#707987; }
.trust-signal-grid span { display:block; color:var(--jp-red,#e53935); font-size:10px; font-weight:900; }
.trust-signal-grid b { display:block; margin:16px 0 8px; font-size:15px; }

@media (max-width:980px) {
  .article-prose-grid,.article-two-column { grid-template-columns:1fr; }
  .article-two-column { gap:28px; }
  .delivery-status-grid,.trust-signal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .article-info-section { padding-top:48px; padding-bottom:52px; }
  .article-info-head { margin-bottom:24px; }
  .article-info-head h2 { font-size:24px; line-height:1.4; }
  .article-info-head p,.article-prose-block p { font-size:12px; line-height:1.8; }
  .article-prose-block { padding:21px 18px; border-radius:15px; }
  .article-prose-block h3 { font-size:17px; }
  .info-check-table { grid-template-columns:1fr; }
  .info-check-table > div { border-right:0 !important; border-bottom:1px solid #edf0f4 !important; min-height:78px; padding:17px 18px; }
  .info-check-table > div:last-child { border-bottom:0 !important; }
  .article-point-list > div { grid-template-columns:34px 1fr; padding:15px 2px; }
  .shopping-example-card { padding:22px 18px; }
  .shopping-example-row { grid-template-columns:1fr; gap:5px; }
  .delivery-status-grid,.trust-signal-grid { grid-template-columns:1fr; }
  .delivery-status-grid > div,.trust-signal-grid > div { min-height:auto; padding:18px; }
}


/* ===== SHOPPING GUIDE PRODUCT CURATION BANNER ===== */
.home-page .shopping-guide-banner.shopping-guide-banner-products {
  min-height:330px !important;
  padding:0 !important;
  background:#fff url(../images/guide/guide-products-banner.jpg) center center / cover no-repeat !important;
  border:1px solid #e7ebf1 !important;
  box-shadow:0 14px 30px rgba(17,46,83,.06) !important;
  overflow:hidden !important;
  position:relative !important;
}
.home-page .shopping-guide-banner.shopping-guide-banner-products::before,
.home-page .shopping-guide-banner.shopping-guide-banner-products::after,
.home-page .shopping-guide-banner.shopping-guide-banner-products .shopping-guide-art {
  display:none !important;
  content:none !important;
}
/* Keep the real HTML copy in the document for SEO/accessibility, but let the designed banner image be the visual layer. */
.home-page .shopping-guide-banner.shopping-guide-banner-products .shopping-guide-copy {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.home-page .shopping-guide-banner.shopping-guide-banner-products:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(17,46,83,.10) !important;
}

@media (max-width:980px) {
  .home-page .shopping-guide-banner.shopping-guide-banner-products {
    min-height:278px !important;
    background-position:center center !important;
  }
}
@media (max-width:720px) {
  .home-page .shopping-guide-banner.shopping-guide-banner-products {
    min-height:250px !important;
    background-position:59% center !important;
    border-radius:0 !important;
  }
}


/* ===== MOMENT / CORE GUIDE REFINEMENT ===== */
.home-page .moment-section { padding:68px 0 78px; background:#fff; }
.home-page .moment-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.home-page .moment-title > div { min-width:0; }
.home-page .moment-eyebrow { display:block; margin-bottom:8px; font-size:10px; font-weight:900; letter-spacing:.16em; color:var(--jp-red); }
.home-page .moment-title h2 { margin:0; font-size:27px; line-height:1.25; letter-spacing:-.045em; color:#111; }
.home-page .moment-title p { margin:8px 0 0; font-size:12px; line-height:1.65; color:#727984; }
.home-page .moment-more { flex:0 0 auto; margin-bottom:2px; font-size:11px; font-weight:800; color:#173c68; }
.home-page .moment-more:hover { color:var(--jp-red); }
.home-page .moment-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.home-page .moment-card { min-height:0; padding:0; overflow:hidden; border:1px solid #e8ebef; border-radius:20px; background:#fff; box-shadow:0 14px 30px rgba(20,35,55,.055); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.home-page .moment-card:hover { transform:translateY(-4px); border-color:#edc8cb; box-shadow:0 20px 38px rgba(68,39,43,.09); }
.home-page .moment-image { width:100%; margin:0; aspect-ratio:4 / 3; border-radius:0; background:#f7f9fb; overflow:hidden; }
.home-page .moment-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.home-page .moment-card-copy { display:flex; flex-direction:column; min-height:235px; padding:20px 20px 18px; }
.home-page .moment-card-copy > small { order:0; margin:0 0 9px; font-size:9px; font-weight:900; letter-spacing:.08em; color:var(--jp-red); }
.home-page .moment-card-copy > strong { order:1; margin:0; font-size:17px; line-height:1.48; letter-spacing:-.04em; color:#111; }
.home-page .moment-card-copy > p { order:2; margin:12px 0 0; font-size:12px; line-height:1.72; color:#6a7280; }
.home-page .moment-meta { order:3; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; font-size:10px; font-weight:800; color:#66707d; border-top:1px solid #f0f1f3; }
.home-page .moment-meta b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fff4f4; color:var(--jp-red); font-size:15px; font-weight:500; }
.home-page .moment-arrow { top:40%; width:38px; height:46px; display:grid; place-items:center; border:1px solid #e8ebef; border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 8px 18px rgba(20,35,55,.06); color:#8a929d; font-size:28px; line-height:1; }
.home-page .moment-arrow.left { left:-50px; }
.home-page .moment-arrow.right { right:-50px; }
.home-page .moment-arrow:hover { border-color:#edc8cb; color:var(--jp-red); }

@media (max-width:980px) {
  .home-page .moment-title { align-items:flex-start; }
  .home-page .moment-grid { grid-template-columns:repeat(4,270px); overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x mandatory; }
  .home-page .moment-card { scroll-snap-align:start; }
  .home-page .moment-arrow { display:none; }
}
@media (max-width:720px) {
  .home-page .moment-section { padding:48px 0 56px; }
  .home-page .moment-title { display:block; margin-bottom:20px; }
  .home-page .moment-title h2 { font-size:22px; }
  .home-page .moment-title p { font-size:11px; }
  .home-page .moment-more { display:inline-block; margin-top:10px; }
  .home-page .moment-grid { display:flex; gap:12px; overflow-x:auto; }
  .home-page .moment-card { flex:0 0 78vw; }
  .home-page .moment-card-copy { min-height:220px; padding:17px 17px 16px; }
  .home-page .moment-card-copy > strong { font-size:15px; }
  .home-page .moment-card-copy > p { font-size:11px; }
}


/* ===== MOMENT CARD PROPORTION FIX V2 =====
   4:3 source images stay uncropped; text area is tightened so the
   image/card proportion feels balanced and every card aligns equally.
   ========================================================= */
.home-page .moment-grid {
  align-items: stretch;
}
.home-page .moment-card {
  height: 438px;
  min-height: 438px;
  display: flex;
  flex-direction: column;
}
.home-page .moment-image {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f7f9fb;
}
.home-page .moment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.home-page .moment-card-copy {
  flex: 1 1 auto;
  min-height: 0;
  padding: 17px 18px 16px;
}
.home-page .moment-card-copy > small {
  margin-bottom: 7px;
}
.home-page .moment-card-copy > strong {
  font-size: 16px;
  line-height: 1.42;
}
.home-page .moment-card-copy > p {
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-page .moment-meta {
  padding-top: 13px;
  margin-top: auto;
}

@media (max-width: 980px) {
  .home-page .moment-card {
    height: 430px;
    min-height: 430px;
  }
}

@media (max-width: 720px) {
  .home-page .moment-card {
    height: auto;
    min-height: 0;
  }
  .home-page .moment-image {
    aspect-ratio: 4 / 3;
  }
  .home-page .moment-card-copy {
    min-height: 205px;
  }
}


/* ===== MOMENT CARD COPY HEIGHT TUNE V2 ===== */
.home-page .moment-card {
  height: 412px;
  min-height: 412px;
}
.home-page .moment-image {
  aspect-ratio: 1.36 / 1;
}
.home-page .moment-card-copy {
  padding: 14px 18px 14px;
}
.home-page .moment-card-copy > small {
  margin-bottom: 6px;
  font-size: 8px;
}
.home-page .moment-card-copy > strong {
  font-size: 15px;
  line-height: 1.38;
  min-height: 2.76em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-page .moment-card-copy > p {
  margin-top: 8px;
  min-height: 3.2em;
  font-size: 10.5px;
  line-height: 1.52;
}
.home-page .moment-meta {
  padding-top: 10px;
  font-size: 9px;
}
.home-page .moment-meta b {
  width: 26px;
  height: 26px;
  font-size: 14px;
}

@media (max-width: 980px) {
  .home-page .moment-card {
    height: 404px;
    min-height: 404px;
  }
}

@media (max-width: 720px) {
  .home-page .moment-card {
    height: auto;
    min-height: 0;
  }
  .home-page .moment-image {
    aspect-ratio: 4 / 3;
  }
  .home-page .moment-card-copy {
    min-height: 188px;
    padding: 14px 15px 14px;
  }
  .home-page .moment-card-copy > strong {
    font-size: 14px;
  }
}


/* ===== MOMENT CARD EXACT PROPORTION FIX V3 =====
   1200x900 source images = 4:3. Keep that ratio exactly and shrink only the text panel.
   ================================================= */
.home-page .moment-grid {
  align-items: stretch;
}
.home-page .moment-card {
  height: 386px !important;
  min-height: 386px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}
.home-page .moment-image {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.home-page .moment-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.home-page .moment-card-copy {
  min-height: 0 !important;
  height: auto !important;
  padding: 11px 16px 11px !important;
  display: grid !important;
  grid-template-rows: 14px 42px 34px 1fr 31px !important;
  align-content: stretch !important;
}
.home-page .moment-card-copy > small {
  margin: 0 !important;
  align-self: start;
  font-size: 8px !important;
  line-height: 1.2 !important;
}
.home-page .moment-card-copy > strong {
  margin: 0 !important;
  align-self: center;
  min-height: 0 !important;
  max-height: 42px;
  font-size: 14.5px !important;
  line-height: 1.42 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.home-page .moment-card-copy > p {
  margin: 0 !important;
  align-self: start;
  min-height: 0 !important;
  max-height: 34px;
  font-size: 10px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.home-page .moment-meta {
  margin: 0 !important;
  padding: 6px 0 0 !important;
  align-self: end;
  min-height: 31px;
  font-size: 9px !important;
}
.home-page .moment-meta b {
  width: 25px !important;
  height: 25px !important;
  font-size: 13px !important;
}

@media (max-width: 980px) {
  .home-page .moment-card {
    height: 382px !important;
    min-height: 382px !important;
  }
}
@media (max-width: 720px) {
  .home-page .moment-card {
    height: auto !important;
    min-height: 0 !important;
  }
  .home-page .moment-card-copy {
    grid-template-rows: 14px 40px 34px 8px 30px !important;
    padding: 11px 14px 10px !important;
  }
}


/* ===== MOMENT CARD SIMPLIFIED FIT V4 =====
   Remove description paragraphs and rebalance image/text proportion.
   ================================================= */
.home-page .moment-grid {
  align-items: stretch !important;
}
.home-page .moment-card {
  height: 368px !important;
  min-height: 368px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) !important;
}
.home-page .moment-image {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  background:#f7f9fb !important;
}
.home-page .moment-image img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.home-page .moment-card-copy {
  min-height:0 !important;
  padding: 12px 16px 12px !important;
  display:grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  row-gap: 8px !important;
}
.home-page .moment-card-copy > small {
  margin:0 !important;
  font-size:8px !important;
  line-height:1.2 !important;
}
.home-page .moment-card-copy > strong {
  margin:0 !important;
  min-height:0 !important;
  font-size:14px !important;
  line-height:1.38 !important;
  max-height: 2.76em !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.home-page .moment-card-copy > p {
  display:none !important;
}
.home-page .moment-meta {
  margin:0 !important;
  padding-top:10px !important;
  min-height:30px !important;
  font-size:9px !important;
  border-top:1px solid #f0f1f3 !important;
}
.home-page .moment-meta b {
  width:24px !important;
  height:24px !important;
  font-size:12px !important;
}
@media (max-width:980px) {
  .home-page .moment-card {
    height: 360px !important;
    min-height: 360px !important;
  }
}
@media (max-width:720px) {
  .home-page .moment-card {
    height:auto !important;
    min-height:0 !important;
    flex:0 0 76vw !important;
  }
  .home-page .moment-card-copy {
    padding:11px 14px 12px !important;
  }
}


/* =========================================================
   MOMENT / CORE GUIDE — REFERENCE MATCH V5
   ========================================================= */
.home-page .moment-section {
  padding: 56px 0 72px !important;
  background: #fff !important;
}
.home-page .moment-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
}
.home-page .moment-title h2 {
  margin: 0 !important;
  font-size: 29px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.05em !important;
  color: #111 !important;
}
.home-page .moment-title p {
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: #6e7783 !important;
}
.home-page .moment-top-arrows {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding-bottom: 4px;
}
.home-page .moment-arrow {
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #e4e9ef !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #718096 !important;
  box-shadow: none !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.home-page .moment-arrow:hover {
  color: #111 !important;
  border-color: #cfd7e1 !important;
}
.home-page .moment-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.home-page .moment-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 22px !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: 0 14px 34px rgba(20, 35, 55, .055) !important;
  transform: none !important;
}
.home-page .moment-card:first-child {
  border-color: #e5e9ee !important;
}
.home-page .moment-card:hover {
  transform: translateY(-3px) !important;
  border-color: #e3c2c6 !important;
  box-shadow: 0 19px 38px rgba(35, 43, 58, .085) !important;
}
.home-page .moment-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  background: #f7f9fb !important;
}
.home-page .moment-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.home-page .moment-card-copy {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 18px 8px 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.home-page .moment-card-copy > strong {
  order: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: visible !important;
  font-size: 21px !important;
  line-height: 1.32 !important;
  letter-spacing: -0.045em !important;
  color: #111 !important;
}
.home-page .moment-card-copy > p {
  order: 1 !important;
  display: block !important;
  margin: 12px 0 0 !important;
  min-height: 48px !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
  color: #6b7480 !important;
}
.home-page .moment-label {
  order: 2 !important;
  display: block !important;
  margin: 13px 0 17px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
}
.home-page .moment-label.red {
  color: #e63b3d !important;
}
.home-page .moment-label.blue {
  color: #3d74bd !important;
}
.home-page .moment-meta {
  order: 3 !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: auto 0 0 !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: 24px 1fr 24px !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #e6eaf0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #20334c !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}
.home-page .moment-meta-icon {
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #173c68;
}
.home-page .moment-meta-icon.red-icon {
  color: #e63b3d;
}
.home-page .moment-meta b {
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #173c68 !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
.home-page .moment-track-wrap {
  position: relative !important;
}

@media (max-width: 1180px) {
  .home-page .moment-grid {
    grid-template-columns: repeat(4, 290px) !important;
    overflow-x: auto !important;
    padding: 2px 2px 12px !important;
    scroll-snap-type: x mandatory !important;
  }
  .home-page .moment-card {
    scroll-snap-align: start !important;
  }
}
@media (max-width: 720px) {
  .home-page .moment-section {
    padding: 42px 0 52px !important;
  }
  .home-page .moment-title {
    align-items: flex-start !important;
    margin-bottom: 20px !important;
  }
  .home-page .moment-title h2 {
    font-size: 24px !important;
  }
  .home-page .moment-title p {
    font-size: 12px !important;
  }
  .home-page .moment-top-arrows {
    display: none !important;
  }
  .home-page .moment-grid {
    display: flex !important;
    gap: 12px !important;
  }
  .home-page .moment-card {
    flex: 0 0 82vw !important;
  }
  .home-page .moment-card-copy > strong {
    font-size: 18px !important;
  }
  .home-page .moment-card-copy > p {
    font-size: 12px !important;
  }
}

/* =========================================================
   MOMENT / CORE GUIDE — TALL REFERENCE MATCH V6
   - taller visual area
   - preserve full 4:3 artwork without cropping
   - left-align all card copy like the reference
   ========================================================= */
.home-page .moment-section {
  padding: 64px 0 82px !important;
}
.home-page .moment-title {
  margin-bottom: 30px !important;
}
.home-page .moment-title h2,
.home-page .moment-title p {
  text-align: left !important;
}
.home-page .moment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.home-page .moment-card {
  min-height: 570px !important;
  height: 570px !important;
  padding: 12px 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
}
.home-page .moment-image {
  width: 100% !important;
  height: 340px !important;
  min-height: 340px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: #f8fafc !important;
}
.home-page .moment-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}
.home-page .moment-card-copy {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 19px 10px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
}
.home-page .moment-card-copy > strong {
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 22px !important;
  line-height: 1.34 !important;
  letter-spacing: -0.045em !important;
}
.home-page .moment-card-copy > p {
  width: 100% !important;
  min-height: 48px !important;
  margin: 12px 0 0 !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 1.72 !important;
}
.home-page .moment-label {
  width: 100% !important;
  margin: 13px 0 16px !important;
  text-align: left !important;
}
.home-page .moment-meta {
  margin-top: auto !important;
  text-align: left !important;
}

@media (max-width: 1180px) {
  .home-page .moment-grid {
    grid-template-columns: repeat(4, 310px) !important;
  }
  .home-page .moment-card {
    height: 560px !important;
    min-height: 560px !important;
  }
  .home-page .moment-image {
    height: 330px !important;
    min-height: 330px !important;
  }
}

@media (max-width: 720px) {
  .home-page .moment-card {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 84vw !important;
  }
  .home-page .moment-image {
    height: 72vw !important;
    min-height: 0 !important;
    max-height: 340px !important;
  }
  .home-page .moment-card-copy > strong {
    font-size: 19px !important;
  }
}


/* =========================================================
   MOMENT / CORE GUIDE — IMAGE RATIO CORRECTION V7
   1200x900 source artwork = exact 4:3. No forced tall image box.
   ========================================================= */
.home-page .moment-section .shop-container {
  width: min(calc(100% - 56px), 1320px) !important;
}
.home-page .moment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.home-page .moment-card {
  height: 535px !important;
  min-height: 535px !important;
  padding: 10px 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}
.home-page .moment-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  background: transparent !important;
}
.home-page .moment-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.home-page .moment-card-copy {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 17px 9px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
}
.home-page .moment-card-copy > strong {
  margin: 0 !important;
  text-align: left !important;
  font-size: 20px !important;
  line-height: 1.34 !important;
  letter-spacing: -0.045em !important;
}
.home-page .moment-card-copy > p {
  margin: 11px 0 0 !important;
  min-height: 46px !important;
  text-align: left !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}
.home-page .moment-label {
  margin: 12px 0 15px !important;
  text-align: left !important;
}
.home-page .moment-meta {
  margin-top: auto !important;
}

@media (max-width: 1180px) {
  .home-page .moment-section .shop-container {
    width: min(calc(100% - 36px), 1320px) !important;
  }
  .home-page .moment-grid {
    grid-template-columns: repeat(4, 295px) !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
  }
  .home-page .moment-card {
    height: 515px !important;
    min-height: 515px !important;
  }
}
@media (max-width: 720px) {
  .home-page .moment-section .shop-container {
    width: calc(100% - 24px) !important;
  }
  .home-page .moment-card {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 84vw !important;
  }
  .home-page .moment-image {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ===== MOMENT ORIGINAL IMAGE FULL-VIEW FIX =====
   Use uploaded 1200x900 assets exactly as-is. No cropping, no fixed-height image box.
   ================================================= */
.home-page .moment-card {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.home-page .moment-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.home-page .moment-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.home-page .moment-card-copy {
  flex: 1 1 auto !important;
}

@media (max-width: 720px) {
  .home-page .moment-image,
  .home-page .moment-image img {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
  }
}


/* ===== MOMENT FULL IMAGE SHOW FINAL ===== */
.home-page .moment-grid {
  align-items: start !important;
}
.home-page .moment-card {
  height: auto !important;
  min-height: 0 !important;
}
.home-page .moment-image {
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: #fff !important;
  padding: 12px 12px 0 !important;
  border-radius: 18px 18px 0 0 !important;
}
.home-page .moment-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  object-fit: fill !important;
  object-position: center top !important;
  border-radius: 14px !important;
}
.home-page .moment-card-copy {
  padding-top: 14px !important;
}
@media (max-width: 720px) {
  .home-page .moment-image {
    padding: 10px 10px 0 !important;
  }
}


/* =========================================================
   SUBPAGE HERO FULL BACKGROUND OVERRIDE V2
   - Make the entire hero section use the background image
   - Remove inner card look
   ========================================================= */
.premium-sub-hero {
  position: relative !important;
  padding: 78px 0 72px !important;
  overflow: hidden !important;
  background-color: #f8fafc !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}
.premium-sub-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.93) 28%, rgba(255,255,255,.84) 45%, rgba(255,255,255,.45) 62%, rgba(255,255,255,.12) 100%) !important;
  z-index: 0 !important;
}
.premium-sub-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 100%) !important;
  z-index: 0 !important;
  display: block !important;
}
.sub-popular .premium-sub-hero { background-image: url('../images/subhero-bg/popular-bg.png') !important; }
.sub-shopping .premium-sub-hero { background-image: url('../images/subhero-bg/shopping-bg.png') !important; }
.sub-delivery .premium-sub-hero { background-image: url('../images/subhero-bg/delivery-bg.png') !important; }
.sub-direct .premium-sub-hero { background-image: url('../images/subhero-bg/direct-bg.png') !important; }
.sub-faq .premium-sub-hero { background-image: url('../images/subhero-bg/faq-bg.png') !important; }
.premium-sub-hero .shop-container {
  position: relative !important;
  z-index: 2 !important;
}
.sub-hero-shell {
  min-height: 390px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sub-hero-shell::before,
.sub-hero-shell::after {
  display: none !important;
  content: none !important;
}
.sub-hero-copy {
  max-width: 640px !important;
  padding: 8px 0 !important;
}
.sub-hero-copy > small {
  margin-bottom: 14px !important;
}
.sub-hero-copy h1 {
  font-size: clamp(42px, 4.6vw, 66px) !important;
  line-height: 1.08 !important;
  max-width: 620px !important;
}
.sub-hero-copy p {
  margin-top: 22px !important;
  max-width: 650px !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
}
.sub-hero-tags {
  margin-top: 28px !important;
}
.sub-hero-tags a {
  background: rgba(255,255,255,.86) !important;
}
@media (max-width: 980px) {
  .premium-sub-hero {
    padding: 58px 0 52px !important;
    background-position: 66% center !important;
  }
  .premium-sub-hero::before {
    background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.90) 38%, rgba(255,255,255,.72) 100%) !important;
  }
  .sub-hero-shell {
    min-height: 320px !important;
  }
}
@media (max-width: 720px) {
  .premium-sub-hero {
    padding: 40px 0 34px !important;
    background-position: 72% center !important;
  }
  .sub-hero-shell {
    min-height: 280px !important;
  }
  .sub-hero-copy h1 {
    font-size: 34px !important;
  }
  .sub-hero-copy p {
    font-size: 12px !important;
    line-height: 1.75 !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   POPULAR HERO SCALE + SUBPAGE HERO UNIFORM HEIGHT FIX
   ========================================================= */
.premium-sub-hero {
  min-height: 486px !important;
  padding: 72px 0 70px !important;
}
.sub-hero-shell {
  min-height: 344px !important;
}
.sub-popular .premium-sub-hero {
  background-size: 88% auto !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 980px) {
  .premium-sub-hero {
    min-height: 420px !important;
    padding: 56px 0 54px !important;
  }
  .sub-hero-shell {
    min-height: 300px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 88% !important;
    background-position: right -10px center !important;
  }
}
@media (max-width: 720px) {
  .premium-sub-hero {
    min-height: 340px !important;
    padding: 38px 0 36px !important;
  }
  .sub-hero-shell {
    min-height: 250px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 80% !important;
    background-position: 120% center !important;
  }
}


/* =========================================================
   FINAL HERO BALANCE FIX
   - unify subpage hero height
   - reduce zoom feel on popular hero only
   ========================================================= */
.premium-sub-hero {
  min-height: 452px !important;
  padding: 64px 0 !important;
}
.sub-hero-shell {
  min-height: 324px !important;
}
.sub-popular .premium-sub-hero {
  background-size: 72% auto !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
}
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  background-size: cover !important;
  background-position: center center !important;
}
@media (max-width: 1200px) {
  .sub-popular .premium-sub-hero {
    background-size: 76% auto !important;
    background-position: right 8px center !important;
  }
}
@media (max-width: 980px) {
  .premium-sub-hero {
    min-height: 404px !important;
    padding: 52px 0 !important;
  }
  .sub-hero-shell {
    min-height: 286px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 76% !important;
    background-position: right -12px center !important;
  }
}
@media (max-width: 720px) {
  .premium-sub-hero {
    min-height: 332px !important;
    padding: 36px 0 !important;
  }
  .sub-hero-shell {
    min-height: 232px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 66% !important;
    background-position: 118% 62% !important;
  }
}


/* =========================================================
   FINAL SUBPAGE HERO MATCH + BUTTON VISIBILITY FIX
   ========================================================= */
.premium-sub-hero {
  min-height: 452px !important;
  padding: 64px 0 !important;
}
.sub-hero-shell {
  min-height: 324px !important;
}
.sub-popular .premium-sub-hero,
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  min-height: 452px !important;
}
.sub-popular .premium-sub-hero {
  background-size: 64% auto !important;
  background-repeat: no-repeat !important;
  background-position: right 24px center !important;
}
.sub-hero-tags a {
  background: rgba(255,255,255,.94) !important;
  color: #374050 !important;
  border: 1px solid rgba(216,224,233,.96) !important;
}
.sub-hero-tags a:first-child {
  background: var(--jp-red) !important;
  border-color: var(--jp-red) !important;
  color: #fff !important;
}
.sub-hero-tags a:hover {
  background: #fff7f7 !important;
  border-color: #e4adb1 !important;
  color: var(--jp-red-dark) !important;
}
.sub-hero-tags a:first-child:hover {
  background: var(--jp-red-dark) !important;
  border-color: var(--jp-red-dark) !important;
  color: #fff !important;
}
@media (max-width: 1200px) {
  .premium-sub-hero {
    min-height: 434px !important;
    padding: 58px 0 !important;
  }
  .sub-hero-shell {
    min-height: 308px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: 66% auto !important;
    background-position: right 12px center !important;
  }
}
@media (max-width: 980px) {
  .premium-sub-hero,
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    min-height: 400px !important;
    padding: 52px 0 !important;
  }
  .sub-hero-shell {
    min-height: 286px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 72% !important;
    background-position: right -16px center !important;
  }
}
@media (max-width: 720px) {
  .premium-sub-hero,
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    min-height: 332px !important;
    padding: 36px 0 !important;
  }
  .sub-hero-shell {
    min-height: 232px !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 62% !important;
    background-position: 118% 60% !important;
  }
}

/* =========================================================
   FINAL SUBPAGE HERO UNIFICATION
   Popular / Shopping / Delivery / Direct / FAQ
   Same height, crop mode and alignment across all subpages.
   ========================================================= */
.sub-popular .premium-sub-hero,
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  min-height: 452px !important;
  padding: 64px 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1200px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    min-height: 434px !important;
    padding: 58px 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 980px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    min-height: 400px !important;
    padding: 52px 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 720px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    min-height: 332px !important;
    padding: 36px 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* =========================================================
   SUBPAGE HERO IMAGE SCALE DOWN v9
   Keep the unified hero heights, but show a little more of each
   background image so the photography feels less zoomed-in.
   ========================================================= */
.sub-popular .premium-sub-hero,
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 94% auto !important;
}

/* The popular-products artwork has a much taller source ratio,
   so it needs a slightly stronger reduction to match the others visually. */
.sub-popular .premium-sub-hero {
  background-size: 88% auto !important;
}

@media (max-width: 1200px) {
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: 96% auto !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: 92% auto !important;
  }
}

@media (max-width: 980px) {
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: 98% auto !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: 94% auto !important;
  }
}

@media (max-width: 720px) {
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: auto 96% !important;
  }
  .sub-popular .premium-sub-hero {
    background-size: auto 90% !important;
  }
}

/* =========================================================
   SHOPPING GUIDE / INFORMATION HUB REDESIGN
   Starts below the 4-step checklist only.
   ========================================================= */
.shopping-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--jp-red,#d83b3b);font-size:10px;font-weight:900;letter-spacing:.16em}.shopping-eyebrow::before{content:"";width:22px;height:1px;background:currentColor}.shopping-compare-stage{padding:86px 0 92px;background:#f5f6f8;border-top:1px solid #e9ebee}.shopping-compare-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(420px,1.05fr);gap:78px;align-items:center}.shopping-compare-copy h2{margin:15px 0 20px;font-size:43px;line-height:1.16;letter-spacing:-.055em;color:#101826}.shopping-compare-copy h2 em{font-style:normal;color:var(--jp-red,#d83b3b)}.shopping-compare-copy>p{max-width:610px;margin:0 0 30px;color:#697484;font-size:14px;line-height:1.9}.shopping-rule-line{display:grid;grid-template-columns:34px 1fr;gap:15px;padding:15px 0;border-top:1px solid #dde2e7}.shopping-rule-line:last-child{border-bottom:1px solid #dde2e7}.shopping-rule-line span{padding-top:3px;color:#c7ccd2;font-size:10px;font-weight:900}.shopping-rule-line p{margin:0;color:#66717e;font-size:12.5px;line-height:1.7}.shopping-rule-line b{margin-right:8px;color:#17202c}.shopping-compare-board{position:relative;padding:0 28px 28px;border:1px solid #e0e4e8;border-radius:28px;background:#fff;box-shadow:0 26px 65px rgba(24,35,50,.08);overflow:hidden}.compare-board-top{margin:0 -28px 24px;padding:22px 28px;background:#172231;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.compare-board-top span{color:#ff7772;font-size:9px;font-weight:900;letter-spacing:.16em}.compare-board-top b{font-size:13px}.compare-product-row{display:grid;grid-template-columns:82px 1fr 1fr;gap:16px;align-items:center;padding:20px 18px;border-radius:16px;background:#f7f8fa}.compare-product-row small{font-size:9px;font-weight:900;letter-spacing:.13em;color:#a0a7b0}.compare-product-row strong{font-size:20px;letter-spacing:-.03em}.compare-product-row p{margin:0;font-size:11px;color:#7a8491}.compare-product-row em{grid-column:2 / 4;font-style:normal;font-size:10px;color:#b34242}.compare-product-row.is-b{background:#fff7f6;border:1px solid #f0dedb}.compare-vs{height:42px;display:flex;align-items:center;gap:14px}.compare-vs span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #dde2e7;color:#9aa2ad;font-size:9px;font-weight:900}.compare-vs i{height:1px;flex:1;background:#e4e7ea}.compare-board-result{margin-top:18px;padding:17px 18px;border-left:3px solid var(--jp-red,#d83b3b);background:#fff}.compare-board-result span{font-size:9px;color:var(--jp-red,#d83b3b);font-weight:900;letter-spacing:.13em}.compare-board-result p{margin:6px 0 0;font-size:12px;line-height:1.7;color:#687381}.compare-board-result b{color:#17202c}.shopping-standard-section{padding:88px 0 94px;background:#fff}.shopping-standard-head{display:flex;justify-content:space-between;align-items:end;gap:60px;margin-bottom:34px}.shopping-standard-head h2{margin:12px 0 0;font-size:35px;letter-spacing:-.05em;color:#101826}.shopping-standard-head>p{max-width:500px;margin:0;font-size:13px;line-height:1.8;color:#7a8491}.shopping-standard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dfe3e7;border-bottom:1px solid #dfe3e7}.shopping-standard-card{position:relative;min-height:340px;padding:38px 32px 30px;border-right:1px solid #e3e6ea;transition:transform .25s ease,background .25s ease}.shopping-standard-card:last-child{border-right:0}.shopping-standard-card:hover{background:#fafafa;transform:translateY(-4px)}.standard-no{position:absolute;top:28px;right:30px;color:#d6d9dd;font-size:11px;font-weight:900}.standard-icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:30px;border-radius:16px;background:#172231;color:#fff;font-size:20px;font-weight:900}.shopping-standard-card small{display:block;color:var(--jp-red,#d83b3b);font-size:9px;font-weight:900;letter-spacing:.14em}.shopping-standard-card h3{margin:9px 0 13px;font-size:22px;letter-spacing:-.035em}.shopping-standard-card p{margin:0;min-height:70px;color:#707b88;font-size:12.5px;line-height:1.75}.shopping-standard-card a{display:inline-flex;align-items:center;gap:16px;margin-top:26px;color:#172231;font-size:11px;font-weight:900}.shopping-standard-card a b{color:var(--jp-red,#d83b3b);font-size:15px;transition:transform .2s}.shopping-standard-card a:hover b{transform:translateX(4px)}.shopping-final-section{padding:88px 0 94px;background:#172231;color:#fff}.shopping-final-layout{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:78px;align-items:start}.shopping-final-title .shopping-eyebrow{color:#ff6d67}.shopping-final-title h2{margin:16px 0 18px;font-size:38px;line-height:1.25;letter-spacing:-.05em}.shopping-final-title p{max-width:440px;margin:0;color:#adb6c1;font-size:13px;line-height:1.85}.shopping-faq-link{display:inline-flex;align-items:center;gap:22px;margin-top:30px;padding:13px 18px;border:1px solid #44505e;border-radius:999px;color:#fff;font-size:11px;font-weight:900}.shopping-faq-link span{color:#ff6d67}.shopping-final-list{border-top:1px solid #46515e}.shopping-final-list>div{display:grid;grid-template-columns:46px 175px 1fr;gap:20px;align-items:center;min-height:74px;border-bottom:1px solid #3d4855}.shopping-final-list span{color:#ff6d67;font-size:10px;font-weight:900}.shopping-final-list strong{font-size:14px}.shopping-final-list p{margin:0;color:#aeb7c1;font-size:12px;line-height:1.65}
@media(max-width:980px){.shopping-compare-layout,.shopping-final-layout{grid-template-columns:1fr;gap:42px}.shopping-standard-head{align-items:flex-start;flex-direction:column;gap:14px}.shopping-standard-grid{grid-template-columns:1fr}.shopping-standard-card{min-height:auto;border-right:0;border-bottom:1px solid #e3e6ea}.shopping-standard-card:last-child{border-bottom:0}.shopping-standard-card p{min-height:0}.shopping-final-list>div{grid-template-columns:42px 160px 1fr}}
@media(max-width:640px){.shopping-compare-stage,.shopping-standard-section,.shopping-final-section{padding:58px 0 62px}.shopping-compare-copy h2{font-size:31px}.shopping-compare-layout{gap:32px}.shopping-compare-board{padding:0 18px 20px;border-radius:20px}.compare-board-top{margin:0 -18px 18px;padding:18px;align-items:flex-start;flex-direction:column;gap:5px}.compare-product-row{grid-template-columns:1fr;gap:6px;padding:16px}.compare-product-row em{grid-column:auto}.shopping-standard-head h2{font-size:28px}.shopping-standard-card{padding:30px 22px}.shopping-final-title h2{font-size:30px}.shopping-final-list>div{grid-template-columns:32px 1fr;gap:8px 12px;padding:14px 0}.shopping-final-list strong{font-size:13px}.shopping-final-list p{grid-column:2}.shopping-rule-line{grid-template-columns:28px 1fr}}

/* =========================================================
   SHOPPING GUIDE BRIGHT REDESIGN v13
   4-step checklist + all sections below it.
   No standalone black/dark background blocks.
   ========================================================= */
.sub-shopping #shopping-flow{
  padding:86px 0 92px;
  background:linear-gradient(180deg,#fff 0%,#fffaf7 100%);
  border-top:1px solid #f0e8e3;
  border-bottom:1px solid #f0e8e3;
}
.sub-shopping #shopping-flow .premium-section-head{
  margin-bottom:34px;
}
.sub-shopping #shopping-flow .premium-section-head small{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--jp-red,#d83b3b);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.sub-shopping #shopping-flow .premium-section-head small::before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
}
.sub-shopping #shopping-flow .premium-section-head h2{
  margin-top:11px;
  font-size:38px;
  letter-spacing:-.05em;
  color:#26303a;
}
.sub-shopping #shopping-flow .premium-section-head p{
  color:#7a7470;
}
.sub-shopping .step-flow-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
.sub-shopping .step-flow-grid::before{
  content:"";
  position:absolute;
  top:38px;
  left:9%;
  right:9%;
  height:1px;
  background:linear-gradient(90deg,#f0c9c5,#e3a39e,#f0c9c5);
  z-index:0;
}
.sub-shopping .step-flow-card{
  position:relative;
  z-index:1;
  min-height:250px;
  padding:28px 26px 26px;
  border:1px solid #eadfda;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 36px rgba(126,87,72,.07);
  overflow:visible;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.sub-shopping .step-flow-card:hover{
  transform:translateY(-5px);
  border-color:#e8b8b3;
  box-shadow:0 20px 45px rgba(126,87,72,.11);
}
.sub-shopping .step-flow-card::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#efb3ad,var(--jp-red,#d83b3b));
  opacity:.72;
}
.sub-shopping .step-flow-card > span{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:26px;
  border:7px solid #fffaf7;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 1px #e7bdb8;
  color:var(--jp-red,#d83b3b);
  font-size:11px;
  font-weight:900;
}
.sub-shopping .step-flow-card small{
  display:block;
  margin-top:0;
  color:#c1847f;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.sub-shopping .step-flow-card strong{
  display:block;
  margin:9px 0 12px;
  color:#2b333c;
  font-size:18px;
  letter-spacing:-.03em;
}
.sub-shopping .step-flow-card p{
  margin:0;
  color:#7b7774;
  font-size:12.5px;
  line-height:1.75;
}

/* Price comparison — warm, editorial card instead of dark board */
.shopping-compare-stage{
  padding:92px 0 96px;
  background:#fff;
  border-top:0;
  border-bottom:1px solid #f0e8e3;
}
.shopping-compare-copy h2{color:#29313a;}
.shopping-compare-copy>p{color:#77736f;}
.shopping-rule-line{border-color:#eee3de;}
.shopping-rule-line:last-child{border-color:#eee3de;}
.shopping-rule-line span{color:#d8aaa5;}
.shopping-rule-line p{color:#77736f;}
.shopping-rule-line b{color:#4e4541;}
.shopping-compare-board{
  padding:0 28px 28px;
  border:1px solid #eaded9;
  border-radius:28px;
  background:#fffaf7;
  box-shadow:0 24px 60px rgba(130,86,69,.09);
}
.compare-board-top{
  margin:0 -28px 24px;
  padding:21px 28px;
  background:linear-gradient(135deg,#fff0ed,#fde5e1);
  border-bottom:1px solid #edccc6;
  color:#4b3d39;
}
.compare-board-top span{color:var(--jp-red,#d83b3b);}
.compare-board-top b{color:#4c413d;}
.compare-product-row{
  background:#fff;
  border:1px solid #eee3df;
}
.compare-product-row small{color:#b6908c;}
.compare-product-row strong{color:#3f3835;}
.compare-product-row p{color:#807875;}
.compare-product-row.is-b{
  background:#fff3f1;
  border:1px solid #edcbc6;
}
.compare-vs span{
  background:#fffaf7;
  border-color:#e6d7d2;
  color:#b3908b;
}
.compare-vs i{background:#eadeda;}
.compare-board-result{
  border-left:3px solid var(--jp-red,#d83b3b);
  background:#fff;
  border-radius:0 12px 12px 0;
}
.compare-board-result p{color:#756e6b;}
.compare-board-result b{color:#4d4541;}

/* Detail standards — light cards with subtle red markers */
.shopping-standard-section{
  padding:92px 0 98px;
  background:#fffaf7;
}
.shopping-standard-head h2{color:#29313a;}
.shopping-standard-head>p{color:#7a7470;}
.shopping-standard-grid{
  gap:18px;
  border:0;
}
.shopping-standard-card{
  min-height:350px;
  padding:36px 30px 30px;
  border:1px solid #eaded9 !important;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 34px rgba(121,82,67,.06);
}
.shopping-standard-card:hover{
  background:#fff;
  border-color:#e7bab5 !important;
  box-shadow:0 20px 46px rgba(121,82,67,.1);
}
.standard-no{color:#d6aaa5;}
.standard-icon{
  background:#fff1ef;
  border:1px solid #edcbc6;
  color:var(--jp-red,#d83b3b);
  box-shadow:inset 0 0 0 6px #fff8f6;
}
.shopping-standard-card h3{color:#393331;}
.shopping-standard-card p{color:#77716e;}
.shopping-standard-card a{color:#5a4a45;}

/* Final check — bright panel, no black/dark background */
.shopping-final-section{
  padding:92px 0 98px;
  background:linear-gradient(135deg,#fff1ee 0%,#fff9f6 48%,#fff 100%);
  color:#3f3936;
  border-top:1px solid #efd8d3;
  border-bottom:1px solid #efd8d3;
}
.shopping-final-layout{
  position:relative;
  padding:46px;
  gap:64px;
  border:1px solid #ead3ce;
  border-radius:30px;
  background:rgba(255,255,255,.78);
  box-shadow:0 24px 65px rgba(131,86,69,.08);
  overflow:hidden;
}
.shopping-final-layout::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-100px;
  top:-110px;
  border-radius:50%;
  background:#fde5e0;
  opacity:.7;
  pointer-events:none;
}
.shopping-final-title{position:relative;z-index:1;}
.shopping-final-title .shopping-eyebrow{color:var(--jp-red,#d83b3b);}
.shopping-final-title h2{color:#403733;}
.shopping-final-title p{color:#7a706c;}
.shopping-faq-link{
  margin-top:30px;
  border:1px solid #e6bdb8;
  background:#fff;
  color:#6b514c;
  box-shadow:0 7px 18px rgba(135,89,73,.05);
}
.shopping-faq-link:hover{
  border-color:var(--jp-red,#d83b3b);
  color:var(--jp-red,#d83b3b);
}
.shopping-faq-link span{color:var(--jp-red,#d83b3b);}
.shopping-final-list{
  position:relative;
  z-index:1;
  border-top:1px solid #ead8d3;
}
.shopping-final-list>div{
  border-bottom:1px solid #ead8d3;
}
.shopping-final-list span{color:var(--jp-red,#d83b3b);}
.shopping-final-list strong{color:#4a403c;}
.shopping-final-list p{color:#80746f;}

@media(max-width:980px){
  .sub-shopping #shopping-flow{padding:72px 0 76px;}
  .sub-shopping .step-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sub-shopping .step-flow-grid::before{display:none;}
  .shopping-standard-grid{grid-template-columns:1fr;}
  .shopping-standard-card{min-height:auto;}
  .shopping-final-layout{padding:38px;}
}
@media(max-width:640px){
  .sub-shopping #shopping-flow{padding:56px 0 60px;}
  .sub-shopping #shopping-flow .premium-section-head h2{font-size:30px;}
  .sub-shopping .step-flow-grid{grid-template-columns:1fr;gap:14px;}
  .sub-shopping .step-flow-card{min-height:auto;padding:24px 22px 24px;}
  .sub-shopping .step-flow-card > span{width:46px;height:46px;margin-bottom:20px;}
  .shopping-compare-stage,.shopping-standard-section,.shopping-final-section{padding:60px 0 64px;}
  .shopping-standard-grid{gap:14px;}
  .shopping-standard-card{padding:28px 22px;}
  .shopping-final-layout{padding:28px 22px;border-radius:22px;gap:38px;}
}

/* =========================================================
   SUBPAGE VISUAL CONSISTENCY v14
   - hero artwork: keep right edge fully visible (no cover crop)
   - section rhythm: white / warm cream alternation
   - replace cool gray subpage section backgrounds
   ========================================================= */

/* 1) Subpage hero artwork: no right-side cropping */
.sub-popular .premium-sub-hero,
.sub-shopping .premium-sub-hero,
.sub-delivery .premium-sub-hero,
.sub-direct .premium-sub-hero,
.sub-faq .premium-sub-hero {
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 100% !important;
  background-color: #fff !important;
}

/* Preserve the full right edge at all desktop/tablet sizes. */
@media (max-width: 1200px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}
@media (max-width: 980px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}
@media (max-width: 720px) {
  .sub-popular .premium-sub-hero,
  .sub-shopping .premium-sub-hero,
  .sub-delivery .premium-sub-hero,
  .sub-direct .premium-sub-hero,
  .sub-faq .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}

/* 2) Shared warm section system for all top-level subpages */
.sub-page {
  --sub-warm: #fff8f5;
  --sub-warm-2: #fff4f1;
  --sub-line-warm: #f0dfd9;
}

.sub-page .premium-content-section {
  background: #fff !important;
}
.sub-page .premium-content-section.soft-section {
  background: var(--sub-warm) !important;
  border-top: 1px solid var(--sub-line-warm) !important;
  border-bottom: 1px solid var(--sub-line-warm) !important;
}

/* Remove remaining cool-gray alternates inside subpage guide cards. */
.sub-page .category-guide-card:nth-child(even) {
  background: #fff9f7 !important;
}
.sub-page .guide-item {
  background: #fff9f7 !important;
  border-color: #efe2dd !important;
}

/* 3) Shopping guide: strict alternating rhythm */
.sub-shopping #shopping-flow {
  background: var(--sub-warm) !important;
  border-top: 1px solid var(--sub-line-warm) !important;
  border-bottom: 1px solid var(--sub-line-warm) !important;
}
.shopping-compare-stage {
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sub-line-warm) !important;
}
.shopping-standard-section {
  background: var(--sub-warm) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sub-line-warm) !important;
}
.shopping-final-section {
  background: #fff !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sub-line-warm) !important;
}
.shopping-final-layout {
  background: var(--sub-warm) !important;
  border-color: #ead3ce !important;
}
.shopping-final-layout::after {
  background: #fde8e2 !important;
}

/* Keep cards clean against alternating section backgrounds. */
.sub-shopping .step-flow-card,
.shopping-standard-card,
.shopping-compare-board,
.compare-product-row,
.compare-board-result {
  background-color: #fff !important;
}
.compare-product-row.is-b {
  background: #fff3f1 !important;
}

/* 4) Warm up generic subpage borders that previously read as cool gray. */
.sub-page .premium-content-section.soft-section .article-prose-block,
.sub-page .premium-content-section.soft-section .info-check-table,
.sub-page .premium-content-section.soft-section .shopping-example-card,
.sub-page .premium-content-section.soft-section .delivery-status-grid > div,
.sub-page .premium-content-section.soft-section .trust-signal-grid > div {
  border-color: #ecdfda !important;
}

/* =========================================================
   SUBPAGE WARM BACKGROUND + POPULAR HERO BLEND v15
   - popular hero: remove visible center seam without cropping the right edge
   - all top-level subpage content: replace cool gray surfaces with warm cream
   ========================================================= */

.subpage-body {
  background: #fff !important;
}
.subpage-body .sub-page {
  background: #fff !important;
}

/* Popular background image has a narrower source ratio than the other subheroes.
   Keep the artwork anchored to the right, then softly blend its left edge into white. */
.sub-popular .premium-sub-hero {
  position: relative;
  background-size: auto 102% !important;
  background-position: right center !important;
  background-color: #fff !important;
}
.sub-popular .premium-sub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 39%,
    rgba(255,255,255,.98) 47%,
    rgba(255,255,255,.78) 54%,
    rgba(255,255,255,.38) 60%,
    rgba(255,255,255,0) 68%
  );
}
.sub-popular .premium-sub-hero .sub-hero-shell {
  position: relative;
  z-index: 1;
}

/* Consistent warm section palette on every top-level subpage. */
.sub-page {
  --sub-warm: #fff8f5;
  --sub-warm-soft: #fffaf8;
  --sub-warm-card: #fffdfc;
  --sub-warm-line: #f0dfd9;
}

/* Generic content sections: no cool-gray section fills. */
.sub-page > .premium-content-section {
  background: #fff !important;
}
.sub-page > .premium-content-section.soft-section {
  background: var(--sub-warm) !important;
  border-top-color: var(--sub-warm-line) !important;
  border-bottom-color: var(--sub-warm-line) !important;
}

/* Page-specific alternating rhythm. */
.sub-popular #popular-guide,
.sub-delivery #delivery-flow,
.sub-direct #shop-check,
.sub-faq .premium-content-section:nth-of-type(3) {
  background: #fff !important;
}
.sub-popular #checklist,
.sub-delivery #customs-check,
.sub-direct #target-shop,
.sub-faq .premium-content-section:nth-of-type(2) {
  background: var(--sub-warm) !important;
}

/* Shopping guide keeps the same white / warm / white / warm rhythm. */
.sub-shopping #shopping-flow {
  background: var(--sub-warm) !important;
  border-color: var(--sub-warm-line) !important;
}
.sub-shopping .shopping-compare-stage {
  background: #fff !important;
  border-color: var(--sub-warm-line) !important;
}
.sub-shopping .shopping-standard-section {
  background: var(--sub-warm) !important;
  border-color: var(--sub-warm-line) !important;
}
.sub-shopping .shopping-final-section {
  background: #fff !important;
  border-color: var(--sub-warm-line) !important;
}

/* Replace cool-gray card/table surfaces that remain inside subpages. */
.sub-page .guide-item,
.sub-page .category-guide-card:nth-child(even),
.sub-page .premium-faq-list details[open],
.sub-page .shopping-standard-card:hover {
  background: var(--sub-warm-soft) !important;
}
.sub-page .article-prose-block,
.sub-page .info-check-table,
.sub-page .shopping-example-card,
.sub-page .check-card-list > div,
.sub-page .timeline-step,
.sub-page .standard-card,
.sub-page .target-shop-shell,
.sub-page .delivery-status-grid > div,
.sub-page .trust-signal-grid > div,
.sub-page .step-flow-card,
.sub-page .shopping-compare-board,
.sub-page .compare-product-row,
.sub-page .compare-board-result,
.sub-page .shopping-standard-card {
  background-color: #fff !important;
  border-color: #ecdfda !important;
}
.sub-page .compare-product-row.is-b,
.sub-page .faq-topic-strip span,
.sub-page .premium-faq-list summary span,
.sub-page .check-card-list span,
.sub-page .timeline-step > span,
.sub-page .step-flow-card::after {
  background: #fff2ef !important;
}

/* Warm neutral lines instead of blue-gray separators. */
.sub-page .article-point-list,
.sub-page .article-point-list > div,
.sub-page .premium-faq-list,
.sub-page .premium-faq-list details,
.sub-page .delivery-timeline,
.sub-page .shopping-standard-grid,
.sub-page .shopping-rule-line,
.sub-page .info-check-table > div {
  border-color: #eadfda !important;
}

/* Footer guide bar belongs to the subpage flow, so keep it warm rather than gray. */
.subpage-body .footer-guide-bar {
  background: #fff8f5 !important;
  border-top-color: #f0dfd9 !important;
}

@media (max-width: 980px) {
  .sub-popular .premium-sub-hero {
    background-size: auto 100% !important;
  }
  .sub-popular .premium-sub-hero::after {
    background: linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.92) 46%,rgba(255,255,255,.45) 58%,rgba(255,255,255,0) 70%);
  }
}
@media (max-width: 720px) {
  .sub-popular .premium-sub-hero::after {
    background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 42%,rgba(255,255,255,.68) 57%,rgba(255,255,255,.16) 76%,rgba(255,255,255,0) 100%);
  }
}


/* =========================================================
   USER FIX v16
   - Popular hero uses a true wide hero image, so no center seam is visible.
   - Only actual lower content gray sections are changed to warm cream.
   - QUICK GUIDE footer bar is restored to white.
   ========================================================= */

.sub-popular .premium-sub-hero {
  background-image: url('../images/subhero-bg/popular-bg.png') !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}
.sub-popular .premium-sub-hero::after {
  display: none !important;
  content: none !important;
}

/* Warm palette for lower content sections */
.sub-page {
  --sub-warm: #fff4ef !important;
  --sub-warm-soft: #fff8f5 !important;
  --sub-warm-line: #efdcd5 !important;
}

.sub-page > .premium-content-section.soft-section,
.sub-popular #checklist,
.sub-delivery #customs-check,
.sub-direct #target-shop {
  background: #fff4ef !important;
  border-top-color: #efdcd5 !important;
  border-bottom-color: #efdcd5 !important;
}

/* Shopping guide section rhythm */
.sub-shopping #shopping-flow,
.sub-shopping .shopping-standard-section {
  background: #fff4ef !important;
}
.sub-shopping .shopping-compare-stage,
.sub-shopping .shopping-final-section {
  background: #fff !important;
}

/* FAQ lower content */
.sub-faq .premium-content-section:nth-of-type(even) {
  background: #fff4ef !important;
}
.sub-faq .premium-content-section:nth-of-type(odd) {
  background: #fff !important;
}

/* Cards remain white */
.sub-page .soft-section .article-prose-block,
.sub-page .soft-section .info-check-table,
.sub-page .soft-section .shopping-example-card,
.sub-page .soft-section .check-card-list > div,
.sub-page .soft-section .target-shop-shell,
.sub-page .soft-section .delivery-status-grid > div,
.sub-page .soft-section .trust-signal-grid > div {
  background: #fff !important;
}

/* QUICK GUIDE is intentionally not part of this recolor */
.subpage-body .footer-guide-bar,
.footer-guide-bar {
  background: #fff !important;
  border-top-color: #eceef1 !important;
}

@media (max-width: 980px) {
  .sub-popular .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}
@media (max-width: 720px) {
  .sub-popular .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}


/* =========================================================
   USER FIX v17 — ACTUAL SUBPAGE LOWER INFO SECTIONS
   The large gray sections shown in popular / delivery / direct
   are explicitly changed to the site's warm shopping-guide tone.
   QUICK GUIDE / footer navigation is not affected.
   ========================================================= */

.subpage-body main.sub-page .premium-content-section.soft-section,
.subpage-body main.sub-page section.article-info-section,
.subpage-body main.sub-page .article-info-section.soft-section {
  background: #fff4ef !important;
  background-color: #fff4ef !important;
  border-top: 1px solid #efdcd5 !important;
  border-bottom: 1px solid #efdcd5 !important;
}

/* Exact sections visible in the supplied screenshots */
.sub-popular .article-info-section,
.sub-delivery .article-info-section,
.sub-direct .article-info-section {
  background: #fff4ef !important;
  background-color: #fff4ef !important;
}

/* Warm separators inside those sections */
.sub-popular .article-info-section .article-point-list,
.sub-popular .article-info-section .article-point-list > div,
.sub-delivery .article-info-section .article-point-list,
.sub-delivery .article-info-section .article-point-list > div,
.sub-direct .article-info-section .article-point-list,
.sub-direct .article-info-section .article-point-list > div {
  border-color: #eadbd5 !important;
}

/* Keep QUICK GUIDE and footer navigation white */
.subpage-body .footer-guide-bar,
.subpage-body .footer-guide-inner,
.footer-guide-bar {
  background: #fff !important;
}

/* Ensure no cool-gray fallback survives on lower informational sections */
.subpage-body main.sub-page section.premium-content-section.soft-section.article-info-section {
  background-image: none !important;
}

/* =========================================================
   USER FIX v19 — FAQ WHITE BACKGROUND
   FAQ page content area is intentionally plain white.
   ========================================================= */
.sub-faq,
.sub-faq .premium-content-section,
.sub-faq .premium-content-section:nth-of-type(odd),
.sub-faq .premium-content-section:nth-of-type(even),
.sub-faq .article-info-section,
.sub-faq .soft-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* =========================================================
   v21 - SUBPAGE CONTENT SECTIONS WHITE ONLY
   IMPORTANT: hero backgrounds/images are intentionally untouched.
   ========================================================= */

/* Popular / delivery / direct / FAQ content sections only */
.sub-popular > .premium-content-section,
.sub-delivery > .premium-content-section,
.sub-direct > .premium-content-section,
.sub-faq > .premium-content-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* Shopping guide content sections only */
.sub-shopping > #shopping-flow,
.sub-shopping > .shopping-compare-stage,
.sub-shopping > .shopping-standard-section,
.sub-shopping > .shopping-final-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* Remove alternate-section color fills while keeping subtle separators */
.sub-popular > .premium-content-section,
.sub-delivery > .premium-content-section,
.sub-direct > .premium-content-section,
.sub-faq > .premium-content-section,
.sub-shopping > #shopping-flow,
.sub-shopping > .shopping-compare-stage,
.sub-shopping > .shopping-standard-section,
.sub-shopping > .shopping-final-section {
  border-top-color: #eceef1 !important;
  border-bottom-color: #eceef1 !important;
}

/* Explicit safeguard: DO NOT affect any subpage hero artwork */
.sub-page > .premium-sub-hero {
  background-image: revert-layer;
}

/* =========================================================
   USER FIX v22 — EXACT USER-MARKED AREAS TO PURE WHITE
   Only the nine areas explicitly shown by the user are changed.
   Hero artwork and unrelated sections remain untouched.
   ========================================================= */

/* 1) Popular: HOW TO CHECK section */
.page-popular #checklist {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.page-popular #checklist .check-card-list > div {
  background: #fff !important;
}

/* 2) Popular: BEFORE YOU BUY article section (outside <main>) */
.page-popular > .premium-content-section.soft-section.article-info-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* 3) Shopping: COMPARE BOARD — remove all pink fills */
.page-shopping .shopping-compare-board,
.page-shopping .compare-board-top,
.page-shopping .compare-product-row,
.page-shopping .compare-product-row.is-b,
.page-shopping .compare-vs span,
.page-shopping .compare-board-result {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.page-shopping .compare-board-top {
  color: #4b3d39 !important;
}

/* 4) Shopping: FINAL CHECK panel — white inside and outside */
.page-shopping .shopping-final-section,
.page-shopping .shopping-final-layout {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.page-shopping .shopping-final-layout::after {
  display: none !important;
  content: none !important;
}

/* 5) Delivery: CUSTOMS CHECK section */
.page-delivery #customs-check {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.page-delivery #customs-check .check-card-list > div {
  background: #fff !important;
}

/* 6) Delivery: AFTER DELIVERY article section (outside <main>) */
.page-delivery > .premium-content-section.soft-section.article-info-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* 7) Direct shop: TARGET SHOP section */
.page-direct #target-shop {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
.page-direct #target-shop .target-shop-shell {
  background: #fff !important;
}

/* 8) Direct shop: DETAIL PAGE article section (outside <main>) */
.page-direct > .premium-content-section.soft-section.article-info-section {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* 9) FAQ: opened answer rows stay pure white */
.page-faq .premium-faq-list details,
.page-faq .premium-faq-list details[open],
.page-faq .premium-faq-list summary,
.page-faq .premium-faq-list p {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}

/* =========================================================
   v23 — DIRECT SHOP / SHOP STANDARD compact redesign only
   ========================================================= */
.sub-direct #shop-check {
  padding: 48px 0 52px !important;
  background: #fff !important;
}
.sub-direct #shop-check .premium-section-head {
  margin-bottom: 22px !important;
}
.sub-direct #shop-check .standard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.sub-direct #shop-check .standard-card {
  min-height: 112px !important;
  padding: 18px 20px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-content: center !important;
  border-radius: 15px !important;
  border: 1px solid #ece6e3 !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: border-color .2s ease, transform .2s ease !important;
}
.sub-direct #shop-check .standard-card:hover {
  transform: translateY(-2px) !important;
  border-color: #e9c7c3 !important;
}
.sub-direct #shop-check .standard-card span {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  align-self: start !important;
  border-radius: 50% !important;
  background: #fff3f1 !important;
  color: var(--jp-red) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}
.sub-direct #shop-check .standard-card strong {
  grid-column: 2 !important;
  margin: 1px 0 5px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}
.sub-direct #shop-check .standard-card p {
  grid-column: 2 !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: #77716e !important;
}
@media (max-width: 980px) {
  .sub-direct #shop-check .standard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .sub-direct #shop-check {
    padding: 40px 0 44px !important;
  }
  .sub-direct #shop-check .standard-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .sub-direct #shop-check .standard-card {
    min-height: 96px !important;
    padding: 16px 18px !important;
  }
}

/* =========================================================
   v24 — INDEX CORE GUIDE / FAQ / QUICK GUIDE POLISH
   User-requested targeted changes only.
   ========================================================= */

/* 1) Core guide: match the standard 1180px home content width.
      Source artwork remains proportional and is not cropped. */
.home-page .moment-section .shop-container {
  width: min(calc(100% - 36px), 1180px) !important;
}
.home-page .moment-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.home-page .moment-image,
.home-page .moment-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
.home-page .moment-image img {
  object-fit: contain !important;
}

/* Remove the unnecessary left/right controls completely. */
.home-page .moment-top-arrows,
.home-page .moment-arrow {
  display: none !important;
}

/* Add the same red H2 marker used by other home sections. */
.home-page .moment-title h2::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  margin-right: 10px;
  border-radius: 4px;
  background: var(--jp-red);
  vertical-align: -2px;
}

/* 2) Home FAQ: keep the active red rule away from the number/text,
      and make heading/action layout collision-proof. */
.home-page .home-faq-section .shop-section-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  column-gap: 32px !important;
}
.home-page .home-faq-section .shop-section-title > div {
  min-width: 0 !important;
}
.home-page .home-faq-section .shop-section-title h2,
.home-page .home-faq-section .home-faq-lead {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}
.home-page .home-faq-item summary {
  padding-left: 18px !important;
  padding-right: 10px !important;
}
.home-page .home-faq-answer {
  padding-left: 74px !important;
  padding-right: 38px !important;
}
.home-page .home-faq-item[open] {
  box-shadow: inset 3px 0 0 var(--jp-red) !important;
}

/* 3) QUICK GUIDE: readable black text everywhere — home + subpages. */
.footer-guide-label,
.footer-guide-links a,
.footer-guide-links a:visited,
.footer-guide-links a:hover,
.footer-guide-links a.is-current,
.subpage-body .footer-guide-label,
.subpage-body .footer-guide-links a,
.home-page .footer-guide-label,
.home-page .footer-guide-links a {
  color: #111 !important;
  opacity: 1 !important;
}
.footer-guide-links a::after {
  background: var(--jp-red) !important;
}

@media (max-width: 1180px) {
  .home-page .moment-section .shop-container {
    width: min(calc(100% - 36px), 1180px) !important;
  }
  .home-page .moment-grid {
    grid-template-columns: repeat(4, 290px) !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 720px) {
  .home-page .moment-section .shop-container {
    width: calc(100% - 24px) !important;
  }
  .home-page .home-faq-section .shop-section-title {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  .home-page .home-faq-item summary {
    padding-left: 12px !important;
    padding-right: 6px !important;
  }
  .home-page .home-faq-answer {
    padding-left: 54px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   v25 — SHOPPING GUIDE: remove card shadow only
   ========================================================= */
.sub-shopping .step-flow-card,
.sub-shopping .step-flow-card:hover,
.sub-shopping .step-flow-card > span {
  box-shadow: none !important;
}


/* =========================================================
   USER FIX v27
   Restore the two shopping-guide sections and remove only
   their shadow / glow effects. Layout, border, text and cards stay.
   ========================================================= */

/* 상세페이지에서 꼭 확인할 기준 */
.sub-shopping .shopping-standard-section,
.sub-shopping .shopping-standard-section *,
.sub-shopping .shopping-standard-section .shopping-standard-card,
.sub-shopping .shopping-standard-section .shopping-standard-card:hover {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* 결제 직전, 마지막 5가지만 확인하세요 */
.sub-shopping .shopping-final-section,
.sub-shopping .shopping-final-section *,
.sub-shopping .shopping-final-section .shopping-final-panel,
.sub-shopping .shopping-final-section .shopping-final-panel:hover {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* If decorative pseudo elements were creating soft glow/shadow, disable only that effect */
.sub-shopping .shopping-standard-section::before,
.sub-shopping .shopping-standard-section::after,
.sub-shopping .shopping-final-section::before,
.sub-shopping .shopping-final-section::after {
  box-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   v29 - 일본직구쇼핑몰추천 페이지 추가
   ========================================================= */
.sub-recommend .premium-sub-hero { background-image: url('../images/subhero-bg/recommend-bg.png') !important; }

@media (min-width: 1061px) {
  .main-nav { gap: 22px; }
  .footer-guide-links { gap: 16px; }
}

.recommend-rule-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.recommend-rule-card {
  min-height:198px;
  padding:24px 22px 22px;
  border:1px solid #e9ecef;
  border-radius:18px;
  background:#fff;
}
.recommend-rule-card span {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--jp-red,#d83b3b);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.recommend-rule-card span::before {
  content:"";
  width:22px;
  height:1px;
  background:currentColor;
}
.recommend-rule-card h3 {
  margin:18px 0 12px;
  font-size:22px;
  letter-spacing:-.03em;
  color:#1d2731;
}
.recommend-rule-card p {
  margin:0;
  color:#697482;
  font-size:13px;
  line-height:1.8;
}

.recommend-type-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
.recommend-type-card {
  padding:26px 24px 24px;
  border:1px solid #e8ebef;
  border-radius:18px;
  background:#fff;
}
.recommend-type-card small {
  color:var(--jp-red,#d83b3b);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.recommend-type-card h3 {
  margin:14px 0 12px;
  font-size:24px;
  letter-spacing:-.04em;
  color:#17212c;
}
.recommend-type-card p {
  margin:0;
  color:#6a7480;
  font-size:13px;
  line-height:1.8;
}
.recommend-type-card ul {
  margin:18px 0 0;
  padding:16px 0 0 0;
  list-style:none;
  border-top:1px solid #eceff2;
}
.recommend-type-card li {
  position:relative;
  padding-left:14px;
  margin-top:10px;
  color:#4c5660;
  font-size:12px;
  line-height:1.7;
}
.recommend-type-card li::before {
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--jp-red,#d83b3b);
}

.recommend-check-layout {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);
  gap:34px;
  align-items:start;
}
.recommend-check-copy > small {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--jp-red,#d83b3b);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.recommend-check-copy > small::before {
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
}
.recommend-check-copy h2 {
  margin:16px 0 16px;
  font-size:38px;
  line-height:1.2;
  letter-spacing:-.05em;
  color:#18212c;
}
.recommend-check-copy > p {
  margin:0 0 24px;
  color:#697483;
  font-size:14px;
  line-height:1.9;
}
.recommend-link-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.recommend-link-card {
  min-height:188px;
  padding:22px;
  border:1px solid #e8ebef;
  border-radius:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.recommend-link-card small {
  color:#97a0ab;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.recommend-link-card strong {
  margin:13px 0 11px;
  color:#1b2430;
  font-size:22px;
  line-height:1.28;
  letter-spacing:-.04em;
}
.recommend-link-card p {
  margin:0;
  color:#6f7985;
  font-size:12px;
  line-height:1.75;
}
.recommend-link-card span {
  margin-top:auto;
  padding-top:18px;
  color:var(--jp-red,#d83b3b);
  font-size:11px;
  font-weight:900;
}
.recommend-link-card:hover {
  border-color:#e0d7d4;
}

@media (max-width: 980px) {
  .recommend-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .recommend-type-grid { grid-template-columns:1fr; }
  .recommend-check-layout { grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 640px) {
  .recommend-rule-grid,
  .recommend-link-grid { grid-template-columns:1fr; }
  .recommend-rule-card,
  .recommend-type-card,
  .recommend-link-card { padding:20px 18px; }
  .recommend-check-copy h2 { font-size:30px; }
  .recommend-link-card strong { font-size:20px; }
}


/* =========================================================
   v31 FINAL FIX
   - Remove JAPAN GUIDE pill area
   - Keep top menu on a single line on desktop
   - Match recommend hero height with other subpages
   - Use new recommend hero image
   ========================================================= */

/* Desktop header layout: logo + centered menu, no right pill */
.site-header .header-side,
.site-header .header-pill {
  display: none !important;
}

@media (min-width: 1061px) {
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important;
    column-gap: 26px !important;
  }

  .site-header .brand {
    flex: 0 0 auto !important;
  }

  .site-header .brand-copy strong {
    font-size: 19px !important;
  }

  .site-header .brand-copy small {
    font-size: 7px !important;
    letter-spacing: .12em !important;
  }

  .site-header .main-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }

  .site-header .main-nav a {
    white-space: nowrap !important;
    padding: 26px 0 24px !important;
    letter-spacing: -0.01em !important;
  }
}

@media (min-width: 1280px) {
  .site-header .header-inner {
    column-gap: 34px !important;
  }
  .site-header .main-nav {
    gap: 20px !important;
  }
}

/* Mobile/tablet keeps hamburger layout */
@media (max-width: 1060px) {
  .site-header .header-inner {
    grid-template-columns: auto 1fr auto !important;
  }
  .site-header .header-side {
    display: none !important;
  }
}

/* Recommend page hero uses the newly generated image and same height rhythm as other subpages */
.sub-recommend .premium-sub-hero {
  background-image: url('../images/subhero-bg/recommend-bg.png') !important;
  background-size: auto 100% !important;
  background-position: right center !important;
  background-repeat: no-repeat !important;
  background-color: #fff !important;
}

.sub-recommend .sub-hero-shell {
  min-height: 390px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 980px) {
  .sub-recommend .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}

@media (max-width: 720px) {
  .sub-recommend .premium-sub-hero {
    background-size: auto 100% !important;
    background-position: right center !important;
  }
}


/* =========================================================
   v32 HEADER BALANCE FIX
   Restore the original header proportions while supporting 6 menu items.
   ========================================================= */

@media (min-width: 1061px) {
  .site-header .header-inner,
  .home-header .header-inner,
  .home-page .home-header .header-inner {
    width: min(calc(100% - 56px), 1440px) !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 220px minmax(0,1fr) 220px !important;
    align-items: center !important;
    column-gap: 30px !important;
  }

  /* invisible right balance column so the navigation stays truly centered */
  .site-header .header-inner::after,
  .home-header .header-inner::after {
    content: "" !important;
    display: block !important;
    width: 220px !important;
    height: 1px !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .site-header .brand,
  .home-header .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  /* restore original brand typography */
  .site-header .brand-copy strong,
  .home-header .brand-copy strong {
    font-size: 21px !important;
  }
  .site-header .brand-copy small,
  .home-header .brand-copy small {
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }

  .site-header .main-nav,
  .home-header .main-nav,
  .home-page .home-header .main-nav {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0,1fr)) !important;
    align-items: center !important;
    justify-content: initial !important;
    gap: 0 !important;
    font-size: 13px !important;
    min-width: 0 !important;
  }

  .site-header .main-nav a,
  .home-header .main-nav a {
    width: 100% !important;
    text-align: center !important;
    padding: 31px 6px 29px !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
  }

  .site-header .header-side,
  .home-header .header-side,
  .site-header .header-pill,
  .home-header .header-pill {
    display: none !important;
  }
}

@media (max-width: 1060px) {
  .site-header .header-inner::after,
  .home-header .header-inner::after {
    display: none !important;
    content: none !important;
  }
}


/* =========================================================
   v33 - subpage hero paragraph 2 lines + recommend section redesign
   ========================================================= */
@media (min-width: 1061px) {
  .sub-page .sub-hero-copy {
    max-width: 700px !important;
  }
  .sub-page .sub-hero-copy p {
    max-width: 720px !important;
  }
}

/* Recommend final section redesign */
.recommend-process-board {
  display:grid;
  grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);
  gap:26px;
  margin-top:28px;
  padding:34px;
  border:1px solid #e9edf2;
  border-radius:26px;
  background:#fff;
}
.recommend-process-copy small {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--jp-red);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}
.recommend-process-copy small::before {
  content:"";
  width:24px;
  height:1px;
  background:currentColor;
}
.recommend-process-copy h3 {
  margin:18px 0 16px;
  font-size:46px;
  line-height:1.16;
  letter-spacing:-.06em;
  color:#111318;
}
.recommend-process-copy p {
  margin:0;
  color:#637080;
  font-size:14px;
  line-height:1.9;
}
.recommend-process-list {
  border-top:1px solid #edf0f4;
}
.recommend-process-list > div {
  display:grid;
  grid-template-columns:44px 180px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-height:88px;
  border-bottom:1px solid #edf0f4;
}
.recommend-process-list > div span {
  color:var(--jp-red);
  font-size:12px;
  font-weight:900;
}
.recommend-process-list > div strong {
  color:#151e28;
  font-size:15px;
  font-weight:900;
}
.recommend-process-list > div p {
  margin:0;
  color:#5f6a77;
  font-size:13px;
  line-height:1.75;
}

.recommend-related-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}
.recommend-related-card {
  min-height:190px;
  padding:22px;
  border:1px solid #e9edf2;
  border-radius:20px;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.recommend-related-card small {
  color:#98a2ae;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.recommend-related-card strong {
  margin:14px 0 10px;
  color:#131b26;
  font-size:28px;
  line-height:1.25;
  letter-spacing:-.05em;
}
.recommend-related-card p {
  margin:0;
  color:#64707e;
  font-size:13px;
  line-height:1.75;
}
.recommend-related-card span {
  margin-top:auto;
  padding-top:16px;
  color:var(--jp-red);
  font-size:12px;
  font-weight:900;
}
.recommend-related-card:hover { border-color:#e0d7d4; }

@media (max-width: 1180px) {
  .recommend-related-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .recommend-process-copy h3 {
    font-size:38px;
  }
}
@media (max-width: 900px) {
  .recommend-process-board {
    grid-template-columns:1fr;
    padding:24px;
  }
  .recommend-process-list > div {
    grid-template-columns:36px 1fr;
    align-items:start;
    padding:14px 0;
  }
  .recommend-process-list > div p {
    grid-column:2 / 3;
  }
}
@media (max-width: 640px) {
  .recommend-related-grid {
    grid-template-columns:1fr;
  }
  .recommend-process-copy h3 {
    font-size:30px;
  }
  .recommend-related-card strong {
    font-size:22px;
  }
}


/* =========================================================
   v34 - index additional daily picks row
   ========================================================= */
.daily-picks-section {
  padding-top: 8px;
}
.daily-picks-grid .product-visual {
  transform-origin: center center;
}
.daily-picks-grid .product-muhi { transform: scale(1.16); }
.daily-picks-grid .product-pair { transform: scale(1.10); }
.daily-picks-grid .product-jagabee { transform: scale(1.24); }
.daily-picks-grid .product-donbei { transform: scale(1.20); }
.daily-picks-grid .product-nazal { transform: scale(1.26); }


/* =========================================================
   v35 - daily picks product image size fine-tuning
   Only 1st Nazal, 2nd Pair, 4th Donbei are enlarged.
   Aspect ratio is preserved and clipping is avoided.
   ========================================================= */
.daily-picks-grid .shop-product-thumb.image-thumb {
  overflow: hidden;
}
.daily-picks-grid .product-nazal {
  transform: scale(1.42) !important;
}
.daily-picks-grid .product-pair {
  transform: scale(1.28) !important;
}
.daily-picks-grid .product-donbei {
  transform: scale(1.34) !important;
}


/* =========================================================
   v36 - daily picks product image breathing room
   Match the spacing feel of the original popular-products row.
   ========================================================= */
.daily-picks-grid .shop-product-thumb.image-thumb {
  background:#f2f2f2 !important;
  overflow:hidden !important;
}
.daily-picks-grid .product-visual {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  transform-origin:center center !important;
}

/* Give the new row a little more breathing room overall */
.daily-picks-grid .product-muhi { transform:scale(1.04) !important; }
.daily-picks-grid .product-pair { transform:scale(1.03) !important; }
.daily-picks-grid .product-jagabee { transform:scale(1.10) !important; }
.daily-picks-grid .product-donbei { transform:scale(1.08) !important; }
.daily-picks-grid .product-nazal { transform:scale(1.07) !important; }

/* Fine position adjustments */
.daily-picks-grid .product-nazal { object-position:center 52% !important; }
.daily-picks-grid .product-muhi { object-position:center center !important; }


/* =========================================================
   v37 - daily picks image canvas cleanup
   Remove exposed gray strips around scaled product images.
   ========================================================= */
.daily-picks-grid .shop-product-thumb.image-thumb {
  background: #f3f4f5 !important;
  overflow: hidden !important;
}

/* Let every generated image fill the whole thumb canvas.
   The studio background remains edge-to-edge, so no gray band protrudes. */
.daily-picks-grid .shop-product-thumb.image-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
}

/* Fine positioning only — no scale-down that reveals parent background */
.daily-picks-grid .product-muhi   { object-position: center center !important; }
.daily-picks-grid .product-pair   { object-position: center center !important; }
.daily-picks-grid .product-jagabee{ object-position: center center !important; }
.daily-picks-grid .product-donbei { object-position: center center !important; }
.daily-picks-grid .product-nazal  { object-position: center center !important; }





/* =========================================================
   v58 - centered editorial SEO intro
   ========================================================= */
.home-page .index-seo-intro {
  position: relative;
  padding-top: 44px;
  padding-bottom: 10px;
  text-align: center;
}

.home-page .index-seo-kicker {
  display: inline-block;
  margin-bottom: 10px;
  color: #d93f44;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .22em;
}

.home-page .index-seo-intro h1 {
  margin: 0;
  color: #151515;
  font-size: clamp(28px, 2.45vw, 38px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.06em;
}

.home-page .index-seo-intro p {
  max-width: 680px;
  margin: 12px auto 0;
  color: #747b84;
  font-size: 13px;
  line-height: 1.7;
}

.home-page .index-seo-rule {
  display: block;
  width: 34px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #e23b3f;
}

.home-page .index-seo-intro + .shop-section {
  padding-top: 22px !important;
}

@media (max-width: 720px) {
  .home-page .index-seo-intro {
    padding-top: 30px;
    padding-bottom: 6px;
  }

  .home-page .index-seo-kicker {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .home-page .index-seo-intro h1 {
    font-size: 26px;
  }

  .home-page .index-seo-intro p {
    max-width: 92%;
    margin-top: 10px;
    font-size: 12px;
  }

  .home-page .index-seo-rule {
    margin-top: 14px;
  }

  .home-page .index-seo-intro + .shop-section {
    padding-top: 16px !important;
  }
}

/* =========================================================
   v59 - index section heading consistency
   ========================================================= */
.home-page .shop-section-title h2,
.home-page .moment-title h2,
.home-page .home-faq-section .shop-section-title h2 {
  margin: 0 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  letter-spacing: -.05em !important;
  font-weight: 800 !important;
  color: #111 !important;
}

.home-page .section-title-copy > p,
.home-page .moment-title .section-title-copy > p,
.home-page .home-faq-lead {
  margin: 7px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #777 !important;
}

.home-page .shop-section-title,
.home-page .moment-title {
  align-items: flex-end !important;
  margin-bottom: 20px !important;
}

.home-page .home-faq-eyebrow {
  display: block;
  margin-bottom: 7px;
}

@media (max-width: 720px) {
  .home-page .shop-section-title h2,
  .home-page .moment-title h2,
  .home-page .home-faq-section .shop-section-title h2 {
    font-size: 21px !important;
  }

  .home-page .section-title-copy > p,
  .home-page .moment-title .section-title-copy > p,
  .home-page .home-faq-lead {
    font-size: 11px !important;
  }
}











/* =========================================================
   v66 - recommend hero exact final shared dimensions
   ========================================================= */
.sub-recommend .premium-sub-hero {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.sub-recommend .sub-hero-shell {
  min-height: 324px !important;
  height: auto !important;
  max-height: none !important;
}

@media (max-width: 1200px) {
  .sub-recommend .sub-hero-shell {
    min-height: 308px !important;
  }
}

@media (max-width: 980px) {
  .sub-recommend .premium-sub-hero {
    background-size: cover !important;
    background-position: 66% center !important;
  }

  .sub-recommend .sub-hero-shell {
    min-height: 286px !important;
  }
}

@media (max-width: 720px) {
  .sub-recommend .premium-sub-hero {
    background-size: cover !important;
    background-position: 72% center !important;
  }

  .sub-recommend .sub-hero-shell {
    min-height: 232px !important;
  }
}


/* ============================================================
   Added: footer information links + price/medicine CTAs
============================================================ */
.footer-related-info {
  width: min(100%, 660px);
  margin: 0 auto 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-related-info .related-info-panel {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.footer-related-info summary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:7px 12px;
  cursor:pointer;
  list-style:none;
  color:rgba(255,255,255,.82);
  font-size:11px;
  font-weight:800;
}
.footer-related-info summary::-webkit-details-marker { display:none; }
.footer-related-info summary::marker { content:""; }
.footer-related-info .related-info-icon {
  display:inline-flex;
  width:14px;
  height:14px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  font-size:9px;
}
.footer-related-info .related-info-panel[open] .related-info-icon { transform:rotate(45deg); }
.footer-related-info .related-info-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 12px;
  padding:5px 10px 7px;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-related-info .related-info-grid a {
  display:flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 2px;
  color:rgba(255,255,255,.62);
  font-size:10.5px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.footer-related-info .related-info-grid a:hover { color:#fff; }
.footer-related-info .related-info-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  flex:0 0 auto;
}

.shopping-guide-price-cta,
.shopping-medicine-info-inner {
  display:flex;
  justify-content:center;
}
.shopping-guide-price-cta {
  margin-top:24px;
}
.shopping-medicine-info {
  padding: 8px 24px 64px;
}
.shopping-guide-price-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:210px;
  min-height:48px;
  padding:0 24px;
  border-radius:999px;
  background:#111827;
  color:#fff !important;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(17,24,39,.14);
  transition:transform .18s ease, opacity .18s ease;
}
.shopping-guide-price-btn:hover {
  transform:translateY(-2px);
  opacity:.92;
}

@media (max-width:700px) {
  .footer-related-info .related-info-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shopping-guide-price-btn {
    width:100%;
    max-width:320px;
    min-width:0;
  }
}


/* ============================================================
   Shopping guide CTA alignment refinement
============================================================ */
.shopping-guide-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.shopping-guide-main-btn,
.shopping-guide-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.shopping-guide-main-btn {
  background: #ef3f36;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(239,63,54,.18);
}

.shopping-guide-compare-btn {
  background: #111827;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(17,24,39,.14);
}

.shopping-guide-main-btn:hover,
.shopping-guide-compare-btn:hover {
  transform: translateY(-2px);
  opacity: .94;
}

/* Remove obsolete standalone CTA spacing if cached styles remain */
.shopping-guide-price-cta {
  display: none !important;
}

/* ============================================================
   Popular page medicine info CTA
============================================================ */
.popular-medicine-info {
  padding: 26px 24px 56px;
}

.popular-medicine-info-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 14px 36px rgba(17,24,39,.05);
}

.popular-medicine-info-copy span {
  display: block;
  margin-bottom: 8px;
  color: #ef3f36;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.popular-medicine-info-copy h2 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -.03em;
}

.popular-medicine-info-copy p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.7;
}

.popular-medicine-info .shopping-guide-price-btn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .shopping-guide-actions {
    gap: 8px;
  }

  .shopping-guide-main-btn,
  .shopping-guide-compare-btn {
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
  }

  .popular-medicine-info {
    padding: 20px 18px 42px;
  }

  .popular-medicine-info-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }

  .popular-medicine-info-copy h2 {
    font-size: 22px;
  }

  .popular-medicine-info .shopping-guide-price-btn {
    width: 100%;
    max-width: none;
  }
}


/* ============================================================
   Shopping guide - visible compact price comparison link
============================================================ */
.shopping-guide-compare-row {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
  padding: 0 4px;
}

.shopping-guide-compare-row span {
  color: #7a8493;
  font-size: 13px;
  line-height: 1.5;
}

.shopping-guide-compare-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid #d9dee7;
  border-radius: 999px;
  background: #ffffff;
  color: #111827 !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.shopping-guide-compare-row a:hover {
  border-color: #ef3f36;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(17,24,39,.08);
}

@media (max-width: 700px) {
  .shopping-guide-compare-row {
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  .shopping-guide-compare-row span {
    font-size: 12px;
  }

  .shopping-guide-compare-row a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 14px;
    font-size: 12px;
  }
}