:root {
  --teal-950: #034d50;
  --teal-900: #075e61;
  --teal-800: #087d7d;
  --teal-700: #159b96;
  --teal-100: #e8f7f5;
  --teal-050: #f4fbfa;
  --yellow: #f5c84c;
  --ink: #163f42;
  --muted: #617b7c;
  --line: #d7ebe9;
  --surface: #ffffff;
  --surface-alt: #f4fbfa;
  --radius: 18px;
  --shadow: 0 18px 45px rgba(0, 87, 89, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 100;
  padding: 9px 14px;
  border-radius: 0 0 8px 8px;
  color: var(--teal-950);
  background: var(--yellow);
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-140%);
  transition: transform .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--teal-950);
  outline-offset: 2px;
}

/* Header and two-dimension product menu */
.site-header { position: sticky; top: 0; z-index: 30; height: 72px; display: flex; align-items: center; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 105, 105, .1); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 104px; height: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; white-space: nowrap; color: #235557; }
.main-nav > a, .nav-product { position: relative; border: 0; background: transparent; color: inherit; padding: 25px 0 22px; }
.main-nav > a::after, .nav-product::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 15px; height: 2px; background: var(--teal-700); transition: right .25s ease; }
.main-nav > a:hover::after, .main-nav > a.active::after, .nav-product.active::after, .nav-product:hover::after { right: 0; }
.nav-product { display: inline-flex; align-items: center; gap: 7px; }
.nav-product .chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
.nav-product[aria-expanded="true"] .chevron { transform: rotate(225deg) translate(-1px, -1px); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--teal-900); background: transparent; display: grid; place-items: center; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--teal-100); outline: none; }
.icon-btn.search::before { content: ""; width: 14px; height: 14px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: 8px 8px 0 -6.5px currentColor; transform: translate(-2px, -2px); }
.menu-toggle { display: none; }
.mega-menu { position: absolute; inset: 72px 0 auto; background: color-mix(in srgb, var(--surface) 97%, transparent); border-bottom: 1px solid var(--line); box-shadow: 0 18px 38px rgba(0, 80, 82, .12); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.mega-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 30px; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 42px; }
.mega-intro h2 { margin: 0 0 10px; color: var(--teal-900); font-size: 27px; line-height: 1.25; letter-spacing: -.03em; }
.mega-intro p { margin: 0; max-width: 250px; color: var(--muted); font-size: 14px; }
.mega-column h3 { margin: 1px 0 12px; color: var(--teal-900); font-size: 16px; }
.mega-column a { display: block; width: fit-content; margin: 7px 0; color: #2b6869; font-size: 14px; border-bottom: 1px solid transparent; }
.mega-column a:hover, .mega-column a:focus-visible { color: var(--teal-800); border-color: var(--teal-700); outline: none; }
.menu-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.menu-tab { border: 0; background: transparent; color: var(--muted); padding: 7px 4px 9px; font-size: 14px; position: relative; }
.menu-tab.active { color: var(--teal-800); font-weight: 700; }
.menu-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal-700); }
.menu-panel { display: none; }
.menu-panel.active { display: block; }

/* Hero */
.catalog-hero { background: linear-gradient(120deg, var(--teal-050) 0%, #e2f5f2 52%, #d7efec 100%); border-bottom: 1px solid var(--line); }
body[data-page="series-black-gold"] .catalog-hero { position: relative; aspect-ratio: 129 / 32; overflow: hidden; border-bottom-color: #cfe9e4; background: #dff4f0 url("../../images/products/black-gold-top-banner.png") center / 100% 100% no-repeat; }
body[data-page="series-black-gold"] .catalog-hero .hero-grid { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-grid { min-height: 420px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 54px 34px 54px 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--teal-800); font-size: 13px; font-weight: 700; letter-spacing: .08em; margin-bottom: 15px; }
.hero-kicker::before { content: ""; width: 28px; height: 2px; background: var(--yellow); }
.hero-copy h1 { margin: 0; max-width: 12ch; color: var(--teal-950); font-size: clamp(38px, 5vw, 62px); line-height: 1.08; letter-spacing: -.055em; }
.hero-copy p { margin: 17px 0 24px; max-width: 34ch; color: #3f6e70; font-size: 17px; }
.hero-note { display: flex; align-items: center; gap: 12px; color: var(--teal-800); font-size: 13px; }
.hero-note strong { color: var(--teal-950); font-size: 19px; }
.hero-media { min-height: 420px; overflow: hidden; border-radius: 0 0 0 72px; background: #cce9e5; }
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

/* Catalog */
.catalog-section { padding: 76px 0 96px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.section-head h2 { margin: 0; color: var(--teal-900); font-size: clamp(30px, 4vw, 46px); line-height: 1.14; letter-spacing: -.045em; }
.section-head p { margin: 10px 0 0; max-width: 600px; color: var(--muted); font-size: 15px; }
.section-count { color: var(--teal-800); font-size: 14px; font-weight: 700; white-space: nowrap; }
.context-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.context-nav a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; color: #376a6b; background: var(--surface); font-size: 13px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.context-nav a:hover, .context-nav a.active { color: var(--teal-900); border-color: var(--teal-700); background: var(--teal-100); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.form-card .product-image { aspect-ratio: 4 / 3; }
.form-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #748889; font-size: 12px; }
.size-summary { min-height: 42px; margin: 10px 0 0; color: #557273; font-size: 12px; line-height: 1.6; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.product-card:hover { transform: translateY(-6px); border-color: rgba(16, 143, 140, .45); box-shadow: var(--shadow); }
.product-card[data-detail] { cursor: pointer; }
.product-card[data-detail]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.product-image { aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f5fbfa, #e4f3f1); }
.product-image img { width: 100%; height: 100%; display: block; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s ease; }
body[data-page^="products-series-"] .product-image { aspect-ratio: 4 / 3; align-content: center;}
body[data-page="products-all"] .form-card .product-image,
body[data-page^="products-stage-"] .form-card .product-image { aspect-ratio: 4 / 3; align-content: center;}
.product-card:hover .product-image img { transform: scale(1.035); }
.card-body { padding: 18px 19px 20px; }
.series-label { display: inline-flex; align-items: center; min-height: 22px; color: var(--teal-800); font-size: 12px; font-weight: 700; }
.product-card h3 { margin: 6px 0 8px; color: var(--teal-950); font-size: 19px; line-height: 1.35; letter-spacing: -.02em; }
.claim { min-height: 44px; margin: 0 0 11px; color: #557273; font-size: 13px; line-height: 1.55; }
.meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); color: #748889; font-size: 12px; }
.meta-type { color: var(--teal-800); font-weight: 700; }
.card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--teal-800); font-size: 13px; font-weight: 700; }
.card-link span { transition: transform .2s ease; }
.card-link:hover span { transform: translateX(3px); }
.empty-state { padding: 48px 24px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--muted); }

/* Product Page content blocks */
.selection-guide { padding: 72px 0 84px; background: var(--surface-alt); border-top: 1px solid var(--line); }
.selection-guide h2 { margin: 0; color: var(--teal-900); font-size: clamp(28px, 4vw, 42px); line-height: 1.15; letter-spacing: -.04em; }
.selection-guide > .container > p { max-width: 720px; margin: 14px 0 28px; color: var(--muted); font-size: 16px; }
.selection-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.selection-points > div { padding: 20px; border-top: 3px solid var(--yellow); background: var(--surface); }
.selection-points strong { display: block; margin-bottom: 7px; color: var(--teal-900); font-size: 16px; }
.selection-points span { color: var(--muted); font-size: 13px; line-height: 1.6; }
.story-grid { display: grid; grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr)); gap: 16px; }
.story-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.story-card:first-child { grid-row: span 2; }
.story-card img { width: 100%; height: 100%; min-height: 240px; display: block; object-fit: cover; }
.story-card figcaption { padding: 11px 14px 13px; color: var(--teal-900); font-size: 13px; font-weight: 700; }
.size-list.large { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 26px; padding: 0; list-style: none; }
.size-list.large li { padding: 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--surface-alt); font-size: 13px; }
.size-list.large li strong { display: block; margin-bottom: 4px; color: var(--teal-800); font-size: 17px; }
.subheading { margin: 30px 0 0; color: var(--teal-900); font-size: 21px; }
.related-links { display: grid; gap: 9px; margin-top: 16px; }
.related-links a { color: var(--teal-800); font-size: 13px; font-weight: 700; }
.related-links a:hover { text-decoration: underline; }
.menu-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Footer */
.site-footer { padding: 52px 0 22px; color: rgba(237, 255, 253, .82); background: #075b5f; }
.footer-main { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 42px; padding-bottom: 34px; }
.footer-brand img { width: 112px; filter: brightness(0) invert(1); }
.footer-brand p { margin: 15px 0 0; max-width: 250px; color: rgba(237, 255, 253, .7); font-size: 13px; }
.footer-col h3 { margin: 3px 0 11px; color: var(--yellow); font-size: 14px; }
.footer-col a { display: block; margin: 6px 0; color: rgba(237, 255, 253, .72); font-size: 13px; }
.footer-col a:hover { color: white; }
.footer { margin-top: 18px; padding: 18px 16px 6px; border-top: 1px solid rgba(236,255,253,.2); color: rgba(236,255,253,.88); font-size: 11px; line-height: 1.9; text-align: center; overflow-wrap: anywhere; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: #f5c84c; text-decoration: underline; }
.footer .brand_link { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; white-space: nowrap; }
.footer .brand_link img { display: inline-block; width: 14px; height: 18px; }
.footer a[href*="recordcode"] { margin-left: 8px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid rgba(237, 255, 253, .18); color: rgba(237, 255, 253, .58); font-size: 11px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 14px; }

/* Entry motion with reduced-motion fallback */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

@media (prefers-color-scheme: dark) {
  :root { --surface: #0f2f31; --surface-alt: #12383a; --ink: #e7f7f5; --muted: #a2c3c2; --line: #28585a; --teal-050: #12383a; --teal-100: #1a4547; --teal-950: #e8fbf8; --teal-900: #b8efea; }
  .site-header { background: rgba(15, 47, 49, .94); }
  .main-nav, .mega-column a { color: #c0dedc; }
  .mega-menu { background: rgba(15, 47, 49, .98); }
  .catalog-hero { background: linear-gradient(120deg, #123b3d, #174447); }
  .hero-copy p, .section-head p { color: #a5c5c4; }
  .product-image { background: linear-gradient(145deg, #1a4546, #214f50); }
  .product-image img { mix-blend-mode: normal; }
  .product-card { background: #12383a; }
  .meta { color: #9bbdbc; }
}

@media (max-width: 1024px) {
  .container, .mega-inner { width: min(100% - 36px, 920px); }
  .main-nav { gap: 18px; font-size: 14px; }
  .product-grid { gap: 18px; }
  .footer-main { gap: 26px; }
}
@media (max-width: 767px) {
  .container, .mega-inner { width: calc(100% - 32px); }
  .site-header { height: 64px; }
  .site-header .brand img { width: 92px; }
  .site-header .main-nav { position: absolute !important; inset: 64px 0 auto !important; display: none; flex-direction: column; align-items: stretch; gap: 0; height: calc(100vh - 64px) !important; height: calc(100svh - 64px) !important; max-height: none !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)) !important; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px rgba(0, 80, 82, .1); }
  .main-nav { scrollbar-width: thin; scrollbar-color: #72aaa7 transparent; }
  .main-nav::-webkit-scrollbar { width: 8px; }
  .main-nav::-webkit-scrollbar-track { background: rgba(215, 236, 234, .42); }
  .main-nav::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #72aaa7; background-clip: padding-box; }
  .main-nav.open { display: flex; }
  .main-nav > * { flex: 0 0 auto; }
  .main-nav > a, .nav-product { padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .main-nav > a::after, .nav-product::after { bottom: -1px; }
  .header-actions { margin-left: auto; }
  .menu-toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--teal-100); color: var(--teal-900); }
  .mega-menu { position: static; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); }
  .mega-menu.open { display: block; }
  .mega-inner { display: block; padding: 18px 0 20px; }
  .mega-intro { padding-bottom: 16px; }
  .mega-intro h2 { font-size: 22px; }
  .mega-intro p { max-width: none; font-size: 13px; }
  .mega-column { margin-top: 16px; }
  .hero-grid { min-height: auto; display: block; }
  .hero-copy { padding: 40px 0 34px; }
  .hero-copy h1 { max-width: 15ch; font-size: 43px; }
  .hero-copy p { font-size: 16px; }
  .hero-media { min-height: 270px; border-radius: 42px 0 0 0; }
  .catalog-section { padding: 54px 0 70px; }
  .section-head { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 22px; }
  .section-head h2 { font-size: 34px; }
  .product-grid { grid-template-columns: 1fr; gap: 18px; }
  .selection-guide { padding: 54px 0 64px; }
  .selection-points { grid-template-columns: 1fr; gap: 12px; }
  .story-grid { grid-template-columns: 1fr; gap: 12px; }
  .story-card:first-child { grid-row: auto; }
  .story-card img { min-height: 220px; }
  .size-list.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card h3 { font-size: 18px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: start; flex-direction: column; gap: 12px; }
  .footer { margin-top: 16px; padding: 16px 8px 2px; font-size: 10px; line-height: 2; }
  .footer a:not(.brand_link) { white-space: nowrap; }
}

/* Product detail pages
   Keep the hero visual compact so the product story and key facts remain visible in the first viewport. */
.detail-breadcrumb { padding: 18px 0 0; color: var(--muted); font-size: 13px; }
.product-detail-breadcrumb { padding: 18px 0 0; background: var(--surface-alt); }
.product-detail-breadcrumb .detail-breadcrumb { padding-top: 0; }
.product-detail-breadcrumb + .detail-section { padding-top: 44px; }
.complete-detail-image { margin-top: 28px; }
.detail-breadcrumb a { color: var(--teal-800); font-weight: 700; }
.detail-breadcrumb span { margin: 0 7px; color: #8ca5a5; }
.detail-hero { padding: 10px 0 0; background: linear-gradient(120deg, var(--teal-050) 0%, #e2f5f2 52%, #d7efec 100%); border-bottom: 1px solid var(--line); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(300px, .85fr); gap: 44px; align-items: center; max-width: 1080px; margin: 0 auto; }
.detail-copy { padding: 8px 0; }
.detail-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 13px; color: var(--teal-800); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.detail-kicker::before { content: ""; width: 24px; height: 2px; background: var(--yellow); }
.detail-copy h1 { max-width: 12ch; margin: 0; color: var(--teal-950); font-size: clamp(36px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -.05em; }
.detail-claim { max-width: 34ch; margin: 15px 0 18px; color: #3f6e70; font-size: 17px; line-height: 1.5; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.detail-meta span { padding: 6px 10px; border: 1px solid rgba(8,125,125,.2); border-radius: 999px; color: var(--teal-800); background: rgba(255,255,255,.68); font-size: 12px; font-weight: 700; }
.review-status { display: inline-flex; align-items: flex-start; gap: 9px; max-width: 430px; padding: 11px 13px; border-radius: 12px; color: #6f6d52; background: #fff9df; font-size: 12px; line-height: 1.5; }
.review-status strong { display: block; margin-bottom: 2px; color: var(--teal-900); font-size: 13px; }
.review-mark { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--teal-900); background: var(--yellow); font-weight: 800; }
.packshot-stage { position: relative; min-height: 340px; max-height: 380px; display: grid; place-items: center; overflow: hidden; border-radius: 24px 24px 56px 24px; background: rgba(255,255,255,.78); box-shadow: 0 16px 36px rgba(0,92,94,.12); }
.packshot-stage::before { content: ""; position: absolute; width: 190px; height: 190px; right: -70px; top: -80px; border-radius: 50%; background: rgba(245,200,76,.36); }
.packshot-stage::after { content: ""; position: absolute; width: 130px; height: 130px; left: -50px; bottom: -60px; border-radius: 50%; background: rgba(21,155,150,.16); }
.packshot-stage img { position: relative; z-index: 1; display: block; width: min(78%, 390px); height: min(78%, 320px); max-width: 390px; max-height: 320px; object-fit: contain; mix-blend-mode: multiply; }
.packshot-caption { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; padding: 7px 10px; border-radius: 9px; color: var(--teal-900); background: rgba(255,255,255,.9); font-size: 11px; }
.detail-section { padding: 64px 0; }
.detail-section.alt { background: var(--teal-050); }
.detail-section-head { max-width: 700px; margin-bottom: 26px; }
.detail-section-head h2 { margin: 0; color: var(--teal-900); font-size: clamp(28px, 3.5vw, 42px); line-height: 1.14; letter-spacing: -.04em; }
.detail-section-head p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.feature-card h3 { margin: 0 0 8px; color: var(--teal-900); font-size: 18px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.story-grid { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.story-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); align-self: start; }
.story-card:first-child { grid-row: span 2; }
.story-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; min-height: 0; display: block; object-fit: cover; object-position: center top; }
.story-card:first-child img { aspect-ratio: 3 / 4; }
.story-card figcaption { padding: 10px 12px 12px; color: var(--teal-900); font-size: 12px; font-weight: 700; }
.story-card figcaption strong { display: block; }
.story-card figcaption span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.image-transcript { margin: 0 12px 12px; border-top: 1px solid var(--line); }
.image-transcript summary { display: list-item; padding: 10px 2px 4px; color: var(--teal-800); font-size: 12px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.image-transcript summary::marker { color: var(--yellow); }
.image-transcript summary:hover { color: var(--teal-950); }
.image-transcript summary:focus-visible { border-radius: 5px; outline: 3px solid var(--yellow); outline-offset: 2px; }
.image-transcript[open] summary { margin-bottom: 4px; }
.transcript-body { padding: 7px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.transcript-body h3 { margin: 0 0 5px; color: var(--teal-900); font-size: 13px; }
.transcript-body p { margin: 3px 0; }
.transcript-body .transcript-status { display: inline-block; margin: 0 0 4px; padding: 2px 6px; border-radius: 4px; color: #765d16; background: #fff5c9; font-size: 11px; }
.transcript-body .transcript-note { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11px; }
.info-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 44px; align-items: start; }
.info-copy h2 { margin: 0 0 12px; color: var(--teal-900); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.14; letter-spacing: -.04em; }
.info-copy > p { max-width: 65ch; margin: 0 0 14px; color: #456768; font-size: 15px; line-height: 1.65; }
.size-list.large { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 18px 0 24px; padding: 0; list-style: none; }
.size-list.large li { padding: 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--surface-alt); font-size: 13px; }
.size-list.large li strong { display: block; margin-bottom: 3px; color: var(--teal-800); font-size: 16px; }
.subheading { margin: 26px 0 0; color: var(--teal-900); font-size: 20px; }
.size-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.size-card h3 { margin: 0 0 9px; color: var(--teal-900); font-size: 18px; }
.size-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.related-links { display: grid; gap: 8px; margin-top: 14px; }
.related-links a { color: var(--teal-800); font-size: 13px; font-weight: 700; }
.related-links a:hover { text-decoration: underline; }
.howto-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.howto-step { padding: 16px; border-radius: 13px; background: var(--teal-050); }
.howto-step strong { display: block; margin-bottom: 5px; color: var(--teal-800); font-size: 13px; }
.howto-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.detail-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 26px; border-radius: 18px; background: #075b5f; color: #effffc; }
.detail-footer-cta h2 { margin: 0; color: #fff; font-size: 24px; }
.detail-footer-cta p { margin: 5px 0 0; color: rgba(237,255,253,.74); font-size: 13px; }
.detail-footer-cta a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; color: var(--teal-900); background: var(--yellow); font-size: 12px; font-weight: 800; transition: transform .2s ease; }
.detail-footer-cta a:hover { transform: translateY(-1px); }

@media (prefers-color-scheme: dark) {
  .detail-hero { background: linear-gradient(120deg, #123b3d, #174447); }
  .detail-copy h1, .detail-section-head h2, .info-copy h2 { color: var(--teal-900); }
  .detail-claim, .info-copy > p { color: #a5c5c4; }
  .detail-meta span { background: rgba(18,56,58,.78); }
  .packshot-stage { background: #174447; }
  .packshot-stage img, .story-card img { mix-blend-mode: normal; }
  .packshot-caption { color: #063538; background: rgba(233,255,251,.9); }
  .feature-card, .story-card, .size-card { background: #12383a; }
  .feature-card p, .size-list.large li, .size-card p { color: #a2c3c2; }
  .size-list.large li { background: #174447; }
  .review-status { background: #4b421e; }
  .review-status, .review-status strong { color: #e0d49a; }
}

@media (max-width: 1024px) {
  .detail-hero-grid { gap: 30px; }
  .packshot-stage { min-height: 320px; }
}

@media (max-width: 767px) {
  .detail-breadcrumb { padding-top: 14px; }
  .detail-hero { padding: 16px 0 38px; }
  .detail-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-copy h1 { font-size: 42px; }
  .detail-claim { font-size: 16px; }
  .packshot-stage { min-height: 270px; max-height: 300px; border-radius: 20px 20px 48px 20px; }
  .packshot-stage img { width: min(82%, 300px); height: min(82%, 250px); max-width: 300px; max-height: 250px; }
  .detail-section { padding: 52px 0; }
  .feature-grid, .howto-grid { grid-template-columns: 1fr; gap: 11px; }
  .story-grid { grid-template-columns: 1fr; gap: 11px; }
  .story-card:first-child { grid-row: auto; }
  .story-card img, .story-card:first-child img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .info-layout { grid-template-columns: 1fr; gap: 26px; }
  .size-list.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-footer-cta { align-items: flex-start; flex-direction: column; padding: 20px; }
}

/* Product detail stream
   Every product page mirrors an e-commerce detail flow: image assets run
   edge-to-edge in one column, and all explanatory copy follows below. */
.story-grid.story-grid--stacked { display: block; }
.story-image-stack {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
}
.story-image {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface);
}
.story-image + .story-image { border-top: 0; }
.story-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}
@media (min-width: 1025px) {
  .story-image-stack {
    width: 50%;
    margin-inline: auto;
  }
  .story-text-stack--match-images {
    width: 50%;
    margin-inline: auto;
  }
}
.story-text-stack {
  padding: 4px 0 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.story-text-item {
  margin: 0;
  padding: 24px 24px 26px;
}
.story-text-item + .story-text-item { border-top: 1px solid var(--line); }
.story-text-item h3 {
  margin: 0;
  color: var(--teal-900);
  font-size: 20px;
  line-height: 1.3;
}
.story-text-summary {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.story-text-item .image-transcript {
  margin: 14px 0 0;
}
.story-text-item .transcript-body {
  max-width: 72ch;
}
.structured-details h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 7px;
  color: var(--teal-900);
  font-size: 15px;
  line-height: 1.45;
}
.structured-details h3:first-child { margin-top: 4px; }
.structured-details h3::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--yellow);
  content: "";
}
.structured-details p {
  margin: 0 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
.structured-details p + p { margin-top: 8px; }

/* DOCX-backed product detail copy. The table remains semantic HTML on all
   viewports, while the mobile layout stacks each title and explanation so
   long Chinese copy never forces a tiny, horizontally-scrolling table. */
.product-detail-copy { padding: 24px 0 28px; }
.product-detail-copy-disclosure {
  margin: 0 24px;
  border-top: 1px solid var(--line);
}
.product-detail-copy-disclosure summary {
  display: list-item;
  padding: 14px 2px;
  color: var(--teal-900);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  list-style-position: inside;
}
.product-detail-copy-disclosure summary::marker { color: var(--yellow); }
.product-detail-copy-disclosure summary:hover { color: var(--teal-800); }
.product-detail-copy-disclosure summary:focus-visible {
  border-radius: 5px;
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.product-detail-copy-disclosure[open] summary { margin-bottom: 2px; }
.product-detail-copy-disclosure[open] .product-detail-copy-table-wrap {
  padding-bottom: 4px;
}
.product-detail-copy-table-wrap { overflow-x: auto; }
.product-detail-copy-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.7;
}
.product-detail-copy-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.product-detail-copy-table th,
.product-detail-copy-table td {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}
.product-detail-copy-table tbody th {
  color: var(--teal-900);
  background: color-mix(in srgb, var(--teal-050) 72%, var(--surface));
  font-weight: 800;
}
.product-detail-copy-table tbody td { color: var(--muted); }
.product-detail-copy-table th,
.product-detail-copy-table td { overflow-wrap: anywhere; }
.product-detail-copy-table tbody tr:first-child th,
.product-detail-copy-table tbody tr:first-child td { border-top: 0; }
.product-detail-copy-table tbody tr:hover th,
.product-detail-copy-table tbody tr:hover td { background: color-mix(in srgb, var(--teal-100) 62%, var(--surface)); }
.site-header .main-nav .product-menu-home a {
  display: block;
  width: fit-content;
  margin: 7px 0;
  padding: 0;
  border-bottom: 0;
  text-align: left;
}
.site-header .main-nav .product-menu-home a::after { display: none; }
@media (min-width: 768px) {
  .product-detail-copy-table { table-layout: fixed; }
  .product-detail-copy-table col:first-child { width: 33.333%; }
}
@media (prefers-color-scheme: dark) {
  .story-image-stack,
  .story-image,
  .story-text-stack { background: #12383a; }
  .product-detail-copy-table { background: #12383a; }
  .product-detail-copy-table tbody th { color: #d5efeb; background: #174447; }
  .product-detail-copy-table tbody td { color: #a7c6c4; }
  .product-detail-copy-table tbody tr:hover th,
  .product-detail-copy-table tbody tr:hover td { background: #1d4b4d; }
}
@media (max-width: 767px) {
  .story-image-stack { border-radius: 14px 14px 0 0; }
  .story-text-stack { border-radius: 0 0 14px 14px; }
  .story-text-item { padding: 20px 16px 22px; }
  .product-detail-copy { padding: 20px 0 22px; }
  .product-detail-copy-disclosure { margin: 0 16px; }
  .product-detail-copy-table,
  .product-detail-copy-table tbody,
  .product-detail-copy-table tr,
  .product-detail-copy-table th,
  .product-detail-copy-table td { display: block; }
  .product-detail-copy-table tr { border-top: 1px solid var(--line); }
  .product-detail-copy-table tbody tr:first-child { border-top: 0; }
  .product-detail-copy-table th,
  .product-detail-copy-table td { width: auto !important; padding: 12px 16px; border-top: 0; }
  .product-detail-copy-table tbody th { padding-bottom: 4px; }
  .product-detail-copy-table tbody td { padding-top: 0; padding-bottom: 15px; }
  .site-header .main-nav .product-menu-home a {
    width: 100%;
    margin: 0;
    padding: 10px 4px;
    border-bottom: 1px solid #edf5f4;
  }
}

/* Black Gold Pants V3.6
   The approved National UJ product assets are not present in the workspace.
   These styles provide an honest branded nameplate without reusing retired
   product imagery. */
.product-image--nameplate {
  padding: 26px;
  color: #f2ead7;
  background:
    linear-gradient(145deg, rgba(183, 143, 45, .2), transparent 44%),
    #1b1b1a;
}
.product-nameplate {
  width: min(100%, 260px);
  display: grid;
  gap: 7px;
  text-align: left;
}
.product-nameplate span {
  color: #c9b67e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.product-nameplate strong {
  color: #f3efe4;
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.product-nameplate small {
  color: #d1c39a;
  font-size: 12px;
  font-weight: 700;
}

.black-gold-pants-page {
  color: #24231f;
  background: #f6f5f1;
}
.black-gold-pants-page .site-header {
  border-bottom-color: rgba(73, 65, 44, .14);
  background: rgba(246, 245, 241, .94);
}
.black-gold-pants-page .main-nav,
.black-gold-pants-page .mega-column a { color: #4e493d; }
.black-gold-pants-page .main-nav > a::after,
.black-gold-pants-page .nav-product::after { background: #b58b2a; }
.black-gold-pants-page .mega-menu {
  border-bottom-color: #ded9cc;
  background: rgba(246, 245, 241, .98);
  box-shadow: 0 18px 38px rgba(45, 40, 28, .12);
}
.black-gold-pants-page .mega-intro h2,
.black-gold-pants-page .mega-column h3 { color: #28261f; }
.black-gold-pants-page .black-gold-pants-hero {
  min-height: calc(100dvh - 72px);
  padding: 18px 0 42px;
  border-bottom-color: #d8d1bf;
  background:
    radial-gradient(circle at 78% 18%, rgba(181, 139, 42, .15), transparent 28%),
    linear-gradient(135deg, #f6f5f1 0%, #ece9e1 58%, #dfd9ca 100%);
}
.black-gold-pants-page .black-gold-pants-hero .detail-hero-grid {
  min-height: calc(100dvh - 150px);
}
.black-gold-pants-page .detail-breadcrumb,
.black-gold-pants-page .detail-breadcrumb span { color: #746e60; }
.black-gold-pants-page .detail-breadcrumb a,
.black-gold-pants-page .detail-kicker,
.black-gold-pants-page .related-links a { color: #765a19; }
.black-gold-pants-page .detail-kicker::before { background: #b58b2a; }
.black-gold-pants-page .detail-copy h1,
.black-gold-pants-page .detail-section-head h2,
.black-gold-pants-page .info-copy h2,
.black-gold-pants-page .size-card h3 { color: #24231f; }
.black-gold-pants-page .detail-claim,
.black-gold-pants-page .detail-section-head p,
.black-gold-pants-page .info-copy > p,
.black-gold-pants-page .size-card p { color: #625d50; }
.black-gold-pants-page .detail-meta span {
  border-color: rgba(118, 90, 25, .24);
  color: #664d16;
  background: rgba(246, 245, 241, .76);
}
.black-gold-pants-page .review-status {
  color: #534521;
  background: #eee5ca;
}
.black-gold-pants-page .review-status strong { color: #3f3419; }
.black-gold-pants-page .review-mark {
  color: #262116;
  background: #d8b95c;
}
.content-update {
  margin: 13px 0 0;
  color: #756e5f;
  font-size: 12px;
}
.black-gold-pants-page .packshot-stage--nameplate {
  min-height: 370px;
  max-height: 420px;
  color: #f2ead7;
  background:
    linear-gradient(145deg, rgba(192, 151, 50, .22), transparent 44%),
    #1b1b1a;
  box-shadow: 0 22px 48px rgba(50, 43, 26, .2);
}
.black-gold-pants-page .packshot-stage--nameplate::before {
  width: 230px;
  height: 230px;
  right: -92px;
  top: -94px;
  background: rgba(194, 151, 43, .2);
}
.black-gold-pants-page .packshot-stage--nameplate::after {
  width: 170px;
  height: 170px;
  left: -76px;
  bottom: -84px;
  background: rgba(217, 192, 126, .08);
}
.hero-nameplate {
  position: relative;
  z-index: 1;
  width: min(78%, 410px);
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 34px;
  border: 1px solid rgba(226, 200, 126, .3);
  border-radius: 18px;
  background: rgba(37, 35, 30, .74);
  box-shadow: inset 0 1px 0 rgba(246, 235, 205, .12);
}
.hero-nameplate img {
  width: 92px;
  height: auto;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}
.hero-nameplate span {
  color: #cdbd91;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hero-nameplate strong {
  color: #f3efe4;
  font-size: clamp(31px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.hero-nameplate b {
  color: #d9b95c;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.1;
}
.hero-nameplate small {
  margin-top: 9px;
  color: #cdbd91;
  font-size: 13px;
  font-weight: 700;
}
.black-gold-pants-page .packshot-caption {
  color: #302a1d;
  background: rgba(239, 230, 204, .94);
}
.black-gold-pants-page .detail-section { background: #f6f5f1; }
.black-gold-pants-page .detail-section.alt { background: #ebe8df; }
.black-gold-spec-layout { max-width: 900px; }
.spec-table-wrap {
  overflow: hidden;
  border: 1px solid #d6cfbd;
  border-radius: 18px;
  background: #f9f8f4;
  box-shadow: 0 16px 38px rgba(49, 43, 28, .08);
}
.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  color: #39362e;
  font-size: 15px;
}
.product-spec-table caption {
  padding: 18px 22px;
  color: #29271f;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
}
.product-spec-table thead { background: #e8e1cf; }
.product-spec-table th,
.product-spec-table td {
  padding: 14px 22px;
  border-top: 1px solid #ded8c9;
  text-align: left;
}
.product-spec-table thead th {
  border-top: 0;
  color: #5b4a22;
  font-size: 12px;
  letter-spacing: .04em;
}
.product-spec-table tbody th { color: #6b5219; }
.spec-summary {
  margin: 0;
  padding: 15px 22px 18px;
  color: #665f50;
  background: #f1eee6;
  font-size: 13px;
}
.black-gold-pants-page .feature-grid--scope { grid-template-columns: 1.15fr 1fr 1fr; }
.black-gold-pants-page .feature-card {
  border-color: #d7cfba;
  background: #f7f5ef;
}
.black-gold-pants-page .feature-card:first-child { border-top: 3px solid #b58b2a; }
.black-gold-pants-page .feature-card h3 { color: #2c2a23; }
.black-gold-pants-page .feature-card p { color: #686151; }
.wearing-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: wearing-step;
}
.wearing-steps li {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d8d1bf;
  border-radius: 14px;
  background: #efede6;
  counter-increment: wearing-step;
}
.wearing-steps li::before {
  content: counter(wearing-step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: #8b6a1d;
  font-size: 12px;
  font-weight: 800;
}
.wearing-steps strong {
  display: block;
  color: #302d25;
  font-size: 15px;
}
.wearing-steps p {
  margin: 6px 0 0;
  color: #686151;
  font-size: 13px;
  line-height: 1.65;
}
.black-gold-pants-page .size-card {
  border-color: #d8d1bf;
  background: #f9f8f4;
  box-shadow: 0 16px 38px rgba(49, 43, 28, .08);
}
.black-gold-pants-page .detail-footer-cta { background: #25231e; }
.black-gold-pants-page .detail-footer-cta p { color: #c9c2b1; }
.black-gold-pants-page .detail-footer-cta a {
  color: #272218;
  background: #d8b95c;
}
.black-gold-pants-page .site-footer { background: #25231e; }
.black-gold-pants-page .footer-col h3 { color: #d8b95c; }

@media (prefers-color-scheme: dark) {
  .product-image--nameplate { background: linear-gradient(145deg, rgba(198, 157, 56, .18), transparent 44%), #1c1b18; }
  .black-gold-pants-page { color: #eeeadd; background: #191815; }
  .black-gold-pants-page .site-header { background: rgba(25, 24, 21, .95); }
  .black-gold-pants-page .main-nav,
  .black-gold-pants-page .mega-column a { color: #d2cbb9; }
  .black-gold-pants-page .mega-menu { background: rgba(25, 24, 21, .98); border-bottom-color: #4a4437; }
  .black-gold-pants-page .mega-intro h2,
  .black-gold-pants-page .mega-column h3 { color: #eeeadd; }
  .black-gold-pants-page .black-gold-pants-hero { background: radial-gradient(circle at 78% 18%, rgba(181, 139, 42, .15), transparent 28%), linear-gradient(135deg, #1b1a17, #23211c 58%, #2c281f); border-bottom-color: #4a4437; }
  .black-gold-pants-page .detail-copy h1,
  .black-gold-pants-page .detail-section-head h2,
  .black-gold-pants-page .info-copy h2,
  .black-gold-pants-page .size-card h3 { color: #eeeadd; }
  .black-gold-pants-page .detail-claim,
  .black-gold-pants-page .detail-section-head p,
  .black-gold-pants-page .info-copy > p,
  .black-gold-pants-page .size-card p { color: #bdb5a2; }
  .black-gold-pants-page .detail-meta span { color: #e2cf97; background: rgba(47, 43, 34, .8); border-color: #605338; }
  .black-gold-pants-page .detail-section { background: #191815; }
  .black-gold-pants-page .detail-section.alt { background: #22201b; }
  .spec-table-wrap,
  .black-gold-pants-page .feature-card,
  .black-gold-pants-page .size-card { border-color: #4a4437; background: #25231e; }
  .product-spec-table { color: #ded8c8; }
  .product-spec-table caption,
  .black-gold-pants-page .feature-card h3,
  .wearing-steps strong { color: #eeeadd; }
  .product-spec-table thead { background: #332f27; }
  .product-spec-table th,
  .product-spec-table td { border-top-color: #4a4437; }
  .product-spec-table thead th,
  .product-spec-table tbody th { color: #d8b95c; }
  .spec-summary { color: #bdb5a2; background: #211f1a; }
  .black-gold-pants-page .feature-card p,
  .wearing-steps p { color: #bdb5a2; }
  .wearing-steps li { border-color: #4a4437; background: #25231e; }
}

@media (max-width: 767px) {
  .black-gold-pants-page .black-gold-pants-hero { min-height: auto; padding-bottom: 34px; }
  .black-gold-pants-page .black-gold-pants-hero .detail-hero-grid { min-height: auto; }
  .black-gold-pants-page .detail-copy h1 { font-size: 40px; }
  .black-gold-pants-page .packshot-stage--nameplate { min-height: 310px; max-height: 340px; }
  .hero-nameplate { width: min(86%, 360px); padding: 26px; }
  .hero-nameplate strong { font-size: 34px; }
  .black-gold-pants-page .feature-grid--scope,
  .wearing-steps { grid-template-columns: 1fr; }
  .product-spec-table th,
  .product-spec-table td { padding: 12px 16px; }
  .product-spec-table caption,
  .spec-summary { padding-right: 16px; padding-left: 16px; }
}