/*
Theme Name: Gujuan
Theme URI: http://43.162.83.243/
Author: Gujuan Studio
Description: A quiet, image-led theme for public-domain Chinese books and paintings — white paper, one red accent, large plates.
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: gujuan
*/

:root {
  --ink: #222222;
  --ink-2: #444444;
  --muted: #777777;
  --faint: #9a9a9a;
  --line: #e8e8e8;
  --paper: #ffffff;
  --paper-2: #f8f8f8;
  --paper-3: #f2f2f2;
  --red: #e60013;
  --red-deep: #bb1313;
  --max: 1180px;
  --gap: 28px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .01em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.head-in {
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  height: 66px; display: flex; align-items: center; gap: 34px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 38px; height: 38px; border: 2px solid var(--red); border-radius: 50%;
  display: grid; place-items: center; color: var(--red);
  font-size: 17px; font-weight: 600; letter-spacing: 0;
  line-height: 1; flex: none;
}
.brand-mark span { transform: translateY(-1px); }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: .06em; }
.brand-sub { display: block; font-size: 10px; letter-spacing: .14em; color: var(--faint); font-weight: 400; margin-top: -2px; }

.nav { display: flex; align-items: center; gap: 26px; font-size: 13.5px; color: var(--ink-2); }
.nav a { color: var(--ink-2); }
.nav a:hover { color: var(--red); }
.nav .sep { width: 1px; height: 14px; background: var(--line); }

.head-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.head-right a { color: var(--ink-2); }
.head-right .cart-link { display: inline-flex; align-items: center; gap: 6px; }
.cart-count {
  min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px;
}

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-plate {
  height: clamp(320px, 46vw, 560px);
  overflow: hidden; background: var(--paper-3); position: relative;
}
.hero-plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.96); }
.hero-plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.55) 62%, #fff 100%);
}
.hero-cap {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
  max-width: var(--max); margin: 0 auto; padding: 0 24px;
  font-size: 11.5px; color: #6a6a6a; letter-spacing: .04em;
}
.hero-text {
  max-width: var(--max); margin: -86px auto 0; padding: 0 24px 8px; position: relative; z-index: 4;
}
.hero-eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--red);
  margin: 0 0 14px;
}
.hero-title {
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.24; font-weight: 600;
  letter-spacing: -.01em; margin: 0 0 16px; max-width: 20em;
}
.hero-lede { font-size: 16px; color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 2px; font-size: 13.5px; letter-spacing: .02em;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
  transition: .18s ease;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-red { border-color: var(--red); background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }

/* ---------- section headings ---------- */
.sec { padding: 64px 0 0; }
.sec-head { display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 30px; }
.sec-title { font-size: 19px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.sec-note { font-size: 12px; color: var(--faint); letter-spacing: .04em; margin: 0; }
.sec-more { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.sec-more:hover { color: var(--red); }

/* ---------- values (three columns) ---------- */
.values { padding: 60px 0 8px; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 46px; }
.value h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 10px;
  padding-left: 12px; position: relative;
}
.value h3::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 3px; height: 13px; background: var(--red);
}
.value p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.85; }

/* ---------- category chips ---------- */
.cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.chip {
  font-size: 12.5px; padding: 7px 14px; border: 1px solid var(--line); color: var(--ink-2);
  border-radius: 2px; background: #fff;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.on { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) 26px; }
.card { display: block; position: relative; }
.card .plate {
  position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3;
}
.card .plate img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.card:hover .plate img { transform: scale(1.035); }
.card .plate .ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.card .meta { padding: 13px 2px 0; }
.card .name {
  font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .sub { font-size: 11.5px; color: var(--faint); letter-spacing: .03em; margin: 0 0 8px; }
.card .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.card .price { color: var(--red); font-weight: 600; letter-spacing: .01em; }
.card .more { opacity: 0; transition: .2s; color: var(--ink); font-size: 12px; }
.card:hover .more { opacity: 1; }

/* ---------- product single ---------- */
.woocommerce div.product { display: block; }
.psingle { padding: 54px 0 0; }
.wc-single { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: start; }
.wc-single .plate-box { background: var(--paper-2); }
.wc-single .plate-box img { width: 100%; height: auto; }

.product-title, .wc-single h1 {
  font-size: clamp(23px, 2.6vw, 33px); line-height: 1.3; font-weight: 600; margin: 0 0 10px;
}
.woocommerce-product-details__short-description { font-size: 14px; color: var(--ink-2); margin-bottom: 22px; }
.price, .woocommerce-Price-amount {
  color: var(--red); font-weight: 600;
}
.woocommerce div.product .summary .price { font-size: 24px; margin: 0 0 18px; }

/* quantity + button */
.woocommerce div.product form.cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.woocommerce .quantity input.qty {
  width: 64px; padding: 10px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 14px; text-align: center;
}
.single_add_to_cart_button, .button, .woocommerce button.button, .woocommerce a.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; background: var(--red); color: #fff; border: 1px solid var(--red);
  border-radius: 2px; font-size: 13.5px; letter-spacing: .04em; cursor: pointer;
  transition: .18s;
}
.single_add_to_cart_button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover {
  background: var(--red-deep); border-color: var(--red-deep); color: #fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .checkout-button {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important;
}
.woocommerce a.button.alt:hover, .checkout-button:hover { background: #000 !important; }

/* trust rows */
.ps-meta { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 18px; display: grid; gap: 10px; }
.ps-meta div { display: flex; gap: 12px; font-size: 12.5px; color: var(--muted); }
.ps-meta b { color: var(--ink-2); font-weight: 600; min-width: 104px; }

/* tabs / long description */
.woocommerce-tabs { margin-top: 56px; border-top: 1px solid var(--line); }
.woocommerce-tabs ul.tabs { display: flex; gap: 30px; margin: 0; padding: 16px 0 0; list-style: none; }
.woocommerce-tabs ul.tabs li { font-size: 13px; }
.woocommerce-tabs ul.tabs li a { color: var(--muted); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom: 2px solid var(--red); padding-bottom: 10px; }
.woocommerce-Tabs-panel { padding: 28px 0 0; }
.woocommerce-Tabs-panel h3 { font-size: 15px; margin: 30px 0 10px; font-weight: 600; }
.woocommerce-Tabs-panel p { font-size: 14px; color: var(--ink-2); }
.woocommerce-Tabs-panel em { color: var(--muted); font-style: normal; display: block; }

/* look inside gallery */
.look-inside { margin: 0 0 30px; }
.look-inside .li-cap { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; }
.look-inside figure { margin: 0 0 10px; border: 1px solid var(--line); background: #fff; }
.look-inside figure img { width: 100%; height: auto; }
.look-inside.art-full figure img { max-height: 78vh; object-fit: contain; background: var(--paper-2); }
.look-inside .li-note { font-size: 11.5px; color: var(--faint); }
.art-details { list-style: none; padding: 0; margin: 0 0 8px; border-top: 1px solid var(--line); }
.art-details li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.art-details b { min-width: 110px; color: var(--faint); font-weight: 400; letter-spacing: .04em; }
.ed-notes { margin-top: 26px; padding: 20px 22px; background: var(--paper-2); border-left: 3px solid var(--red); }
.ed-notes h3 { margin-top: 0 !important; }
.ed-notes p { font-size: 13px !important; }

/* ---------- shop / archive ---------- */
.shop-head { padding: 46px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.shop-head h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.shop-head p { font-size: 14px; color: var(--muted); margin: 0; max-width: 46em; }
.woocommerce-result-count, .woocommerce-ordering { font-size: 12.5px; color: var(--muted); }
.woocommerce-ordering select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; font-size: 12.5px; background: #fff; }
ul.products { display: grid !important; gap: var(--gap) 26px; margin: 0 !important; padding: 0 !important; list-style: none; }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product { margin: 0 !important; width: auto !important; float: none !important; }
ul.products li.product a img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 12px !important; background: var(--paper-2); }
ul.products li.product .woocommerce-loop-product__title { font-size: 14.5px !important; font-weight: 600 !important; padding: 0 !important; line-height: 1.45; }
ul.products li.product .price { font-size: 13px !important; color: var(--red) !important; margin: 6px 0 0 !important; }
ul.products li.product .button { display: none; }

/* ---------- cart / checkout / forms ---------- */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce, .woocommerce-account .woocommerce { padding: 48px 0 0; }
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: 0; font-size: 13.5px; }
.woocommerce table.shop_table th { background: var(--paper-2); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  padding: 12px 12px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; background: #fff;
}
.woocommerce form .form-row label { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
#customer_details h3, .woocommerce-billing-fields h3 { font-size: 16px; font-weight: 600; }
#order_review_heading { font-size: 16px; font-weight: 600; }
.woocommerce-checkout #payment { background: var(--paper-2); border-radius: 2px; }
#place_order { width: 100%; padding: 15px; font-size: 14px; letter-spacing: .06em; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border: 1px solid var(--line); border-top: 3px solid var(--red);
  background: var(--paper-2); font-size: 13.5px; padding: 14px 18px;
}

/* ---------- content pages ---------- */
.page-head { padding: 54px 0 10px; }
.page-head h1 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; margin: 0; }
.entry { padding: 26px 0 10px; }
.entry p { font-size: 14.5px; color: var(--ink-2); margin: 0 0 16px; }
.entry h2, .entry h3 { font-size: 17px; font-weight: 600; margin: 34px 0 12px; }
.entry ul, .entry ol { padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.entry a { color: var(--red); }

/* ---------- footer ---------- */
.site-foot { margin-top: 84px; border-top: 1px solid var(--line); background: var(--paper-2); }
.foot-in { max-width: var(--max); margin: 0 auto; padding: 46px 24px 34px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.foot-brand .brand-name { font-size: 15px; }
.foot-brand p { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; max-width: 26em; line-height: 1.8; }
.foot-col h4 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0 0 12px; }
.foot-col a { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.foot-col a:hover { color: var(--red); }
.foot-rule { border-top: 1px solid var(--line); margin: 30px 0 16px; }
.foot-end { display: flex; gap: 18px; font-size: 11.5px; color: var(--faint); flex-wrap: wrap; }
.foot-end span { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .grid, ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .wc-single { grid-template-columns: 1fr; gap: 32px; }
  .value-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
}
@media (max-width: 620px) {
  .grid, ul.products { grid-template-columns: 1fr !important; }
  .head-in { height: 58px; gap: 14px; }
  .hero-text { margin-top: -60px; }
  .sec { padding-top: 44px; }
  .foot-grid { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
}

/* print & selection niceties */
::selection { background: rgba(230,0,19,.14); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  font-size: 12.5px; color: var(--muted); padding: 8px 12px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--red); }

/* ---------- WooCommerce default layout, restrained ---------- */
.wc-body { padding-top: 6px; }
.woocommerce div.product { overflow: hidden; }
.woocommerce div.product div.images {
  width: 49% !important; float: left !important; margin: 0 0 34px;
  background: var(--paper-2);
}
.woocommerce div.product div.images img { width: 100%; }
.woocommerce div.product div.summary { width: 47% !important; float: right !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .product_meta { clear: both; }
.woocommerce div.product .related h2,
.woocommerce div.product .upsells h2 { font-size: 17px; font-weight: 600; margin: 40px 0 18px; }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; margin: 8px 0 0; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px; }

/* star rating, kept quiet */
.star-rating span::before, .star-rating::before { color: var(--red); }
.woocommerce div.product .woocommerce-product-rating { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.woocommerce-review-link { color: var(--muted); font-size: 12px; }

/* related grid */
ul.products li.product .woocommerce-loop-product__link { display: block; }
ul.products li.product .onsale {
  position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff;
  font-size: 10.5px; letter-spacing: .08em; padding: 3px 8px; margin: 0; min-height: 0;
  border-radius: 2px; line-height: 1.6;
}

/* cart */
.woocommerce-cart table.cart img { width: 68px; }
.woocommerce table.shop_table td { padding: 14px 12px; }
.woocommerce .cart_totals h2, .woocommerce #order_review_heading { font-size: 16px; font-weight: 600; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 15px; letter-spacing: .06em; }

/* checkout */
.woocommerce-checkout form.checkout { display: block; }
.woocommerce-checkout #customer_details { margin-bottom: 34px; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 50%; float: left; }
.woocommerce-checkout #customer_details .col-2 { padding-left: 26px; }
.woocommerce-checkout #order_review { clear: both; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0 0 10px; border: 0; }
.woocommerce-checkout #payment ul.payment_methods li { font-size: 13.5px; padding: 8px 0; }
.woocommerce-checkout #payment div.payment_box { background: #fff; font-size: 12.5px; color: var(--muted); box-shadow: none; }

/* account */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 190px; float: left; border-right: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { padding: 9px 0; font-size: 13px; }
.woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 220px); }

/* guest-friendly checkout note */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 18px; }

@media (max-width: 900px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; float: none !important; }
  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; padding-left: 0; }
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; border: 0; }
}

/* counters under the hero */
.stats { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 46px 0 0; }
.stat { flex: 1 1 0; padding: 20px 6px 22px; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .num { display: block; font-size: 22px; font-weight: 600; letter-spacing: .04em; color: var(--ink); line-height: 1.2; }
.stat .lab { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* section grid */
.sections { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.section-card { display: block; background: #fff; padding: 26px 22px 24px; text-decoration: none; color: var(--ink); transition: background .18s ease; }
.section-card:hover { background: var(--paper-2); }
.section-card .sc-zh { display: block; font-size: 18px; font-weight: 600; letter-spacing: .12em; line-height: 1.35; }
.section-card .sc-en { display: block; margin-top: 7px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.section-card .sc-n { display: block; margin-top: 14px; font-size: 12px; color: var(--red); letter-spacing: .04em; }

/* index of titles */
.index-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.index-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f1f1; font-size: 13.5px; }
.index-list a { color: var(--ink); text-decoration: none; }
.index-list a:hover { color: var(--red); }
.idx-price { color: var(--red); font-size: 12.5px; white-space: nowrap; }

@media (max-width: 900px) {
  .sections { grid-template-columns: repeat(2, 1fr); }
  .index-list { columns: 1; }
  .stats { flex-wrap: wrap; }
  .stat { flex: 1 0 33.333%; border-left: 0 !important; }
}

@media (max-width: 620px) {
  .sections { grid-template-columns: 1fr; }
  .stat { flex: 1 0 50%; }
}

/* ============================================================
   v2 refinements — portrait plates, archive chips, a nav strip
   that survives on a phone.
   ============================================================ */

/* Book jackets are portrait. Cropping them into a landscape box
   cut the titles off, so the plate keeps a 3:4 window and the
   artwork sits inside it whole. */
.card .plate { aspect-ratio: 3 / 4; }
.card .plate img { object-fit: contain; }
.card { transition: transform .18s ease; }
.card:hover { transform: translateY(-2px); }
.card .price { font-size: 13px; }

ul.products li.product a img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  padding: 6px;
}

/* Sub-sections as a quiet chip row, the way the front page lists them. */
.cat-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.cat-subnav a {
  border: 1px solid var(--line); padding: 6px 12px;
  font-size: 12px; letter-spacing: .02em; color: var(--ink-2);
}
.cat-subnav a:hover { border-color: var(--red); color: var(--red); }
.cat-subnav a.on { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Archive rows: sort and count sit out of the way. */
.woocommerce-products-header { margin: 0; }
.woocommerce-products-header h1 { display: none; }
.woocommerce-result-count { margin: 0 0 8px; }
.woocommerce-ordering { margin: 0 0 24px; }

/* Single product: the plate gets a paper mount, the price some air. */
.woocommerce div.product div.images { background: var(--paper-2); padding: 16px; }
.woocommerce div.product .summary .price { font-size: 26px; }
.woocommerce div.product .summary .price .woocommerce-Price-currencySymbol {
  font-size: 17px; vertical-align: 2px;
}
.woocommerce div.product .summary .price small,
.woocommerce div.product .summary .price del { font-size: 13px; color: var(--faint); }
.look-inside figure { box-shadow: 0 1px 0 rgba(0,0,0,.04); }

/* Phone: the menu becomes a horizontal strip instead of disappearing. */
@media (max-width: 1000px) {
  .head-in { height: auto; padding: 11px 24px 0; flex-wrap: wrap; gap: 10px 18px; }
  .nav {
    display: flex; order: 3; width: 100%;
    overflow-x: auto; gap: 20px; padding: 4px 0 11px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: 12.5px; }
  .head-right { order: 2; margin-left: auto; gap: 14px; }
}


/* ============================================================
   v3 — sample pages as a plate row, a firmer buy button, a
   quieter breadcrumb.
   ============================================================ */

/* Three sample pages side by side read as a spread; stacked they
   were a long scroll on a phone. */
.look-inside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 30px;
}
.look-inside .li-cap { grid-column: 1 / -1; margin: 0 0 2px; }
.look-inside .li-note { grid-column: 1 / -1; margin: 4px 0 0; }
.look-inside figure { margin: 0; }
.look-inside figure img { display: block; width: 100%; height: auto; }

@media (max-width: 700px) {
  .look-inside { grid-template-columns: 1fr; gap: 12px; }
}

/* Buy: one deliberate button, full width of the summary column. */
.woocommerce div.product form.cart { display: block; margin: 0 0 20px; }
.woocommerce div.product form.cart .quantity { margin: 0 10px 10px 0; display: inline-block; vertical-align: middle; }
.woocommerce div.product form.cart button.single_add_to_cart_button {
  width: 100%; padding: 16px 22px; font-size: 13.5px; letter-spacing: .14em;
  text-transform: uppercase; background: var(--red); border: 1px solid var(--red); color: #fff;
  margin: 0;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: var(--red-deep); border-color: var(--red-deep);
}
.woocommerce div.product .summary .price { border-bottom: 1px solid var(--line); padding-bottom: 16px; }

/* Breadcrumb: small caps, no box. */
.woocommerce-breadcrumb {
  font-size: 11.5px !important; letter-spacing: .06em; color: var(--faint) !important;
  margin: 0 0 18px !important; text-transform: uppercase;
}
.woocommerce-breadcrumb a { color: var(--muted) !important; }
.woocommerce-breadcrumb a:hover { color: var(--red) !important; }

/* Meta table on the product page: tighter rows, hairline rules. */
.ps-meta { gap: 0; }
.ps-meta div { padding: 9px 0; border-bottom: 1px solid #f1f1f1; align-items: baseline; }
.ps-meta div:last-child { border-bottom: 0; }

/* Archive: keep two plates per row on a phone instead of one long column. */
@media (max-width: 620px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 14px; }
  ul.products li.product .woocommerce-loop-product__title { font-size: 13px !important; }
}

/* Catalogue line under each card in the archive. */
.loop-blurb {
  font-size: 11.5px; line-height: 1.62; color: var(--muted);
  margin: 6px 0 4px; letter-spacing: .01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-head .count-note { display: inline-block; margin-left: 6px; color: var(--red); }

/* Footer: the line that closes the page, in the manner of the reference site. */
.foot-thanks { margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.foot-thanks .ft-zh {
  display: block; font-size: 15px; letter-spacing: .3em; color: var(--ink); margin-bottom: 8px;
}
.foot-thanks .ft-en { display: block; font-size: 12px; color: var(--muted); letter-spacing: .02em; max-width: 46em; line-height: 1.8; }

/* 404 */
.nf-zh { font-size: 15px; letter-spacing: .18em; color: var(--red) !important; margin: 0 0 14px !important; }

/* Specification table on the product page: a hairline ledger. */
.ps-specs {
  margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ps-specs div {
  display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f4f4f4;
  font-size: 12.5px; line-height: 1.55;
}
.ps-specs div:last-child { border-bottom: 0; }
.ps-specs dt {
  flex: 0 0 92px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px;
  padding-top: 2px;
}
.ps-specs dd { margin: 0; color: var(--ink-2); }

/* Page count on the cards, so a shelf says how thick the books are. */
.card .pp { color: var(--faint); font-size: 11.5px; letter-spacing: .02em; }

/* ---------- v4 - a western rare-book-shop finish ----------
   Serif headings over a quiet grotesque body, more air, softer
   cards, and a near-black call to action so the vermilion reads
   as an accent rather than a shout. */
body { font-size: 15px; line-height: 1.72; }

.hero-title, .shop-head h1, .page-head h1, .section-title, h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", "Noto Serif", serif;
  font-weight: 400;
  letter-spacing: -.012em;
}
.hero-title { font-size: clamp(32px, 4.8vw, 56px); line-height: 1.18; max-width: 18em; }
.hero-lede { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); max-width: 32em; }
.hero-plate { height: clamp(360px, 52vw, 640px); }
.hero-text { margin-top: -104px; }

.section-title, .shop-head h1 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 10px; }

.card { background: #fff; border: 1px solid #ececec; border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(17,17,17,.08); }
.card .name { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: 15.5px; line-height: 1.35; }

ul.products li.product { transition: transform .28s ease, box-shadow .28s ease; }
ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(17,17,17,.08); }

.btn-red, .single_add_to_cart_button {
  background: #14110f; border-color: #14110f; color: #fff;
  letter-spacing: .12em;
}
.btn-red:hover, .single_add_to_cart_button:hover { background: #000; border-color: #000; }
.btn { border-radius: 2px; padding: 12px 26px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }

.price, .card .price { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hero-eyebrow, .li-cap { letter-spacing: .26em; }