/*
Theme Name:   SEVETTE Child
Theme URI:    http://186.244.215.245:8086/
Description:  SEVETTE — 女装轻奢视觉系统（Storefront 子主题）。象牙白 / 香槟金 / 墨黑；Cormorant Garamond 标题 + Jost 正文；极简单行居中 Logo 页头；无边框无圆角图片主导卡片。
Author:       SEVETTE
Author URI:   http://186.244.215.245:8086/
Template:     storefront
Version:      1.2.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sevette-child
Tags:         e-commerce, light-luxe, editorial
*/

/* =========================================================================
   SEVETTE — VISUAL SYSTEM
   1.  Web fonts (self-hosted, woff2 — variable)
   2.  Design tokens
   3.  Base + typography
   4.  Layout containers
   5.  Header (single row / centred logo / nav split)
   6.  Mobile navigation + search
   7.  Hero + editorial sections
   8.  Product cards (borderless, radiusless, shadowless)
   9.  Single product
   10. Buttons
   11. Price / meta
   12. Forms, tables, notices
   13. Footer
   14. Responsive
   15. Colophon standards (policy links + contact row)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. WEB FONTS — self-hosted woff2, relative to this stylesheet
   Both families ship as VARIABLE fonts on Google Fonts, so a single file per
   subset covers every requested weight via a weight-range @font-face:
     Cormorant Garamond  wght 300..700   -> covers 300 / 400 / 600
     Jost                wght 100..900   -> covers 300 / 400 / 500
   ------------------------------------------------------------------------- */

/* Cormorant Garamond — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Jost — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/jost-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jost — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/jost-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------------------- */

:root {
  /* --- brand palette (hard spec) --- */
  --brand-bg: #FAF7F2;      /* 象牙白 ivory  */
  --brand-accent: #C9A96A;  /* 香槟金 champagne gold */
  --brand-ink: #1A1A1A;     /* 墨黑 ink */
  --font-head: "Cormorant Garamond", serif;
  --font-body: "Jost", sans-serif;

  /* --- derived --- */
  --sv-ink-soft: #5A5751;        /* secondary copy */
  --sv-ink-faint: #8C877E;       /* meta / captions */
  --sv-hairline: rgba(26, 26, 26, .10);
  --sv-surface: #FFFFFF;
  --sv-surface-alt: #F3EFE8;     /* slightly deeper ivory for panels */
  --sv-accent-soft: rgba(201, 169, 106, .14);

  /* --- metrics --- */
  --sv-max: 1440px;              /* editorial canvas */
  --sv-measure: 46rem;           /* readable text column */
  --sv-gutter: 2.6rem;
  --sv-header-pad: 2.6rem;       /* generous header whitespace */
  --sv-section: 7rem;

  /* --- motion --- */
  --sv-ease: cubic-bezier(.22, .61, .36, 1);
  --sv-dur: .45s;

  --sv-rule: 1px solid var(--sv-hairline);
}

/* -------------------------------------------------------------------------
   3. BASE + TYPOGRAPHY
   ------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;      /* guard: nothing may create a horizontal scrollbar */
}

body { overflow-x: hidden; }

body,
body.storefront-align-wide,
.woocommerce-active body {
  background-color: var(--brand-bg) !important;
  color: var(--brand-ink);
  font-family: var(--font-body) !important;
  font-weight: 300;
  font-size: .9375rem;      /* 15px body — small, refined */
  line-height: 1.85;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* headings — Cormorant, large, light, tracking wide-ish */
h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .product_title,
.woocommerce-loop-product__title,
.widget-title, .entry-title {
  font-family: var(--font-head) !important;
  font-weight: 400;
  font-style: normal;
  color: var(--brand-ink);
  line-height: 1.14;
  letter-spacing: .005em;
  text-transform: none;
  margin-top: 0;
}

h1, .entry-title { font-size: clamp(2rem, 4.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.35rem, 2.3vw, 1.95rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.12rem; }
h6 { font-size: 1rem; }

p, li, td, th, dd, dt, blockquote, label {
  font-family: var(--font-body);
  font-weight: 300;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
  transition: color var(--sv-dur) var(--sv-ease),
              opacity var(--sv-dur) var(--sv-ease);
}
a:hover,
a:focus { color: var(--brand-accent); }

strong, b { font-weight: 500; }

img {
  border-radius: 0 !important;   /* no rounding anywhere — editorial */
  box-shadow: none !important;
}

/* the small uppercase label used across the theme */
.sv-eyebrow,
.woocommerce-breadcrumb,
.sv-meta {
  font-family: var(--font-body);
  font-size: .6875rem;            /* 11px */
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
}

.sv-eyebrow { display: block; margin: 0 0 1.4rem; }

blockquote {
  border-left: 1px solid var(--brand-accent);
  padding-left: 2rem;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--sv-ink-soft);
}

hr, .sv-rule {
  border: 0;
  border-top: var(--sv-rule);
  margin: 3rem 0;
}

::selection { background: var(--brand-accent); color: var(--brand-ink); }

/* -------------------------------------------------------------------------
   4. LAYOUT CONTAINERS
   ------------------------------------------------------------------------- */

.col-full,
.site-content > .col-full,
.storefront-breadcrumb > .col-full {
  max-width: var(--sv-max);
  margin-left: auto;
  margin-right: auto;
}

.site-content { padding-top: 0; background: transparent; }

#content.site-content { margin-top: 0; }

/* The sidebar is removed in functions.php, so let the content column out to
   the full canvas instead of leaving Storefront's dead 26% column behind. */
#primary.content-area,
.content-area,
.site-main {
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}

/* Storefront paints its own page background on #page / body */
#page,
.site,
.hfeed.site { background-color: var(--brand-bg) !important; }

/* kill Storefront widget chrome (borders) */
.widget,
.widget-area .widget,
#secondary .widget {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 0 2.6rem;
  margin-bottom: 2.6rem;
}

.widget-title {
  font-size: 1.05rem;
  letter-spacing: .06em;
  margin-bottom: 1.1rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.widget ul { list-style: none; margin-left: 0; padding-left: 0; }
.widget ul li {
  border-bottom: var(--sv-rule);
  padding: .7rem 0;
  font-size: .8125rem;
  letter-spacing: .04em;
}

/* -------------------------------------------------------------------------
   5. HEADER — 极简单行 / Logo 居中 / 导航分开两侧 / 大留白
   ------------------------------------------------------------------------- */

.site-header,
#masthead.site-header {
  background: var(--brand-bg) !important;
  border: 0 !important;
  border-bottom: var(--sv-rule) !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
  z-index: 500;
}

/* Storefront's two stacked rows are replaced by one grid row */
.sv-header__bar {
  display: grid;
  /* minmax(0,1fr) lets the side columns shrink below their content width,
     so an over-long nav can never push the wordmark off centre. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  max-width: var(--sv-max);
  margin: 0 auto;
  padding: var(--sv-header-pad) var(--sv-gutter);
  transition: padding var(--sv-dur) var(--sv-ease);
}

.sv-nav {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sv-nav--left  { justify-self: start; }
.sv-nav--right { justify-self: end; }

/* The header row contains real <button> elements (menu + search toggles).
   WooCommerce styles a bare `button` with a dark slate background, so reset
   every control in the row explicitly. Scoped to .sv-header__bar so it cannot
   interfere with the search form's submit button in the panel below. */
.sv-header__bar button,
.sv-header__bar .button,
.sv-nav__link,
.sv-nav__toggle {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand-ink) !important;
  text-shadow: none !important;
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sv-nav__list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.sv-nav__list li { margin: 0; padding: 0; border: 0; }

/* Only the first few categories ride in the desktop bar — the rest live in
   the mobile drawer. Keeps the single row genuinely minimal and guarantees
   the centred wordmark never collides with a link. */
.sv-nav__extra { display: none; }

.sv-nav__list a,
.sv-nav__link {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: .6875rem;          /* 11px */
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  padding: .35rem 0;
  white-space: nowrap;
}

/* hairline underline that grows on hover */
.sv-nav__list a::after,
.sv-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brand-accent);
  transition: width var(--sv-dur) var(--sv-ease);
}
.sv-nav__list a:hover::after,
.sv-nav__list a:focus::after,
.sv-nav__link:hover::after,
.sv-nav__link:focus::after,
.sv-nav__list .current-menu-item > a::after,
.sv-nav__list .current_page_item > a::after { width: 100%; }

.sv-nav__list a:hover,
.sv-nav__link:hover { color: var(--brand-ink); }

/* ----- centred wordmark ----- */
.sv-brand {
  justify-self: center;
  text-align: center;
  line-height: 1;
}

.sv-brand__link,
.sv-brand .site-title a,
.sv-brand .site-title {
  font-family: var(--font-head) !important;
  font-size: clamp(1.7rem, 2.6vw, 2.35rem);
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;            /* optically re-centre tracked caps */
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0;
  display: inline-block;
}
.sv-brand__link:hover { color: var(--brand-ink); opacity: .72; }

.sv-brand img {
  max-height: 62px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.sv-brand__tagline {
  display: block;
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 300;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
  margin-top: .7rem;
}

/* ----- right-side utilities ----- */
.sv-utils {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-cart-link {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}
.sv-cart-count {
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--brand-accent);
}

/* mobile menu toggle — hidden on desktop */
.sv-nav__toggle {
  display: none;
  background: transparent !important;
  border: 0 !important;
  padding: .5rem !important;
  cursor: pointer;
  margin-left: -.5rem;
}
.sv-nav__toggle-bars {
  display: block;
  position: relative;
  width: 20px;
  height: 1px;
  background: var(--brand-ink);
}
.sv-nav__toggle-bars::before,
.sv-nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--brand-ink);
}
.sv-nav__toggle-bars::before { top: -6px; }
.sv-nav__toggle-bars::after  { top: 6px; }

/* compact sticky-on-scroll look */
.sv-header--compact .sv-header__bar { padding: 1.5rem var(--sv-gutter); }

/* search disclosure panel */
.sv-search-panel {
  display: none;
  border-top: var(--sv-rule);
  background: var(--brand-bg);
}
.sv-header--search-open .sv-search-panel { display: block; }
.sv-search-panel .col-full { padding-top: 2.4rem; padding-bottom: 2.4rem; }

/* -------------------------------------------------------------------------
   6. SEARCH FORM + forms
   ------------------------------------------------------------------------- */

.woocommerce-product-search,
.search-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}

.woocommerce-product-search input[type="search"],
.search-form input[type="search"],
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="number"],
input[type="date"], textarea, select {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--brand-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sv-hairline);
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: .95em .2em;
  width: 100%;
  transition: border-color var(--sv-dur) var(--sv-ease);
}
.woocommerce-product-search input[type="search"]:focus,
.search-form input[type="search"]:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-bottom-color: var(--brand-accent);
}

.input-text::placeholder,
input::placeholder { color: var(--sv-ink-faint); letter-spacing: .08em; }

select {
  border: 0;
  border-bottom: 1px solid var(--sv-hairline);
  padding: .8em .2em;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.woocommerce-product-search button,
.search-form button,
button[type="submit"].search-submit {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--brand-accent) !important;
  border-radius: 0 !important;
  color: var(--brand-ink) !important;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 0 1.4rem !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sv-dur) var(--sv-ease),
              color var(--sv-dur) var(--sv-ease);
}
.woocommerce-product-search button:hover,
.search-form button:hover {
  background: var(--brand-accent) !important;
  color: var(--brand-ink) !important;
}

/* -------------------------------------------------------------------------
   7. HERO + EDITORIAL SECTIONS
   ------------------------------------------------------------------------- */

.sv-hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--sv-max);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, var(--sv-section)) var(--sv-gutter);
}

.sv-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--sv-surface-alt);
  aspect-ratio: 4 / 5;
}
.sv-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--sv-ease);
}
.sv-hero:hover .sv-hero__media img { transform: scale(1.03); }

.sv-hero__title {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 1.8rem;
}
.sv-hero__text {
  max-width: 30rem;
  color: var(--sv-ink-soft);
  font-size: .9375rem;
  margin-bottom: 2.6rem;
}

.sv-section {
  max-width: var(--sv-max);
  margin: 0 auto;
  padding: var(--sv-section) var(--sv-gutter);
}
.sv-section--alt { background: var(--sv-surface-alt); max-width: none; }
.sv-section--alt > .sv-section__inner {
  max-width: var(--sv-max);
  margin: 0 auto;
}

.sv-section__head {
  text-align: center;
  margin-bottom: 3.6rem;
}
.sv-section__head h2 { margin: 0 0 .8rem; }
.sv-section__head p {
  color: var(--sv-ink-soft);
  font-size: .875rem;
  max-width: var(--sv-measure);
  margin: 0 auto;
}

/* category tiles */
.sv-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
}
.sv-cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sv-surface-alt);
  aspect-ratio: 4 / 5;
}
.sv-cat-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--sv-ease);
}
.sv-cat-tile:hover img { transform: scale(1.045); }
.sv-cat-tile__label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.2rem 1.6rem;
  background: linear-gradient(to top, rgba(26,26,26,.5), rgba(26,26,26,0));
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.3rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

/* editorial split (image + copy) */
.sv-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.sv-split__media { overflow: hidden; background: var(--sv-surface-alt); aspect-ratio: 1 / 1; }
.sv-split__media img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   8. PRODUCT CARDS — 无边框 / 无圆角 / 无阴影 / 图片主导
   ------------------------------------------------------------------------- */

ul.products,
.woocommerce ul.products,
ul.products li.product,
.woocommerce ul.products li.product,
.products .product {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

ul.products li.product,
.woocommerce ul.products li.product {
  padding: 0 0 1.6rem !important;
  margin: 0 0 2.8rem !important;
  text-align: center;
  position: relative;
  overflow: visible;
}

/* --- image --- */
ul.products li.product a img,
.woocommerce ul.products li.product a img,
.woocommerce-loop-product__link img {
  width: 100%;
  height: auto;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 1.5rem !important;
  transition: transform 1.1s var(--sv-ease),
              opacity var(--sv-dur) var(--sv-ease);
}

.woocommerce-loop-product__link {
  display: block;
  overflow: hidden;
  position: relative;
  /* no background: this element wraps image + title + price, so painting it
     would band the whole card. Whitespace alone separates the cards. */
  background: transparent;
}
.woocommerce-loop-product__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-ink);
  opacity: 0;
  transition: opacity var(--sv-dur) var(--sv-ease);
  pointer-events: none;
}
.woocommerce-loop-product__link:hover::after { opacity: .035; }
.woocommerce-loop-product__link:hover img { transform: scale(1.04); }

/* --- title --- */
ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-head) !important;
  font-size: 1.3rem !important;
  font-weight: 400;
  letter-spacing: .035em;
  color: var(--brand-ink);
  padding: 0 !important;
  margin: 0 0 .5rem !important;
  line-height: 1.3;
}

/* --- category / meta line under the name --- */
ul.products li.product .sv-card-cat {
  display: block;
  font-family: var(--font-body);
  font-size: .625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
  margin-bottom: .55rem;
}

/* --- add-to-cart on cards: quiet outline --- */
ul.products li.product .button,
ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button {
  margin-top: 1.1rem;
}

/* sale flash — a bare gold label pinned to the image, no badge bubble.
   Storefront leaves this at position:relative, which drags it down into the
   price row; pin it to the top-left of the product link instead. */
.woocommerce span.onsale,
ul.products li.product span.onsale {
  position: absolute !important;
  background: transparent !important;
  color: var(--brand-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  width: auto !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  top: 1rem !important;
  left: 1rem !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5;
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* rating stars — gold outlines, no filled blobs */
.star-rating span::before,
.star-rating::before { color: var(--brand-accent); }

/* -------------------------------------------------------------------------
   9. SINGLE PRODUCT
   ------------------------------------------------------------------------- */

.single-product div.product {
  border: 0 !important;
  box-shadow: none !important;
}

.single-product div.product .product_title,
.product_title.entry-title {
  font-size: clamp(2rem, 3.4vw, 2.5rem) !important;   /* 32–40px */
  letter-spacing: .02em;
  line-height: 1.12;
  margin: 0 0 1rem;
}

.single-product div.product .summary { padding-left: clamp(1.5rem, 4vw, 4rem); }

.single-product div.product .woocommerce-product-details__short-description {
  font-size: .9375rem;
  color: var(--sv-ink-soft);
  line-height: 1.9;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: var(--sv-rule);
}

/* product gallery — calm, no borders, no background plate */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery img,
.flex-control-thumbs img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.woocommerce-product-gallery { background: transparent !important; }
.flex-control-thumbs { margin-top: 1rem; }
.flex-control-thumbs li { margin: 0 .5rem 0 0 !important; width: 21% !important; }

/* quantity */
.woocommerce .quantity input.qty,
.single-product div.product .quantity .qty {
  border: 0 !important;
  border-bottom: 1px solid var(--sv-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: .06em;
  text-align: center;
  width: 4.2em;
  padding: .85em .3em;
}

/* tabs */
.woocommerce-tabs ul.tabs {
  padding: 0 !important;
  margin: 0 0 3rem !important;
  border-bottom: var(--sv-rule);
  text-align: center;
}
.woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: inline-block;
  margin: 0 1.6rem !important;
  padding: 0 !important;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
  padding: 1.2rem 0 !important;
  border-bottom: 1px solid transparent;
  transition: color var(--sv-dur) var(--sv-ease),
              border-color var(--sv-dur) var(--sv-ease);
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--brand-ink);
  border-bottom-color: var(--brand-accent);
}
.woocommerce-Tabs-panel { border: 0; padding: 0; max-width: var(--sv-measure); margin: 0 auto; }
.woocommerce-Tabs-panel h2 {
  font-size: 1.6rem;
  margin: 0 0 1.2rem;
}

/* the eight specification blocks */
.woocommerce-Tabs-panel table,
.shop_attributes table,
.woocommerce-product-attributes {
  border: 0 !important;
  border-collapse: collapse;
  font-size: .8125rem;
}
.shop_attributes th,
.shop_attributes td,
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: 0 !important;
  border-bottom: var(--sv-rule) !important;
  background: transparent !important;
  padding: 1rem .4rem !important;
  font-weight: 300;
  letter-spacing: .04em;
}
.shop_attributes th { color: var(--sv-ink-faint); text-transform: uppercase; font-size: .6875rem; letter-spacing: .16em; }

.woocommerce-product-details__short-description h3,
.woocommerce-Tabs-panel h3 {
  font-size: 1.3rem;
  margin: 2.2rem 0 .7rem;
}

/* related / upsell */
.related.products,
.upsells.products {
  border-top: var(--sv-rule);
  padding-top: var(--sv-section);
  margin-top: var(--sv-section);
}
.related.products > h2,
.upsells.products > h2 {
  text-align: center;
  margin-bottom: 3rem;
}

/* -------------------------------------------------------------------------
   10. BUTTONS — 描边式：1px 金色边 / 透明底 / hover 填金
   ------------------------------------------------------------------------- */

.button,
button.button,
input[type="submit"],
input[type="button"],
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce-Button,
.wc-block-components-button,
.sv-btn,
a.sv-btn {
  display: inline-block;
  background: transparent !important;
  background-image: none !important;
  color: var(--brand-ink) !important;
  border: 1px solid var(--brand-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: .6875rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  padding: 1.15em 2.6em !important;
  cursor: pointer;
  transition: background-color var(--sv-dur) var(--sv-ease),
              color var(--sv-dur) var(--sv-ease),
              border-color var(--sv-dur) var(--sv-ease);
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.sv-btn:hover,
a.sv-btn:hover {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand-ink) !important;   /* ink on champagne gold — 8.5:1 contrast */
}

.button:focus-visible,
.sv-btn:focus-visible {
  outline: 1px solid var(--brand-ink);
  outline-offset: 3px;
}

/* the solid gold variant, used sparingly (hero / checkout) */
.sv-btn--solid {
  background-color: var(--brand-accent) !important;
  color: var(--brand-ink) !important;
}
.sv-btn--solid:hover {
  background-color: var(--brand-ink) !important;
  border-color: var(--brand-ink) !important;
  color: var(--brand-bg) !important;
}

/* small text link with gold rule */
.sv-link {
  display: inline-block;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--brand-accent);
}
.sv-link:hover { color: var(--brand-accent); }

/* -------------------------------------------------------------------------
   11. PRICE / META — Jost 细字距，不要粗黑
   ------------------------------------------------------------------------- */

.woocommerce-Price-amount,
.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--brand-ink) !important;
  letter-spacing: .14em;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .price {
  font-size: .8125rem !important;
  margin: .1rem 0 0 !important;
}

.woocommerce div.product p.price {
  font-size: 1.25rem !important;
  margin: 0 0 1.6rem !important;
}

.woocommerce-Price-currencySymbol {
  font-size: .82em;
  font-weight: 300;
  padding-right: .12em;
  color: var(--sv-ink-soft);
}

/* The original price sits in a <del> that is a SIBLING of .woocommerce-Price-amount,
   not a descendant, so it needs its own selectors — otherwise it renders in
   full ink and the strikethrough collides visually with the live price. */
.price del,
.price del .woocommerce-Price-amount,
.woocommerce-Price-amount del,
.woocommerce-Price-amount del .woocommerce-Price-amount,
ul.products li.product .price del,
.woocommerce div.product p.price del {
  color: var(--sv-ink-faint) !important;
  text-decoration: line-through;
  font-weight: 300 !important;
  opacity: .85;
}

.price ins,
.price ins .woocommerce-Price-amount,
.woocommerce-Price-amount ins,
.woocommerce-Price-amount ins .woocommerce-Price-amount {
  color: var(--brand-ink) !important;
  text-decoration: none;
  font-weight: 300 !important;
}

/* Woo prints screen-reader duplicates of both prices — make sure they stay hidden */
.price .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  margin: -1px !important;
}

/* -------------------------------------------------------------------------
   12. TABLES / NOTICES / BREADCRUMB / PAGINATION
   ------------------------------------------------------------------------- */

.woocommerce table,
.woocommerce table.shop_table {
  border: 0 !important;
  border-collapse: collapse;
  border-radius: 0 !important;
  background: transparent;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: 0 !important;
  border-bottom: var(--sv-rule) !important;
  background: transparent !important;
  padding: 1.1rem .6rem !important;
  font-weight: 300;
  letter-spacing: .04em;
}
.woocommerce table.shop_table thead th {
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
  font-weight: 400;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-store-notice {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--brand-accent) !important;
  border-bottom: 1px solid var(--brand-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand-ink);
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .06em;
  padding: 1.2rem .4rem !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--brand-accent) !important; }

.woocommerce-breadcrumb {
  text-align: center;
  margin: 2.6rem 0 0 !important;
  padding: 0 !important;
}
.woocommerce-breadcrumb a { color: var(--sv-ink-faint); }
.woocommerce-breadcrumb a:hover { color: var(--brand-accent); }

.woocommerce-pagination { border: 0 !important; }
.woocommerce-pagination ul,
.woocommerce-pagination ul li {
  border: 0 !important;
  border-radius: 0 !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.woocommerce-pagination .page-numbers {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-body);
  font-weight: 300 !important;
  letter-spacing: .12em;
  color: var(--brand-ink) !important;
  padding: .5rem .8rem !important;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li .current {
  border-bottom-color: var(--brand-accent) !important;
  color: var(--brand-ink) !important;
}

/* result count + ordering row */
.woocommerce-result-count,
.woocommerce-ordering {
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
  margin-bottom: 3rem !important;
}
.woocommerce-ordering select { border-bottom-color: var(--sv-hairline); }

/* -------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------- */

.site-footer,
#colophon.site-footer {
  background: var(--brand-bg) !important;
  border: 0 !important;
  border-top: var(--sv-rule) !important;
  box-shadow: none !important;
  padding: var(--sv-section) 0 0;
  color: var(--sv-ink-soft);
}

.site-footer .widget-area { border: 0 !important; }
.site-footer .widget-title {
  font-family: var(--font-head) !important;
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--brand-ink);
}

.site-footer a { color: var(--sv-ink-soft); }
.site-footer a:hover { color: var(--brand-accent); }

.site-info {
  border-top: var(--sv-rule);
  margin-top: 3rem;
  padding: 2.2rem 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
}

/* -------------------------------------------------------------------------
   14. RESPONSIVE
   ------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  :root { --sv-gutter: 2rem; --sv-section: 5rem; }

  /* nav collapses; the wordmark must STAY optically centred.
     Keep the same equal-column grid as desktop so the centre column is a true
     centre rather than the leftover middle of an uneven row. */
  .sv-header__bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 1.7rem var(--sv-gutter);
  }
  .sv-nav__toggle { display: block; }
  .sv-nav--left { justify-self: start; }
  .sv-brand { justify-self: center; }

  /* the category list becomes a drop-down drawer under the bar */
  .sv-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--brand-bg);
    border-top: var(--sv-rule);
    border-bottom: var(--sv-rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--sv-gutter) 1.6rem;
    z-index: 400;
  }
  .sv-header--nav-open .sv-nav__list { display: flex; }

  /* the drawer has room for every category, so unhide the extras */
  .sv-nav__extra { display: block; }

  .sv-nav__list li {
    border-bottom: var(--sv-rule);
    width: 100%;
  }
  .sv-nav__list li:last-child { border-bottom: 0; }
  .sv-nav__list a {
    display: block;
    padding: 1.05rem 0;
    font-size: .75rem;
    letter-spacing: .22em;
  }
  .sv-nav__list a::after { display: none; }

  .sv-hero,
  .sv-split { grid-template-columns: 1fr; }
  .sv-hero { padding-top: 3rem; }
  .sv-hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }
}

@media (max-width: 767px) {
  :root { --sv-gutter: 1.4rem; --sv-section: 3.6rem; }

  body { font-size: .875rem; }

  .sv-header__bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 1.3rem var(--sv-gutter);
    gap: .7rem;
  }
  /* keep the wordmark dead-centre on phones */
  .sv-brand { justify-self: center; text-align: center; }
  .sv-brand__link,
  .sv-brand .site-title a { font-size: 1.1rem; letter-spacing: .2em; text-indent: .2em; }
  .sv-brand__tagline { display: none; }
  .sv-brand img { max-height: 40px; }

  .sv-utils { gap: .9rem; }
  /* tighten the utility labels so the wordmark keeps clear air either side
     of it rather than butting up against "Search" */
  .sv-utils .sv-nav__link { font-size: .625rem; letter-spacing: .14em; }
  /* drop the "Account" label so the row cannot overflow; search + cart stay.
     (container class is .sv-nav--right, not .sv-nav__right) */
  .sv-nav--right .sv-hide-sm { display: none; }

  .site-title h1 { font-size: 1.15rem; }

  .sv-cat-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .sv-cat-tile__label { padding: 1.6rem .6rem 1rem; font-size: 1rem; }

  .site-footer { padding-top: 3.6rem; }
  .site-info { padding: 1.6rem 0; }

  ul.products li.product .woocommerce-loop-product__title { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
  /* wordmark sizing is handled by the 767px rule so it stays consistent */
  .sv-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* Storefront's own homepage "nothing found" block is replaced by our front page */
.home .site-content .col-full > .content-area:empty { display: none; }

/* =========================================================================
   15. COLOPHON STANDARDS (2026-10-10)
   Policy links + contact row emitted by inc/standards.php on every template.
   The colophon previously opened with a 161px empty band (both Storefront
   footer widget areas are empty and the site-info credit was a single line);
   the top padding is trimmed so that space is now used by this row.
   ========================================================================= */

.sv-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.9rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 0 1.5rem;
}

.sv-footer-legal a {
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sv-ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.sv-footer-legal a:hover,
.sv-footer-legal a:focus-visible {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

.sv-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.6rem;
  padding: 0 0 1.2rem;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-ink-faint);
}

.sv-footer-contact a {
  color: var(--sv-ink-soft);
  border-bottom: 1px solid var(--sv-hairline);
}

.sv-footer-contact a:hover,
.sv-footer-contact a:focus-visible {
  color: var(--brand-accent);
  border-bottom-color: var(--brand-accent);
}

.site-footer,
#colophon.site-footer { padding: 3.4rem 0 0; }

.site-info { margin-top: 1.6rem; }

@media (max-width: 767px) {
  .site-footer,
  #colophon.site-footer { padding-top: 2.6rem; }

  .sv-footer-legal { gap: .6rem 1.1rem; padding-bottom: 1.2rem; }
  .sv-footer-legal a { font-size: .625rem; letter-spacing: .14em; }

  .sv-footer-contact { gap: .45rem 1.1rem; padding-bottom: 1rem; font-size: .625rem; }
}