/* Solo Potters — unified fonts (Literata) */
/* header cart count color */
.ast-cart-menu-wrap .count, .ast-cart-menu-wrap .count:after {
border-color: #aaaaaa;
color: #aaaaaa;
}
/* base body text */
body {
font-family: 'Literata', Georgia, serif !important;
}
/* headings */
h1,h2,h3,h4,h5,h6,
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,
.elementor-heading-title {
font-family: 'Literata', Georgia, serif !important;
}
/* inputs */
input, select, textarea {
font-family: 'Literata', Georgia, serif !important;
}
/* buttons & navigation */
.main-header-menu .menu-link,
.menu-toggle,
button,
.ast-button,
.ast-custom-button,
.button,
a.button,
input#submit,
input[type="submit"],
input[type="button"],
.elementor-widget-button .elementor-button,
.wp-block-button .wp-block-button__link,
.wp-block-search .wp-block-search__button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-forward,
.ast-continue-shopping,
.ast-site-header-cart .woocommerce-mini-cart__buttons a,
.ast-site-header-cart .cart-container,
.ast-woo-header-cart-info-wrap {
font-family: 'Literata', Georgia, serif !important;
}
/* Blog mode: hide cart until Gallery opens */
.ast-site-header-cart,
.ast-header-woo-cart {
display: none !important;
}
/* Footer: hide leftover template link column until rebuilt */
.elementor-element-012b4cf {
display: none !important;
}
/* Footer: clean copyright line */
.elementor-element-216ef7d {
display: none !important;
}
.elementor-element-063b7fa .elementor-widget-container {
font-size: 0 !important;
}
.elementor-element-063b7fa .elementor-widget-container::after {
content: "© 2026, Solopotters";
font-size: 14px !important;
line-height: 1.6 !important;
color: inherit;
}
/* About & Contact: neutral hero instead of stock banners */
.elementor-element-79b68a0,
.elementor-element-d6187a0 {
background-image: none !important;
background-color: #F5F2EC !important;
}
.elementor-element-79b68a0 .elementor-heading-title,
.elementor-element-d6187a0 .elementor-heading-title {
color: #1F1B16 !important;
}
/* Gallery: hide page title (H1) */
body.page-id-7683 .entry-title {
display: none !important;
}
/* About page: remove the big "About" title above the content (visual only,
H1 kept in DOM for SEO via clip, matching .sp-seo-h1 practice) */
body.page-id-43 .entry-title {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body.page-id-43 .entry-header {
padding: 0 !important;
margin: 0 !important;
}
/* One notch lighter typography */
h1 {
font-weight: 400 !important;
}
h2, h3, h4, h5, h6 {
font-weight: 400 !important;
}
body {
font-weight: 300 !important;
}
.main-header-menu .menu-link {
font-weight: 600 !important;
}
button, .ast-button, .ast-custom-button, .button, a.button, .elementor-button,
input[type="submit"], input[type="button"] {
font-weight: 400 !important;
}
/* ===== 全站按钮：微圆角 + hover 白底黑字（2026-08-21） =====
覆盖 Elementor 按钮、Astra 按钮、表单按钮、通用按钮 */
.elementor-button,
.ast-button,
.ast-custom-button,
.button,
a.button,
button,
input[type="submit"],
input[type="button"],
input#submit,
.wp-block-button__link,
.srfm-button,
.srfm-submit-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
border-radius: 4px !important;
/* 预留透明边框：hover 加黑边时不抖动 */
border: 1px solid transparent !important;
box-sizing: border-box !important;
}
.elementor-button:hover,
.elementor-button:focus,
.ast-button:hover,
.ast-custom-button:hover,
.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.srfm-button:hover,
.srfm-submit-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
border: 1px solid #1F1B16 !important;
box-shadow: none !important;
opacity: 1 !important;
text-decoration: none !important;
}
.elementor-button:hover .elementor-button-icon svg,
.elementor-button:focus .elementor-button-icon svg {
fill: #1F1B16 !important;
}
/* Hero 按钮 hover：明确白底黑字（覆盖任何默认透明/变暗效果） */
.elementor-element-wHeroBtn .elementor-button:hover,
.elementor-element-wHeroBtn .elementor-button:focus {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
border: 1px solid #1F1B16 !important;
box-shadow: none !important;
opacity: 1 !important;
}
/* ===== Hero 视频背景 fixed：滚动时 UI 动、视频固定（视差，2026-08-21） =====
仅桌面应用（移动端 fixed 视频在 iOS 会抖动，保持原样） */
@media (min-width: 769px) {
.elementor-element-sHero .elementor-background-video-container {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 0 !important;
}
/* sNews 无背景色，滚动到它时会透出 fixed 视频，补底色盖住 */
.elementor-element-sNews {
background-color: #FBF9F5 !important;
}
/* 让后续板块/页脚的背景盖住 fixed 视频（fixed 元素层级高于 static 内容） */
.elementor-element-sSearch,
.elementor-element-sAbout,
.elementor-element-sNews,
.site-footer {
position: relative !important;
z-index: 1 !important;
}
}
/* ===== 订阅栏（about/gallery/notes 注入，与首页 sNews 一致） ===== */
.sp-newsletter {
padding: 90px 20px 100px;
background: #FBF9F5;
text-align: center;
}
.sp-newsletter-title {
font-family: 'Literata', Georgia, serif;
font-size: 24px;
font-weight: 300;
color: #1F1B16;
margin: 0 0 14px;
}
.sp-newsletter-text {
font-family: 'Literata', Georgia, serif;
font-size: 15px;
line-height: 1.7;
color: #4A4238;
max-width: 520px;
margin: 0 auto 26px;
}
/* 订阅反馈：输入框下方一行小字（成功/失败/重复统一）。
固定高度 + 始终占位：消息出现/消失都不改变布局，页脚不会位移。 */
.sp-newsletter .sp-nl-msg {
font-family: 'Literata', Georgia, serif;
font-size: 14px;
line-height: 1.5;
color: #4A4238;
height: 21px;
overflow: hidden;
margin: 8px auto 0;
max-width: 520px;
text-align: center;
}
.sp-newsletter .sp-nl-msg.is-error {
color: #9B3B2E;
}
/* 隐藏 SureForms 默认错误框（我们用自己的消息行） */
.sp-newsletter .srfm-common-error-message {
display: none !important;
}
/* Kettl-inspired restrained type scale */
h1 {
font-size: 36px !important;
line-height: 1.15 !important;
}
h2 {
font-size: 24px !important;
line-height: 1.2 !important;
}
h3 {
font-size: 20px !important;
line-height: 1.3 !important;
}
h4, h5, h6 {
font-size: 16px !important;
line-height: 1.4 !important;
}
body {
font-size: 16px !important;
}
@media (max-width: 767px) {
h1 { font-size: 28px !important; }
h2 { font-size: 21px !important; }
h3 { font-size: 18px !important; }
}
/* Sticky header — stays on top when scrolling */
#masthead {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
background-color: #ffffff !important;
}
body.admin-bar #masthead {
top: 32px !important;
}
/* Newsletter form: single line — input with inline return key */
#srfm-form-7681 {
position: relative !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
max-width: 360px !important;
width: 100% !important;
margin: 0 auto !important;
}
#srfm-form-7681 .srfm-block-label {
display: none !important;
}
#srfm-form-7681 .srfm-email-block {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
}
#srfm-form-7681 .srfm-input-email {
width: 100% !important;
height: 46px !important;
margin: 0 !important;
border: 1px solid #D9D9D9 !important;
border-radius: 6px !important;
padding: 0 44px 0 14px !important;
font-size: 15px !important;
text-align: left !important;
background: #FFFFFF !important;
color: #1F1B16 !important;
box-shadow: none !important;
}
#srfm-form-7681 .srfm-input-email::placeholder {
color: rgba(31, 27, 22, 0.55) !important;
}
#srfm-form-7681 .srfm-input-email:focus {
border-color: #1F1B16 !important;
outline: none !important;
}
#srfm-form-7681 .srfm-error-wrap {
display: none !important;
}
#srfm-form-7681 .srfm-submit-container {
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 40px !important;
height: 46px !important;
flex: none !important;
}
#srfm-form-7681 .srfm-submit-container .wp-block-button {
width: 100% !important;
height: 100% !important;
}
#srfm-form-7681 .srfm-submit-button {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
font-size: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: rgba(31, 27, 22, 0.55) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* solid return-arrow icon (inline SVG via mask, color follows text color) */
#srfm-form-7681 .srfm-submit-button::after {
content: "" !important;
width: 17px !important;
height: 17px !important;
background-color: rgba(31, 27, 22, 0.55) !important;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
}
#srfm-form-7681 .srfm-submit-button:hover {
background: transparent !important;
border: none !important;
color: #1F1B16 !important;
}
#srfm-form-7681 .srfm-submit-button:hover::after {
background-color: #1F1B16 !important;
}
/* Unified button style — same as EXPLORE YIXING (Contact form) */
#srfm-form-7307 .srfm-submit-button {
background-color: #1F1B16 !important;
color: #FFFFFF !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
padding: 16px 28px !important;
font-size: 14px !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
font-weight: 400 !important;
box-shadow: none !important;
height: 46px !important;
line-height: 14px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
}
a.elementor-button {
height: 46px !important;
line-height: 14px !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Unified button transition (hover state = white bg + black text, see above) */
a.elementor-button, button, .ast-button, .ast-custom-button, .button, a.button,
.srfm-submit-button, .wp-block-button__link, input[type="submit"], input[type="button"] {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}
/* Keyword search module (Kettl-style) */
.sp-keywords {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 28px 0 30px;
}
.sp-chip {
display: inline-flex;
align-items: center;
padding: 8px 18px;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #1F1B16;
border: 1px solid rgba(31, 27, 22, 0.35);
border-radius: 999px;
font-family: 'Literata', Georgia, serif;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sp-chip:hover {
background-color: #1F1B16 !important;
color: #FFFFFF !important;
border-color: #1F1B16 !important;
}
/* Search module: single-line input with inline return key */
.sp-search-form {
max-width: 360px !important;
margin: 0 auto !important;
}
.sp-search-wrap {
position: relative !important;
width: 100% !important;
}
.sp-search-wrap input[type="search"] {
width: 100% !important;
height: 46px !important;
border: 1px solid #D9D9D9 !important;
border-radius: 0 !important;
padding: 0 44px 0 14px !important;
font-size: 15px !important;
text-align: left !important;
background: #FFFFFF !important;
color: #1F1B16 !important;
box-shadow: none !important;
font-family: 'Literata', Georgia, serif !important;
}
.sp-search-wrap input[type="search"]::placeholder {
color: rgba(31, 27, 22, 0.55) !important;
}
.sp-search-wrap input[type="search"]:focus {
border-color: #1F1B16 !important;
outline: none !important;
}
.sp-search-wrap button {
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 40px !important;
height: 46px !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: rgba(31, 27, 22, 0.55) !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: color 0.25s ease !important;
}
.sp-search-wrap button:hover {
background: transparent !important;
border: none !important;
color: #1F1B16 !important;
}
/* Search results / no-results page: unified search box + English message */
body.search-no-results .search-form {
position: relative !important;
max-width: 360px !important;
margin: 0 auto !important;
}
body.search-no-results .search-form label {
display: block !important;
}
body.search-no-results .search-form .search-field {
width: 100% !important;
height: 46px !important;
border: 1px solid #D9D9D9 !important;
border-radius: 0 !important;
padding: 0 44px 0 14px !important;
font-size: 15px !important;
text-align: left !important;
background: #FFFFFF !important;
color: #1F1B16 !important;
box-shadow: none !important;
font-family: 'Literata', Georgia, serif !important;
}
body.search-no-results .search-form .search-field::placeholder {
color: transparent !important;
}
body.search-no-results .search-form::before {
content: "Search…";
position: absolute !important;
left: 14px !important;
top: 0 !important;
height: 46px !important;
line-height: 46px !important;
font-size: 15px !important;
color: rgba(31, 27, 22, 0.55) !important;
font-family: 'Literata', Georgia, serif !important;
pointer-events: none !important;
z-index: 1 !important;
}
body.search-no-results .search-form:has(.search-field:not(:placeholder-shown))::before {
display: none !important;
}
body.search-no-results .search-form .search-submit {
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 40px !important;
height: 46px !important;
padding: 0 !important;
font-size: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: rgba(31, 27, 22, 0.55) !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.search-no-results .search-form .search-submit .ast-icon,
body.search-no-results .search-form .search-submit svg {
display: none !important;
}
body.search-no-results .search-form .search-submit::after {
content: "" !important;
width: 17px !important;
height: 17px !important;
background-color: rgba(31, 27, 22, 0.55) !important;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain !important;
}
body.search-no-results .search-form .search-submit:hover {
background: transparent !important;
border: none !important;
color: #1F1B16 !important;
}
body.search-no-results .search-form .search-submit:hover::after {
background-color: #1F1B16 !important;
}
body.search-no-results .page-content p {
font-size: 0 !important;
}
body.search-no-results .page-content p::after {
content: "Sorry, nothing matched your search terms. Please try again with different keywords.";
font-size: 16px;
color: #4A4238;
line-height: 1.7;
}
/* Nav link colors — unified brand black (incl. current/hover) */
.main-header-menu .menu-link,
.main-header-menu .menu-link:visited,
.main-header-menu .current-menu-item .menu-link,
.main-header-menu .current-menu-ancestor .menu-link,
.main-header-menu .current-menu-item .menu-link:hover,
.main-header-menu .menu-link:hover {
color: #1F1B16 !important;
}
/* Header default = compact top state (same as homepage at scroll top) */
header#masthead .site-logo-img a.custom-logo-link.transparent-custom-logo img {
width: 64px;
height: 64px;
max-width: 64px;
}
header#masthead .ast-primary-header-bar {
min-height: 84px;
padding-top: 10px;
padding-bottom: 10px;
}
.site-primary-header-wrap.ast-builder-grid-row-container {
min-height: 70px;
}
.main-header-menu li,
.main-header-menu .menu-link {
line-height: 48px;
}
/* Search / archive pages: compact header (no transparent-header class) */
body:not(.ast-theme-transparent-header) header#masthead .site-logo-img a.custom-logo-link img {
width: 64px;
height: 64px;
max-width: 64px;
}
/* Search no-results page: centered + spaced message and search box */
body.search-no-results .page-content {
text-align: center;
}
body.search-no-results .page-content p {
max-width: 560px;
margin-left: auto;
margin-right: auto;
margin-bottom: 28px;
text-align: center;
}
body.search .page-title {
text-align: center;
}
/* Kettl background: near-white, low-saturation site-wide (lightened from Kettl's #FCF8F5) */
body {
background-color: #FCFCFB !important;
}
/* Page-content Elementor sections/containers: unify to the same ground color */
[data-elementor-type="wp-page"] .elementor-section,
[data-elementor-type="wp-post"] .elementor-section,
[data-elementor-type="wp-post"] .e-con {
background-color: #FCFCFB !important;
}
/* Astra content cards: blend into the page background */
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .no-results {
background-color: transparent !important;
}
/* SureForms wrapper: no white card, sit directly on the background */
.srfm-form-container {
background-color: transparent !important;
}
/* About/Contact hero: remove leftover Elementor gradient overlay */
.elementor-element-79b68a0::before,
.elementor-element-d6187a0::before {
background-image: none !important;
background-color: transparent !important;
}
/* Contact form section: remove leftover gray-to-white gradient */
.elementor-element-7f18638 {
background-image: none !important;
}
/* Only the homepage keeps a hero — remove empty hero bands on About/Contact */
body.page-id-43 .elementor-element-79b68a0,
body.page-id-414 .elementor-element-d6187a0 {
display: none !important;
}
body.page-id-43 .entry-content,
body.page-id-414 .entry-content {
padding-top: 120px !important;
}
/* Contact form: unify inputs with homepage standard (white bg, 0 radius, 15px) */
body #srfm-form-7307 .srfm-input-common,
body #srfm-form-7307 textarea {
background-color: #FFFFFF !important;
border: 1px solid #D9D9D9 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: 'Literata', Georgia, serif !important;
font-size: 15px !important;
font-weight: 400 !important;
color: #1F1B16 !important;
padding: 0 14px !important;
box-sizing: border-box !important;
}
/* single-line inputs: 46px tall (homepage standard) */
body #srfm-form-7307 input.srfm-input-common {
height: 46px !important;
min-height: 46px !important;
line-height: 46px !important;
width: 100% !important;
}
body #srfm-form-7307 .srfm-input-common::placeholder,
body #srfm-form-7307 textarea::placeholder {
color: rgba(31, 27, 22, 0.55) !important;
opacity: 1 !important;
}
body #srfm-form-7307 .srfm-input-common:focus,
body #srfm-form-7307 textarea:focus {
border-color: #1F1B16 !important;
outline: none !important;
}
/* textarea: taller message box */
body #srfm-form-7307 textarea {
height: 96px !important;
min-height: 96px !important;
max-height: 96px !important;
padding: 14px !important;
line-height: 1.6 !important;
resize: none !important;
}
/* field spacing: relaxed, consistent (margin controls; kill SureForms flex gap) */
body #srfm-form-7307.srfm-form {
gap: 0 !important;
}
body #srfm-form-7307 .srfm-block-single {
margin-bottom: 12px !important;
}
/* SEND button: tighter spacing after message box */
body #srfm-form-7307 .srfm-block-single:last-of-type {
margin-bottom: 0 !important;
}
body #srfm-form-7307 .srfm-submit-container {
margin-top: 24px !important;
}
/* SEND button: right-aligned */
body #srfm-form-7307 .srfm-submit-container .wp-block-button {
text-align: right !important;
}
/* SEND button hover: match site-wide white bg + ink text + ink border (needs ID-level specificity) */
body #srfm-form-7307 .srfm-submit-button:hover,
body #srfm-form-7307 .srfm-submit-button:focus {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
border: 1px solid #1F1B16 !important;
}
/* Instagram link: brand ink color, subtle underline */
body.page-id-414 .hfe-infocard-text a {
color: #1F1B16 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-color: rgba(31, 27, 22, 0.4) !important;
}
/* Contact form column: no box shadow, radius matches site buttons */
.elementor-element-3d4ce27 {
box-shadow: none !important;
border-radius: 4px !important;
}
/* Contact page layout: single centered column (text above, form below) */
body.page-id-414 .entry-content {
padding-top: 130px !important;
}
body.page-id-414 .elementor-element-7f18638 .e-con-inner {
flex-direction: column !important;
align-items: center !important;
}
body.page-id-414 .elementor-element-7f18638 {
padding-bottom: 80px !important;
}
body.page-id-414 .elementor-element-9050820,
body.page-id-414 .elementor-element-3d4ce27 {
width: 100% !important;
max-width: 460px !important;
flex: none !important;
padding: 0 !important;
}
body.page-id-414 .elementor-element-9050820 {
padding-top: 20px !important;
}
body.page-id-414 .elementor-element-3d4ce27 {
margin: 32px 0 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Contact heading: hide redundant page title, promote Hello! to main heading */
body.page-id-414 .entry-title {
display: none !important;
}
body.page-id-414 .hfe-infocard-title {
font-size: 30px !important;
line-height: 1.25 !important;
color: #1F1B16 !important;
font-weight: 400 !important;
margin: 0 0 24px !important;
font-family: 'Literata', Georgia, serif !important;
}
body.page-id-414 .hfe-infocard-text p {
font-size: 16px !important;
line-height: 1.9 !important;
color: #1F1B16 !important;
margin-bottom: 1.1em !important;
font-family: 'Literata', Georgia, serif !important;
}
body.page-id-414 .hfe-infocard-text p:last-child {
margin-bottom: 0 !important;
}
/* About page — KETTL-style staggered layout */
body.page-id-43 .entry-content {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
}
/* S1 — open intro, left narrow column */
.elementor-element-spS1in {
max-width: 560px !important;
margin-left: 10% !important;
}
/* S2 — text bottom-left + image right, centered block */
.elementor-element-spS2in,
.elementor-element-spS4in {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-element-spS2l {
align-self: flex-end !important;
}
/* S3 — wide image band */
.elementor-element-spS3in {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.elementor-element-spS3in img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
display: block;
}
/* S5 — centered closing */
.elementor-element-spS5in {
max-width: 640px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Typography */
.sp-story-eyebrow .elementor-heading-title {
font-size: 12px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: rgba(31, 27, 22, 0.55) !important;
font-weight: 400 !important;
margin-bottom: 24px !important;
}
.sp-story-title .elementor-heading-title {
font-size: 30px !important;
line-height: 1.25 !important;
color: #1F1B16 !important;
font-weight: 400 !important;
margin-bottom: 24px !important;
}
.sp-story-body p {
font-size: 16px !important;
line-height: 1.7 !important;
color: #1F1B16 !important;
margin-bottom: 1.1em !important;
}
/* Images in staggered sections */
.elementor-element-spS2m img,
.elementor-element-spS4m img {
width: 100% !important;
height: auto !important;
}
/* Big About containers: keep 50px margins on BOTH sides by fitting width */
body.page-id-43 [data-id="6a827bc"],
body.page-id-43 [data-id="4607440"],
body.page-id-43 [data-id="6c8e4b9"],
body.page-id-43 [data-id="23a5496"] {
width: calc(100% - 100px) !important;
}
/* About page — responsive: tablet & mobile stack with image on top, text below */
@media (max-width: 1024px) {
body.page-id-43 [data-id="6a827bc"],
body.page-id-43 [data-id="4607440"],
body.page-id-43 [data-id="6c8e4b9"],
body.page-id-43 [data-id="23a5496"] {
flex-direction: column !important;
}
body.page-id-43 [data-id="29f9ec9"],
body.page-id-43 [data-id="66786a9"],
body.page-id-43 [data-id="0e68425"],
body.page-id-43 [data-id="eb2a629"],
body.page-id-43 [data-id="d264dc1"],
body.page-id-43 [data-id="9714331"],
body.page-id-43 [data-id="6619d34"],
body.page-id-43 [data-id="d5dba1d"] {
width: 100% !important;
padding: 0 !important;
}
/* text inner containers fill width on tablet/mobile */
body.page-id-43 [data-id="spS1in"],
body.page-id-43 [data-id="spS2l"],
body.page-id-43 [data-id="spS4l"],
body.page-id-43 [data-id="spS5in"] {
width: 100% !important;
max-width: 100% !important;
}
/* image first, text second */
body.page-id-43 [data-id="66786a9"] { order: 2 !important; }
body.page-id-43 [data-id="29f9ec9"] { order: 1 !important; }
body.page-id-43 [data-id="0e68425"] { order: 2 !important; }
body.page-id-43 [data-id="eb2a629"] { order: 1 !important; }
body.page-id-43 [data-id="9714331"] { order: 2 !important; }
body.page-id-43 [data-id="d264dc1"] { order: 1 !important; }
body.page-id-43 [data-id="6619d34"] { order: 2 !important; }
body.page-id-43 [data-id="d5dba1d"] { order: 1 !important; }
/* images fill width; neutralize stale intro margin */
body.page-id-43 [data-id="6a827bc"] img,
body.page-id-43 [data-id="4607440"] img,
body.page-id-43 [data-id="23a5496"] img {
width: 100% !important;
height: auto !important;
}
.elementor-element-spS1in {
margin-left: 0 !important;
max-width: 100% !important;
}
}
@media (max-width: 767px) {
body.page-id-43 [data-id="6a827bc"],
body.page-id-43 [data-id="4607440"],
body.page-id-43 [data-id="6c8e4b9"],
body.page-id-43 [data-id="23a5496"] {
margin-left: 20px !important;
margin-right: 20px !important;
width: calc(100% - 40px) !important;
}
/* mobile typography */
.sp-story-title .elementor-heading-title {
font-size: 22px !important;
line-height: 1.25 !important;
margin-bottom: 14px !important;
}
.sp-story-body p {
font-size: 15px !important;
line-height: 1.6 !important;
margin-bottom: 0.9em !important;
}
.sp-story-eyebrow .elementor-heading-title {
font-size: 10px !important;
letter-spacing: 1.5px !important;
margin-bottom: 12px !important;
}
}
/* Mobile/tablet nav: hamburger left, centered logo */
@media (max-width: 1024px) {
#ast-desktop-header {
display: none !important;
}
#ast-mobile-header {
display: block !important;
}
#ast-mobile-header .ast-builder-grid-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
#ast-mobile-header .site-branding {
position: static !important;
text-align: center !important;
width: 100% !important;
}
#ast-mobile-header .custom-logo,
#ast-mobile-header .ast-mobile-header-logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
}
#ast-mobile-header .site-header-primary-section-right {
order: -1 !important;
}
#ast-mobile-header .ast-header-woo-cart {
display: none !important;
}
}
@media (max-width: 767px) {
body.page-id-43 [data-id="6a827bc"] {
padding-top: 110px !important;
}
}
/* About page — image info "i" button + caption overlay */
/* Edit the info text in Elementor: click image → Image → Caption → Custom Caption */
body.page-id-43 [data-id="a2df48e"] figure,
body.page-id-43 [data-id="d01d8bf"] figure,
body.page-id-43 [data-id="8bb0565"] figure,
body.page-id-43 [data-id="8d0b22d"] figure {
position: relative !important;
}
/* 仅桌面端：figure 收缩到图片宽度，避免图标跑到图片外 */
@media (min-width: 1025px) {
body.page-id-43 [data-id="a2df48e"] figure,
body.page-id-43 [data-id="d01d8bf"] figure,
body.page-id-43 [data-id="8bb0565"] figure,
body.page-id-43 [data-id="8d0b22d"] figure {
width: fit-content !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
body.page-id-43 [data-id="a2df48e"] figcaption.widget-image-caption,
body.page-id-43 [data-id="d01d8bf"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8bb0565"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8d0b22d"] figcaption.widget-image-caption {
position: static !important;
display: block !important;
margin: 12px auto 0 !important;
padding: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: rgba(31, 27, 22, 0.62) !important;
font-family: 'Literata', Georgia, serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.6 !important;
text-align: center !important;
opacity: 1 !important;
pointer-events: auto !important;
transition: none !important;
z-index: auto !important;
}
/* 桌面端：caption 跟随图片所在屏幕一侧对齐（左图左对齐，右图右对齐） */
@media (min-width: 1025px) {
body.page-id-43 [data-id="d01d8bf"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8bb0565"] figcaption.widget-image-caption {
text-align: left !important;
}
body.page-id-43 [data-id="a2df48e"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8d0b22d"] figcaption.widget-image-caption {
text-align: right !important;
}
}
@media (max-width: 767px) {
body.page-id-43 [data-id="a2df48e"] figcaption.widget-image-caption,
body.page-id-43 [data-id="d01d8bf"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8bb0565"] figcaption.widget-image-caption,
body.page-id-43 [data-id="8d0b22d"] figcaption.widget-image-caption {
margin: 10px auto 0 !important;
font-size: 12px !important;
line-height: 1.6 !important;
}
}
/* SP-CSS-MARKER-8899 */
/* 手机/平板：带自定义宽度的图片组件恢复撑满容器 */
@media (max-width: 1024px) {
body.page-id-43 [data-id="8bb0565"],
body.page-id-43 [data-id="d01d8bf"] {
width: 100% !important;
}
}
/* ===== 手机端抽屉菜单 · 模仿 Essence of Tea ===== */
/* 抽屉：从导航栏下方弹出，毛玻璃与导航栏一致（透明+blur 12px） */
#ast-mobile-popup .ast-mobile-popup-inner {
width: 100% !important;
max-width: 100% !important;
top: 84px !important;
background: transparent !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: none !important;
}
#ast-mobile-popup .ast-mobile-popup-overlay {
top: 84px !important;
}
/* 关闭叉：抽屉内左上角 */
#ast-mobile-popup .ast-mobile-popup-header {
display: block !important;
text-align: left !important;
padding: 22px 0 0 28px !important;
}
#ast-mobile-popup .menu-toggle-close {
color: #1F1B16 !important;
background: transparent !important;
}
/* 导航内容 */
#ast-mobile-popup .ast-mobile-popup-content {
padding: 4vh 36px !important;
}
#ast-mobile-popup .ast-header-account {
display: none !important;
}
#ast-mobile-popup .main-header-menu {
flex-direction: column !important;
align-items: flex-start !important;
background: transparent !important;
}
#ast-mobile-popup .main-header-menu .menu-link {
font-family: 'Literata', Georgia, serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
letter-spacing: 0.3px !important;
color: #1F1B16 !important;
padding: 12px 0 !important;
background: transparent !important;
border-bottom: none !important;
}
#ast-mobile-popup .main-header-menu .menu-link:hover {
color: rgba(31, 27, 22, 0.55) !important;
}
/* ===== 手机端抽屉菜单 · 补充修复（Essence of Tea 风格） ===== */
/* 1) 汉堡按钮：关闭时显示三线，打开时同一个按钮变成叉 */
#ast-mobile-header .menu-toggle .mobile-menu-toggle-icon span:nth-child(2) {
display: none !important;
}
#ast-mobile-header .menu-toggle[aria-expanded="true"] .mobile-menu-toggle-icon span:nth-child(1),
body.ast-popup-nav-open #ast-mobile-header .menu-toggle .mobile-menu-toggle-icon span:nth-child(1) {
display: none !important;
}
#ast-mobile-header .menu-toggle[aria-expanded="true"] .mobile-menu-toggle-icon span:nth-child(2),
body.ast-popup-nav-open #ast-mobile-header .menu-toggle .mobile-menu-toggle-icon span:nth-child(2) {
display: inline-flex !important;
}
/* 2) 汉堡按钮改为透明细线风格（去掉黑色填充块） */
#ast-mobile-header .menu-toggle.ast-mobile-menu-trigger-fill,
#ast-mobile-header .menu-toggle.ast-mobile-menu-trigger-fill:hover,
#ast-mobile-header .menu-toggle.ast-mobile-menu-trigger-fill:focus {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #1F1B16 !important;
}
/* 3) 遮罩全透明：面板毛玻璃与导航栏一致，不再被深色遮罩压暗 */
#ast-mobile-popup .ast-mobile-popup-overlay {
background-color: rgba(0, 0, 0, 0) !important;
top: 84px !important;
}
/* 4) 抽屉打开时占满整宽（去掉右侧 15px 缝隙） */
#ast-mobile-popup.ast-mobile-popup-drawer.active,
#ast-mobile-popup.ast-mobile-popup-drawer.active.show {
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
/* 5) 抽屉内部不再显示独立关闭按钮（头部按钮本身会变叉） */
#ast-mobile-popup .ast-mobile-popup-header {
display: none !important;
}
/* 6) 抽屉顶部与导航栏底部齐平（含登录态 admin bar 补偿） */
#ast-mobile-popup .ast-mobile-popup-inner {
top: 84px !important;
}
body.admin-bar #ast-mobile-popup .ast-mobile-popup-inner,
body.admin-bar #ast-mobile-popup .ast-mobile-popup-overlay {
top: 116px !important;
}
/* 8) 滑出/滑回动画更顺滑 */
#ast-mobile-popup .ast-mobile-popup-inner {
transition: transform 0.28s ease-out, opacity 0.25s ease-out !important;
}
/* 9) X 图标本身随状态切换显示（主题默认把 close svg 隐藏了） */
#ast-mobile-header .menu-toggle .ast-close-svg {
display: none !important;
}
#ast-mobile-header .menu-toggle[aria-expanded="true"] .ast-close-svg,
body.ast-popup-nav-open #ast-mobile-header .menu-toggle .ast-close-svg {
display: block !important;
}
/* 10) 抽屉外层不覆盖导航栏：打开时与抽屉内容同一起点，保证汉堡/X 按钮始终可点击 */
#ast-mobile-popup.ast-mobile-popup-drawer,
#ast-mobile-popup.ast-mobile-popup-drawer.active {
top: 84px !important;
bottom: 0 !important;
}
body.admin-bar #ast-mobile-popup.ast-mobile-popup-drawer,
body.admin-bar #ast-mobile-popup.ast-mobile-popup-drawer.active {
top: 116px !important;
}
/* 11) 抽屉打开时 Astra 会用内联样式隐藏汉堡按钮，这里强制保持可见（用于叉号关闭） */
body.ast-popup-nav-open #ast-mobile-header .menu-toggle,
#ast-mobile-header .menu-toggle[aria-expanded="true"] {
display: inline-flex !important;
}
/* ===== 手机端抽屉菜单 · 最终版（Essence of Tea 风格，关闭叉纯 CSS 实现） ===== */
/* 打开时隐藏头部原生汉堡按钮（由抽屉内固定到同位置的叉替代） */
body.ast-popup-nav-open #ast-mobile-header .menu-toggle,
#ast-mobile-header .menu-toggle[aria-expanded="true"] {
display: none !important;
}
/* 抽屉滑入滑出改用 left 动画；去掉 inner 的 transform 和 backdrop-filter，
让抽屉内的关闭叉可以用 position:fixed 固定到导航栏汉堡按钮的位置 */
#ast-mobile-popup .ast-mobile-popup-inner {
transform: none !important;
left: -100% !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
transition: left 0.28s ease-out, opacity 0.25s ease-out !important;
}
#ast-mobile-popup.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
#ast-mobile-popup.ast-mobile-popup-drawer.active.show .ast-mobile-popup-inner {
left: 0 !important;
}
/* 毛玻璃效果移到内容区（blur 与导航栏一致） */
#ast-mobile-popup .ast-mobile-popup-content {
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
flex: 1 1 auto !important;
min-height: 100% !important;
}
/* 抽屉关闭叉：透明细线，固定在汉堡按钮原位置 */
#ast-mobile-popup .ast-mobile-popup-header {
display: flex !important;
position: fixed !important;
top: 20px !important;
left: 20px !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
justify-content: center !important;
align-items: center !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
z-index: 100002 !important;
min-height: 0 !important;
}
body.admin-bar #ast-mobile-popup .ast-mobile-popup-header {
top: 52px !important;
}
#ast-mobile-popup .menu-toggle-close {
color: #1F1B16 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
font-size: 22px !important;
line-height: 1 !important;
padding: 0 !important;
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#ast-mobile-popup .menu-toggle-close .ast-close-svg,
#ast-mobile-popup .menu-toggle-close .ahfb-svg-iconset {
width: 22px !important;
height: 22px !important;
}
/* 对齐：关闭叉与汉堡按钮同一水平位置 */
#ast-mobile-popup .ast-mobile-popup-header {
left: 45px !important;
}
/* ===== 手机端抽屉菜单 · 二轮修复 ===== */
/* 1) 汉堡图标强制品牌深色（覆盖主题的白色 fill） */
#ast-mobile-header .menu-toggle .ast-mobile-svg,
#ast-mobile-header .menu-toggle .ast-mobile-svg path {
fill: #1F1B16 !important;
stroke: none !important;
color: #1F1B16 !important;
}
/* 2) 抽屉打开时锁定页面滚动，防止在抽屉上滑动带动后面的页面 */
html.ast-off-canvas-active,
html.ast-off-canvas-active body {
overflow: hidden !important;
}
/* 3) 阻止抽屉滚动穿透：在抽屉内滚动不会带动后面的页面 */
#ast-mobile-popup,
#ast-mobile-popup .ast-mobile-popup-inner {
overscroll-behavior: contain !important;
overscroll-behavior-y: contain !important;
}
/* ===== 手机端抽屉菜单 · 动画同步修复 + 账户图标样式 ===== */
/* 1) 抽屉面板层：半透明米白 + 毛玻璃（伪元素，动画期间背景稳定同步，不影响 fixed 子元素） */
#ast-mobile-popup .ast-mobile-popup-inner::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(252, 252, 251, 0.85) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
z-index: 0 !important;
pointer-events: none !important;
}
#ast-mobile-popup .ast-mobile-popup-content {
position: relative !important;
z-index: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
overflow-y: auto !important;
min-height: 0 !important;
flex: 1 1 auto !important;
overscroll-behavior: contain !important;
overscroll-behavior-y: contain !important;
}
#ast-mobile-popup .ast-mobile-popup-inner {
opacity: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: transparent !important;
overflow: visible !important;
}
/* 2) 移动端导航栏右侧账户图标（由 SP Mobile Account 插件克隆到头部） */
@media (max-width: 1024px) {
#ast-mobile-header .sp-mobile-account {
position: absolute !important;
right: 20px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 44px !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
z-index: 5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
}
#ast-mobile-header .sp-mobile-account .ast-header-account-wrap {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
}
#ast-mobile-header .sp-mobile-account a {
color: #1F1B16 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
#ast-mobile-header .sp-mobile-account svg {
width: 20px !important;
height: 20px !important;
}
#ast-mobile-header .sp-mobile-account svg path,
#ast-mobile-header .sp-mobile-account svg circle {
fill: #1F1B16 !important;
stroke: none !important;
}
}
/* ===== My Account 页面：与登录页/全站统一 ===== */
/* 读屏专用隐藏（用于把标签视觉隐藏、提示文字放进输入框） */
.sp-sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* 标题区：未登录显示 Sign in，已登录显示 My Account */
body.logged-in .sp-acc-hero,
body.logged-in .sp-acc-sub {
display: none !important;
}
body:not(.logged-in) .sp-acc-hero-in,
body:not(.logged-in) .sp-acc-sub-in {
display: none !important;
}
.sp-acc-hero .elementor-heading-title,
.sp-acc-hero-in .elementor-heading-title {
font-family: 'Literata', Georgia, serif;
font-size: 34px;
line-height: 1.2;
font-weight: 400;
color: #1F1B16;
}
.sp-acc-sub,
.sp-acc-sub-in {
font-family: 'Literata', Georgia, serif;
font-size: 16px;
line-height: 1.7;
color: rgba(31, 27, 22, 0.65);
}
/* 登录/注册表单：透明无边框，与登录页同风格 */
.woocommerce-account #customer_login {
max-width: 100%;
}
.woocommerce-account #customer_login h2 {
font-family: 'Literata', Georgia, serif;
font-size: 20px;
font-weight: 400;
color: #1F1B16;
letter-spacing: 0.3px;
margin: 0 0 20px;
}
.woocommerce-account form.login,
.woocommerce-account form.register {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
}
/* 标签：视觉隐藏（保留给读屏器），提示文字用 placeholder */
.woocommerce-account #customer_login form label:not(.inline) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* 输入框：与全站一致 */
/* 2026-09-07: dropped the page-wide .woocommerce-account input selectors —
they leaked into the footer email field and every other form. Address
forms are styled by sp-account-style.css. */
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"] {
font-family: 'Literata', Georgia, serif;
font-size: 16px;
color: #1F1B16;
background: #FFFFFF;
border: 1px solid #D9D9D9;
border-radius: 0;
box-shadow: none;
padding: 0 14px;
min-height: 46px;
height: 46px;
width: 100%;
box-sizing: border-box;
margin: 0 0 14px;
}
.woocommerce-account #customer_login input::placeholder {
color: rgba(31, 27, 22, 0.55);
opacity: 1;
}
.woocommerce-account #customer_login input:focus,
.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus {
border-color: #1F1B16;
box-shadow: none;
outline: none;
}
/* 按钮：与全站统一 */
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account a.button,
.woocommerce-account .woocommerce-Button {
background: #1F1B16 !important;
color: #FFFFFF !important;
border: 1px solid #1F1B16 !important;
border-radius: 0 !important;
font-family: 'Literata', Georgia, serif;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
padding: 13px 26px;
min-height: 46px;
box-shadow: none !important;
text-shadow: none !important;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account a.button:hover,
.woocommerce-account .woocommerce-Button:hover {
background: transparent !important;
color: #1F1B16 !important;
border-color: #1F1B16 !important;
}
/* 记住我 */
.woocommerce-account form.login .rememberme,
.woocommerce-account form.login label.inline {
font-size: 14px;
color: #1F1B16;
}
/* 账户导航 */
.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
font-family: 'Literata', Georgia, serif;
font-size: 15px;
color: #1F1B16;
padding: 11px 0;
display: block;
border-bottom: 1px solid rgba(31, 27, 22, 0.1);
text-decoration: none;
transition: opacity 0.2s ease;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
color: #1F1B16;
border-bottom-color: #1F1B16;
}
/* 账户内容区 */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
font-family: 'Literata', Georgia, serif;
font-weight: 400;
color: #1F1B16;
}
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content address,
.woocommerce-account .woocommerce-order-overview {
font-family: 'Literata', Georgia, serif;
color: #1F1B16;
}
/* 订单表格 */
.woocommerce-account table.shop_table {
border: 1px solid rgba(31, 27, 22, 0.12);
border-radius: 0;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
border-color: rgba(31, 27, 22, 0.12);
font-family: 'Literata', Georgia, serif;
color: #1F1B16;
padding: 12px 14px;
}
/* 地址卡片 */
.woocommerce-account .woocommerce-Address {
background: transparent;
border: 1px solid rgba(31, 27, 22, 0.12);
border-radius: 0;
padding: 22px;
}
.woocommerce-account .woocommerce-Address h3 {
font-family: 'Literata', Georgia, serif;
font-weight: 400;
color: #1F1B16;
}
/* 移动端双栏变单栏 */
@media (max-width: 767px) {
.woocommerce-account .u-columns {
display: block !important;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
width: 100% !important;
margin-bottom: 48px;
}
}
/* ===== Hero 标题：独立样式，完全不受全局 H1/H2 影响 =====
参考 Kettl：300 细体、32px、无描边、白字（2026-08-21）
注意：section 的 id="sHero" 因数据导入未渲染，CSS 必须用 class 选择器；
Elementor 会剥掉 h2 上的 class/style 属性（实测），所以用
.elementor-widget-container h2 结构选择器 + 全属性 !important 覆盖，
任何全局 h2 规则（字号/内边距/行高/颜色）都无法再影响 hero 标题 */
.elementor-element-sHero .elementor-widget-container h2 {
color: #ffffff !important;
font-weight: 400 !important;
font-size: 28px !important;
line-height: 1.35 !important;
padding: 0 !important;
margin: 0 !important;
text-shadow: none !important;
letter-spacing: normal !important;
text-transform: none !important;
}
/* ===== Blog archive: editorial single-column flow with meta rail (2026-08-24 v3) ===== */
/* Reference: Fonts In Use (meta rail left) + Mud & Leaves (title -> image -> excerpt flow) */
/* Page header: big "Blog" title via ::before (works even with 1-2 posts) */
body.blog #primary {
padding-top: 48px !important;
}
body.blog #primary::before {
content: "Notes";
display: block;
font-family: 'Literata', Georgia, serif !important;
font-size: 42px;
font-weight: 700;
line-height: 1.1;
color: #1F1B16;
margin: 0 0 8px;
letter-spacing: -0.5px;
}
body.blog #primary::after {
content: "";
display: block;
width: 100%;
height: 1px;
background: rgba(31, 27, 22, 0.15);
margin: 28px 0 56px;
}
/* Article: transparent editorial row, hairline divider between entries */
body.blog article {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 0 56px !important;
margin: 0 0 48px !important;
border-bottom: 1px solid rgba(31, 27, 22, 0.15) !important;
}
body.blog article:last-of-type {
border-bottom: none !important;
margin-bottom: 0 !important;
}
/* Two-column grid: meta rail (left) + content (right) */
body.blog .post-content {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
grid-template-areas:
"meta title"
"meta thumb"
"meta excerpt"
"meta readmore";
column-gap: 40px;
}
body.blog .entry-header {
grid-area: meta;
}
body.blog .entry-title {
grid-area: title;
}
body.blog .post-thumb-img-content {
grid-area: thumb;
}
body.blog .ast-excerpt-container {
grid-area: excerpt;
}
body.blog .read-more {
grid-area: readmore;
}
/* Hide Astra's empty entry-content wrapper so it doesn't create a stray grid cell */
body.blog .post-content .entry-content {
display: none !important;
}
/* Meta rail: date, small serif grey — Fonts In Use style eyebrow */
body.blog .entry-meta {
font-family: 'Literata', Georgia, serif !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: rgba(31, 27, 22, 0.55) !important;
margin: 6px 0 0 !important;
}
body.blog .entry-meta a {
color: rgba(31, 27, 22, 0.55) !important;
text-decoration: none !important;
pointer-events: none !important;
}
/* Title: bold sans-serif, editorial headline */
body.blog .entry-title {
font-family: 'Literata', Georgia, serif !important;
font-size: 28px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
letter-spacing: -0.3px !important;
color: #1F1B16 !important;
margin: 0 0 22px !important;
}
body.blog .entry-title a {
color: #1F1B16 !important;
text-decoration: none !important;
}
body.blog .entry-title a:hover {
color: #1F1B16 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* Featured image: full content-column width, no radius, right after the title */
body.blog .post-thumb-img-content {
margin: 0 0 24px !important;
width: 100% !important;
}
body.blog .post-thumb-img-content img {
width: 100% !important;
height: auto !important;
border-radius: 0 !important;
display: block;
}
/* Excerpt: readable body copy */
body.blog .ast-excerpt-container {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: #4A4238 !important;
margin: 0 !important;
}
body.blog .ast-excerpt-container p {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: #4A4238 !important;
margin: 0 !important;
}
/* Read more: small uppercase editorial link */
body.blog .read-more {
margin: 22px 0 0 !important;
}
body.blog .read-more a {
font-family: 'Literata', Georgia, serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #1F1B16 !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(31, 27, 22, 0.4) !important;
padding-bottom: 2px !important;
transition: border-color 0.2s ease;
}
body.blog .read-more a:hover {
border-bottom-color: #1F1B16 !important;
}
/* Mobile: single column, meta moves above title, image full width */
@media (max-width: 768px) {
body.blog .post-content {
display: block !important;
}
body.blog .entry-meta {
margin: 0 0 10px !important;
}
body.blog .entry-title {
font-size: 24px !important;
margin-bottom: 16px !important;
}
}
/* Single post page: keep reading width comfortable; widen on desktop for the TOC rail.
1320px so the body column (right of the 220px TOC) centers on the viewport */
body.single .ast-container {
max-width: 760px !important;
}
@media (min-width: 1025px) {
body.single .ast-container {
max-width: 1320px !important;
}
}
body.single .entry-content {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: #1F1B16 !important;
}
/* Single post: match About page heading scale (30px) and give paragraphs clear breathing room */
body.single .entry-content h2 {
font-size: 30px !important;
line-height: 1.25 !important;
font-weight: 400 !important;
margin: 2.2em 0 0.8em !important;
color: #1F1B16 !important;
}
body.single .entry-content h3 {
font-size: 22px !important;
line-height: 1.3 !important;
font-weight: 400 !important;
margin: 2em 0 0.8em !important;
color: #1F1B16 !important;
}
body.single .entry-content p {
margin: 0 0 1.8em !important;
}
body.single .entry-content figure {
margin: 2.2em 0 !important;
}
body.single .entry-content figure img {
display: block !important;
margin: 0 auto !important;
}
/* Single post image captions: match About page caption style (13px, muted, below image) */
body.single .entry-content figcaption.wp-element-caption {
display: block !important;
margin: 12px auto 0 !important;
padding: 0 !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
color: rgba(31, 27, 22, 0.62) !important;
font-family: 'Literata', Georgia, serif !important;
font-size: 13px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.6 !important;
text-align: center !important;
}
@media (max-width: 767px) {
body.single .entry-content figcaption.wp-element-caption {
margin: 10px auto 0 !important;
font-size: 12px !important;
}
}
/* Single post: editor's note (r/tea origin line) — upright, muted, smaller, no italics */
body.single .entry-content p.sp-editors-note,
body.single .entry-content p.sp-editors-note em {
font-style: normal !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
color: rgba(31, 27, 22, 0.62) !important;
letter-spacing: normal !important;
}
/* Single post: lede (subtitle) — upright like the rest of the body, slightly larger */
body.single .entry-content p.sp-post-lede,
body.single .entry-content p.sp-post-lede em {
font-style: normal !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #1F1B16 !important;
letter-spacing: normal !important;
}
/* Single post: subtitle now lives in the entry header (source: Excerpt field),
directly under the title, with the byline below it. */
body.single .entry-header .sp-post-lede,
body.single .entry-header .sp-post-lede em {
font-style: normal !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
color: #1F1B16 !important;
letter-spacing: normal !important;
margin: 14px 0 0 !important;
}
body.single .entry-header .entry-meta {
margin-top: 18px !important;
}
@media (max-width: 767px) {
body.single .entry-header .sp-post-lede {
margin-top: 8px !important;
}
}
/* Search section (2026-09-04): now serves as the white band under the hero.
Only the caption (sp-hero-sub) shows; title + search box stay hidden
(not enough content yet). */
body.home .elementor-element-wSearchTitle,
body.home .elementor-element-wSearchBox,
body.home .elementor-section[data-id="sSearch"] .elementor-element-wSearchTitle,
body.home .elementor-section[data-id="sSearch"] .elementor-element-wSearchBox {
display: none !important;
}
/* ============================================================
Mobile polish (2026-08-26 round): article, homepage, blog list
============================================================ */
/* ---- Article: breathing room between title and byline ---- */
@media (max-width: 767px) {
body.single .entry-header h1.entry-title {
margin-bottom: 20px !important;
}
}
/* ---- Article: lede sits right under the title (meta moves below via JS) ---- */
@media (max-width: 767px) {
body.single .entry-content p.sp-post-lede {
margin-top: 4px !important;
}
body.single .entry-header .entry-meta {
font-size: 13px !important;
color: rgba(31, 27, 22, 0.55) !important;
margin-bottom: 28px !important;
}
}
/* ---- Article: editor's note slightly larger/darker on mobile ---- */
@media (max-width: 767px) {
body.single .entry-content p.sp-editors-note {
font-size: 15px !important;
color: rgba(31, 27, 22, 0.7) !important;
}
}
/* ---- Article: H2 not oversized on mobile ---- */
@media (max-width: 767px) {
body.single .entry-content h2 {
font-size: 24px !important;
line-height: 1.35 !important;
margin-top: 48px !important;
margin-bottom: 20px !important;
}
body.single .entry-content h3 {
font-size: 20px !important;
line-height: 1.4 !important;
margin-top: 36px !important;
}
}
/* ---- Article: body text line-height a touch airier on mobile ---- */
@media (max-width: 767px) {
body.single .entry-content p {
line-height: 1.78 !important;
}
}
/* ---- Homepage: hero full-screen on mobile/tablet (Kettl-style, 2026-08-28) ---- */
@media (max-width: 1024px) {
body.home .elementor-element-sHero {
min-height: 100vh !important;
min-height: 100svh !important;
padding-top: 88px !important;
padding-bottom: 48px !important;
background-attachment: scroll !important;
display: flex !important;
align-items: center !important;
}
body.home .elementor-element-sHero .elementor-container {
width: 100% !important;
}
body.home .elementor-element-cHero .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
}
}
/* ---- Homepage: hero title smaller on mobile ---- */
@media (max-width: 767px) {
body.home .sp-hero-title {
font-size: 18px !important;
line-height: 1.4 !important;
}
}
/* ---- Homepage: hero title on tablet ---- */
@media (min-width: 768px) and (max-width: 1024px) {
body.home .sp-hero-title {
font-size: 21px !important;
}
}
/* ---- Homepage: MORE... button centered with its section ---- */
@media (max-width: 767px) {
body.home .elementor-element-wAboutBtn,
body.home .elementor-element-wAboutBtn .elementor-widget-container {
text-align: center !important;
}
body.home .elementor-element-wAboutBtn .elementor-button {
margin: 0 auto !important;
}
}
/* ---- Blog list: restore breathing room on mobile ----
Astra's mobile rule .ast-separate-container #content .ast-container
only gives 0.54em (~9px) side padding — widen it.
Also clear the fixed header (84px) so the "Blog" ::before title is not covered. */
@media (max-width: 767px) {
body.blog.ast-separate-container #content .ast-container {
padding-left: 1.25em !important;
padding-right: 1.25em !important;
}
body.blog main.site-main {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.blog .content-area {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.blog #primary {
padding-top: 118px !important;
}
}
/* ============================================================
Header shrink + shadow on scroll (mobile & desktop)
body.sp-scrolled is toggled by the sp-header-shrink mu-plugin
============================================================ */
#masthead {
transition: height 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease !important;
box-shadow: 0 0 0 rgba(31, 27, 22, 0) !important;
}
body.sp-scrolled #masthead {
box-shadow: 0 2px 12px rgba(31, 27, 22, 0.12) !important;
}
@media (max-width: 767px) {
#masthead .ast-primary-header-bar {
transition: min-height 0.25s ease !important;
}
body.sp-scrolled #masthead .ast-primary-header-bar {
min-height: 52px !important;
}
body.sp-scrolled #masthead .ast-mobile-header-logo img,
body.sp-scrolled #masthead .custom-logo {
max-height: 28px !important;
width: auto !important;
transition: max-height 0.25s ease !important;
}
body.sp-scrolled #masthead .ast-builder-layout-element {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
}
/* ===== Hero 标题：静态单行（2026-09-02）=====
用户要求去掉轮换动画，改单行 Explore the unseen corners of Yixing.（首字母/专名大写+句号）
字重 300→400、字号 32→28（手机 18 / 平板 21）。
wIntro 的 h2 保留 class=sp-hero-title，无 span 结构。 */
/* ===== Hero beautify v3 (2026-09-04): gradient + light veil + 44px title + ghost button ===== */
/* 1) 压暗层：轻全局纱 + 自下而上渐变，保文字可读；不拦截点击 */
.elementor-element-sHero::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(10,8,6,.60) 0%, rgba(10,8,6,.28) 45%, rgba(10,8,6,.18) 100%);
z-index: 0;
pointer-events: none;
}
.elementor-element-sHero .elementor-background-video-container { z-index: 0; }
.elementor-element-sHero .elementor-container { position: relative; z-index: 1; }
/* 2) 标题放大 + 微字距 + 保底阴影（特异性压过 line-1598 旧规则） */
body.home .elementor-element-sHero .elementor-widget-container h2.sp-hero-title {
font-size: 44px !important;
letter-spacing: .02em !important;
text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}
@media (max-width: 767px) {
body.home .elementor-element-sHero .elementor-widget-container h2.sp-hero-title { font-size: 26px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
body.home .elementor-element-sHero .elementor-widget-container h2.sp-hero-title { font-size: 32px !important; }
}
/* 3) 幽灵按钮：透明底白描边，hover 翻转为白底墨字 */
.elementor-element-sHero [data-id="wHeroBtn"] .elementor-button {
background-color: transparent !important;
border: 1px solid rgba(255,255,255,.85) !important;
color: #FFFFFF !important;
border-radius: 0 !important;
transition: background-color .25s ease, color .25s ease;
}
.elementor-element-sHero [data-id="wHeroBtn"] .elementor-button:hover {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
}
/* ===== Hero beautify v4 (2026-09-04): sub-line + dual buttons row + scroll cue ===== */
/* cHero 改行式 flex：标题行/辅助句行各占整行，两按钮同行居中 */
body.home .elementor-element-cHero .elementor-widget-wrap {
flex-flow: row wrap !important;
justify-content: center !important;
align-items: center !important;
column-gap: 16px !important;
row-gap: 0 !important;
}
body.home .elementor-element-wIntro,
body.home .elementor-element-wHeroSub { flex: 0 0 100% !important; width: 100% !important; }
body.home .elementor-element-wHeroBtn,
body.home .elementor-element-wHeroShopBtn { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
/* 辅助句 */
body.home .elementor-element-sHero .sp-hero-sub,
body.home .elementor-element-sHero .sp-hero-sub p {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.7 !important;
color: rgba(255,255,255,.85) !important;
margin: 14px 0 0 !important;
padding: 0 !important;
letter-spacing: .01em !important;
text-align: center !important;
}
@media (max-width: 767px) {
body.home .elementor-element-sHero .sp-hero-sub,
body.home .elementor-element-sHero .sp-hero-sub p { font-size: 14px !important; }
}
/* 两个按钮统一站点按钮风格：直角 4px、Literata、大写 */
body.home .elementor-element-sHero [data-id="wHeroBtn"] .elementor-button,
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button {
font-family: 'Literata', Georgia, serif !important;
font-weight: 400 !important;
font-size: 15px !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
border-radius: 4px !important;
padding: 15px 24px !important;
margin: 8px 0 0 !important;
}
/* 双按钮完全一致：透明底 + 白描边 + 白字，hover 白底墨字 */
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button {
background-color: transparent !important;
color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,.85) !important;
transition: background-color .25s ease, color .25s ease;
}
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button:hover {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
}
/* 滚动提示：底部中央细线，往复动画 */
body.home .elementor-element-sHero::before {
content: "";
position: absolute;
bottom: 26px; left: 50%;
width: 1px; height: 34px;
background: rgba(255,255,255,.65);
transform: translateX(-50%);
animation: spScrollCue 2.2s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
@keyframes spScrollCue {
0%, 100% { transform: translateX(-50%) scaleY(.35); opacity: .35; transform-origin: top; }
50% { transform: translateX(-50%) scaleY(1); opacity: .9; transform-origin: top; }
}
/* ===== Hero Prada 化 v5 (2026-09-04)：内容下移 + 白带 caption ===== */
/* 1) hero 内容从垂直居中改为底部对齐（距底约 120px） */
body.home .elementor-element-cHero .elementor-widget-wrap {
justify-content: center !important;
align-content: flex-end !important;
padding-bottom: 120px !important;
}
/* 2) 辅助句已移至白带（cSearch 首位），深灰居中 caption 样式 */
body.home .elementor-element-cSearch .elementor-element-wHeroSub { margin: 0 !important; }
body.home .elementor-element-cSearch .elementor-element-wHeroSub,
body.home .elementor-element-cSearch .sp-hero-sub,
body.home .elementor-element-cSearch .sp-hero-sub p {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.8 !important;
color: #4A4238 !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: .01em !important;
}
@media (max-width: 767px) {
body.home .elementor-element-cSearch .sp-hero-sub,
body.home .elementor-element-cSearch .sp-hero-sub p { font-size: 14px !important; margin: 0 !important; }
}
/* 3) 白带留白加大 */
body.home .elementor-element-sSearch {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
min-height: 220px !important;
padding-top: 40px !important;
padding-bottom: 40px !important;
background-color: #FFFFFF !important;
}
/* ===== v5.1: hero 内容压底（section 实际为 block，用 flex column + justify-end） ===== */
body.home .elementor-7657 .elementor-element-sHero,
body.home .elementor-element-sHero {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: stretch !important;
padding-bottom: 0 !important;
min-height: 85vh !important;
min-height: 85svh !important;
height: auto !important;
}
body.home .elementor-element-sHero .elementor-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
align-items: flex-end !important;
}
body.home .elementor-element-sHero .elementor-container .elementor-column {
width: 100% !important;
}
/* ===== v5.2 (2026-09-04)：hero 85vh + 按钮等高 ===== */
/* ===== About 板块背景化 (2026-09-04)：工作室围桌看工艺图 + 白字 + 幽灵按钮 ===== */
body.home .elementor-element-sAbout {
background: linear-gradient(rgba(18,15,12,.52), rgba(18,15,12,.52)), url('https://solopotters.com/wp-content/uploads/2026/08/F3730BFF-0C88-4194-BFD5-9995FE4E4A51_1_105_c.jpeg') center / cover no-repeat !important;
background-attachment: fixed !important;
padding-top: 110px !important;
padding-bottom: 110px !important;
min-height: 670px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body.home .elementor-element-sAbout h2,
body.home .elementor-element-sAbout .elementor-widget-container h2 {
color: #FFFFFF !important;
font-size: 30px !important;
letter-spacing: .01em !important;
text-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
}
body.home .elementor-element-sAbout .elementor-widget-text-editor p,
body.home .elementor-element-sAbout p {
color: rgba(255,255,255,.88) !important;
}
body.home .elementor-element-sAbout [data-id="wAboutBtn"] .elementor-button,
body.home .elementor-element-sAbout .elementor-element-wAboutBtn .elementor-button {
background-color: transparent !important;
color: #FFFFFF !important;
border: 1px solid rgba(255,255,255,.85) !important;
border-radius: 4px !important;
font-family: 'Literata', Georgia, serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: .04em !important;
transition: background-color .25s ease, color .25s ease;
}
body.home .elementor-element-sAbout [data-id="wAboutBtn"] .elementor-button:hover,
body.home .elementor-element-sAbout .elementor-element-wAboutBtn .elementor-button:hover {
background-color: #FFFFFF !important;
color: #1F1B16 !important;
}
/* ===== Blog 精选板块 (2026-09-04)：奶油底 + 图左文右 ===== */
.sp-blog-show { background:#FFFFFF; padding:96px 48px; color:#1F1B16; font-family:'Literata',Georgia,serif; }
.sp-blog-show * { box-sizing:border-box; }
.sp-bs-in { max-width:1920px; margin:0 auto; }
.sp-bs-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(31,27,22,.5); margin:0 0 28px; }
.sp-bs-row { display:grid; grid-template-columns:55fr 45fr; gap:52px; align-items:center; }
.sp-bs-img img { width:100%; height:auto; display:block; border-radius:6px; }
.sp-bs-title { font-family:'Literata',Georgia,serif !important; font-size:26px !important; font-weight:500; line-height:1.4; margin:0 0 16px; }
.sp-bs-title a, .sp-bs-excerpt { font-family:'Literata',Georgia,serif !important; }
.sp-bs-title a { color:#1F1B16; text-decoration:none; }
.sp-bs-title a:hover { text-decoration:underline; text-underline-offset:4px; }
.sp-bs-excerpt { font-size:15px; line-height:1.8; color:#4A4238; margin:0 0 24px; }
.sp-bs-more { font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:600; color:#1F1B16; text-decoration:underline; text-underline-offset:4px; }
.sp-bs-more:hover { color:#A2603F; }
@media (max-width:860px) { .sp-bs-row { grid-template-columns:1fr; gap:28px; } .sp-blog-show { padding:64px 24px; } }
/* ===== v6 (2026-09-04)：首页淡灰底 + 板块纯白 + About 加高 fixed ===== */
/* 页面底：极淡灰；强调板块用纯白，不再使用米色 */
body.home {
background-color: #F6F5F3 !important;
}
/* ===== v6.1 (2026-09-04)：NR 板块引题化 =====
隐藏 "New Releases" 标题，I.M. Pei 引言作为板块新标题（字号不变） */
.sp-nr .nrtitle, .sp-nr .nrall { display: none !important; }
body.home .elementor-element-sNR .sp-hero-sub,
body.home .elementor-element-sNR .sp-hero-sub p {
font-family: 'Literata', Georgia, serif !important;
font-size: 16px !important;
line-height: 1.8 !important;
color: #4A4238 !important;
text-align: center !important;
margin: 0 auto !important;
padding: 0 !important;
letter-spacing: .01em !important;
}
body.home .elementor-element-sNR .sp-hero-attr,
body.home .elementor-element-sNR .sp-hero-attr p {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
letter-spacing: .06em !important;
color: rgba(31,27,22,.55) !important;
text-align: center !important;
margin: 18px 0 0 !important;
}
body.home .elementor-element-sNR .sp-hero-attr .attr-line {
display: inline-block !important;
width: 26px !important;
height: 1px !important;
background: rgba(31,27,22,.45) !important;
vertical-align: middle !important;
margin-right: 12px !important;
}
/* 引言块在 hero 与商品网格之间垂直居中 */
body.home .elementor-element-wHeroSub {
padding: 43px 24px 37px !important;
}
.sp-nr .nrhead { margin-bottom: 0 !important; }
/* ===== v6.3 (2026-09-04)：Available works 标签（网格左上角） ===== */
.sp-nr .sp-nr-label {
text-align: left !important;
margin: 0 0 24px !important;
}
/* ===== v6.4 (2026-09-04)：NR / Blog 板块容器放宽到 1920 ===== */
body.home .elementor-element-sNR .elementor-container,
body.home .elementor-element-sBlogShow .elementor-container {
max-width: none !important;
width: 100% !important;
}
body.home .elementor-element-sNR .elementor-column,
body.home .elementor-element-sBlogShow .elementor-column {
width: 100% !important;
}
/* ===== SEO H1（视觉隐藏） ===== */
.sp-seo-h1 {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---- Cart & Checkout: brand alignment (2026-09-04) ---- */
/* content below fixed header */
body.woocommerce-cart .site-content,
body.woocommerce-checkout .site-content {
padding-top: 118px !important;
}
/* generic Woo buttons: ink pill */
body.woocommerce-cart .woocommerce a.button,
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-checkout .woocommerce a.button,
body.woocommerce-checkout .woocommerce button.button {
background: #2a2824 !important;
color: #FFFFFF !important;
border: 0 !important;
border-radius: 999px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
padding: 12px 28px !important;
cursor: pointer;
}
body.woocommerce-cart .woocommerce a.button:hover,
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-checkout .woocommerce a.button:hover,
body.woocommerce-checkout .woocommerce button.button:hover {
opacity: 0.9;
}
/* secondary actions (update cart / apply coupon / qty) stay quiet */
body.woocommerce-cart .woocommerce button[name="update_cart"],
body.woocommerce-cart .woocommerce .coupon button.button {
background: transparent !important;
color: #2a2824 !important;
border: 1px solid #2a2824 !important;
border-radius: 999px !important;
}
body.woocommerce-cart .woocommerce button[name="update_cart"]:disabled,
body.woocommerce-cart .woocommerce button[name="apply_coupon"]:disabled {
opacity: 0.35 !important;
cursor: not-allowed;
}
/* coupon input */
body.woocommerce-cart .woocommerce .coupon input[type="text"] {
border: 1px solid #DDD8CF !important;
border-radius: 8px !important;
padding: 12px 14px !important;
font-size: 13px !important;
background: #FFFFFF !important;
}
/* cart table: borderless, hairline row separators only */
body.woocommerce-cart .woocommerce table.shop_table,
body.woocommerce-checkout .woocommerce table.shop_table {
border: 0 !important;
border-radius: 0 !important;
border-collapse: collapse !important;
background: transparent;
}
body.woocommerce-cart .woocommerce table.shop_table th {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
color: #6B675F !important;
font-weight: 600 !important;
padding: 16px 18px !important;
}
body.woocommerce-cart .woocommerce table.shop_table td,
body.woocommerce-checkout .woocommerce table.shop_table td {
border-top: 1px solid #EFEBE3 !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body.woocommerce-cart .woocommerce table.shop_table td {
padding: 18px !important;
vertical-align: middle;
}
body.woocommerce-cart .woocommerce table.shop_table img {
width: 72px !important;
border-radius: 6px;
}
body.woocommerce-cart .woocommerce table.shop_table .product-remove a {
color: #6B675F !important;
}
/* quantity input */
body.woocommerce-cart .woocommerce .quantity input[type="number"] {
border: 1px solid #DDD8CF !important;
border-radius: 8px !important;
padding: 10px 8px !important;
}
/* cart totals: no box, open layout */
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals {
border: 0 !important;
border-radius: 0 !important;
background: transparent;
padding: 8px 0 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #order_review {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
body.woocommerce-cart .cart_totals h2 {
font-size: 22px !important;
margin: 16px 0 8px !important;
}
body.woocommerce-cart .cart_totals table.shop_table {
border: 0 !important;
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
padding: 0 !important;
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
display: inline-block !important;
width: auto !important;
text-align: center !important;
padding: 12px 64px !important;
}
/* notices: quiet ink style */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
border-top-color: #2a2824 !important;
color: #2a2824 !important;
}
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before {
color: #2a2824 !important;
}
/* ---- Cart round 2 (2026-09-04): declutter ---- */
/* 去掉页面大标题 Cart */
body.woocommerce-cart h1.elementor-heading-title { display: none !important; }
/* 隐藏 Cart updated. 提示（数量改动已自动同步） */
body.woocommerce-cart .woocommerce-message { display: none !important; }
/* 数量自动更新，UPDATE CART 按钮冗余 */
body.woocommerce-cart button[name="update_cart"] { display: none !important; }
/* totals 区分割线与标题下划线等长：行内边距清零，通栏划线 */
body.woocommerce-cart .cart_totals table.shop_table { width: 100% !important; }
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td { padding-left: 0 !important; padding-right: 0 !important; }
/* 发货时间条 */
body.woocommerce-cart .sp-ship-note {
margin-top: 14px;
font-size: 13px;
color: #6B675F;
}
/* ---- Cart round 3: totals block right-aligned + accent (2026-09-04) ---- */
body.woocommerce-cart .cart_totals {
max-width: 480px;
margin-left: auto !important;
text-align: right;
}
body.woocommerce-cart .cart_totals table.shop_table { margin-left: auto; }
body.woocommerce-cart .sp-ship-note { text-align: right; }
body.woocommerce-cart .sp-ship-note .sp-hl { color: #A2603F; font-weight: 600; }
/* totals 行内容（label+金额）整体靠右 */
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td { text-align: right !important; }
/* ---- Cart totals redesign: quiet, no dividers (2026-09-04) ---- */
/* 块标题与其下划线去掉：金额区本身自解释 */
body.woocommerce-cart .cart_totals h2 { display: none !important; }
/* 所有行去掉分割线，只留垂直节奏 */
body.woocommerce-cart .cart_totals table.shop_table,
body.woocommerce-cart .cart_totals table.shop_table td,
body.woocommerce-cart .cart_totals table.shop_table th { border: 0 !important; }
body.woocommerce-cart .cart_totals table.shop_table td { padding: 5px 0 !important; }
/* Subtotal 行弱化为辅助信息 */
body.woocommerce-cart .cart_totals .cart-subtotal th,
body.woocommerce-cart .cart_totals .cart-subtotal td {
font-size: 13px !important;
font-weight: 400 !important;
color: #6B675F !important;
letter-spacing: 0.04em;
}
/* Total 行强化为视觉主体 */
body.woocommerce-cart .cart_totals .order-total th {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #2a2824 !important;
}
body.woocommerce-cart .cart_totals .order-total td .amount {
font-size: 20px !important;
font-weight: 600 !important;
color: #2a2824 !important;
}
/* Total 行与按钮之间留呼吸 */
body.woocommerce-cart .cart_totals .order-total td { padding-bottom: 16px !important; }
/* ---- Cart totals final: single Estimated total line (2026-09-04) ---- */
/* Subtotal 行删除（免邮定价下与 Total 恒等，纯噪音） */
body.woocommerce-cart .cart_totals .cart-subtotal { display: none !important; }
/* Total 标签改小字灰色（金额是主体） */
body.woocommerce-cart .cart_totals .order-total th {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.04em;
text-transform: none;
color: #6B675F !important;
vertical-align: middle;
}
body.woocommerce-cart .cart_totals .order-total td {
padding-bottom: 20px !important;
vertical-align: middle;
}
/* ---- Cart round 4: kill top gap, compact total row (2026-09-04) ---- */
body.woocommerce-cart .site-content { padding-top: 0 !important; }
body.woocommerce-cart .cart_totals table.shop_table {
width: auto !important;
margin-left: auto !important;
}
body.woocommerce-cart .cart_totals table.shop_table th { padding-right: 18px !important; }
body.woocommerce-cart .cart_totals table.shop_table td { text-align: left !important; }
body.woocommerce-cart .cart_totals .order-total th { text-transform: none !important; }
/* ---- Checkout page: full brand alignment (2026-09-04) ---- */
/* 与购物车一致的紧凑顶部；标题隐藏与 Cart 统一 */
body.woocommerce-checkout .site-content { padding-top: 36px !important; }
body.woocommerce-checkout h1.elementor-heading-title { display: none !important; }
/* 登录提示条：去黑粗条，改为一行浅色提示 */
body.woocommerce-checkout .woocommerce-info {
border: 0 !important;
border-left: 2px solid #D8D2C7 !important;
background: #F6F5F3 !important;
color: #6B675F !important;
padding: 14px 20px !important;
font-size: 14px;
}
body.woocommerce-checkout .woocommerce-info::before { display: none !important; }
body.woocommerce-checkout .woocommerce-info a { color: #2a2824 !important; text-decoration: underline; text-underline-offset: 3px; }
/* 错误横幅：安静化，陶土色细线 */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-error {
border: 0 !important;
border-left: 2px solid #A2603F !important;
background: #F6F5F3 !important;
color: #2a2824 !important;
padding: 14px 20px !important;
font-size: 13px;
line-height: 1.7;
}
body.woocommerce-checkout .woocommerce-error::before { display: none !important; }
body.woocommerce-checkout .woocommerce-error li { margin: 0 !important; }
body.woocommerce-checkout .woocommerce-error strong { font-weight: 600; }
/* 表单控件：统一 1px 米灰描边、圆角、白底 */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
border: 1px solid #DDD8CF !important;
border-radius: 8px !important;
background: #FFFFFF !important;
height: auto;
padding: 11px 14px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
color: #2a2824 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single { padding: 9px 14px !important; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.4; color: #2a2824; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
body.woocommerce-checkout .woocommerce form .form-row label {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #2a2824 !important;
margin-bottom: 7px !important;
}
/* 无效字段：去掉刺眼红/绿描边，只留浅提示 */
body.woocommerce-checkout .woocommerce form .form-row input.input-text.error,
body.woocommerce-checkout .woocommerce form .form-row select.error {
border-color: #DDD8CF !important;
background: #FFFFFF !important;
}
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #C77A5B !important; }
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid label { color: #A2603F !important; }
body.woocommerce-checkout .woocommerce form .form-row .optional { color: #6B675F; }
/* Your order：去盒子边框，与购物车 totals 同语言 */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
body.woocommerce-checkout #order_review_heading {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th,
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td {
padding: 10px 0 !important;
border-top: 1px solid #EFEBE3 !important;
font-size: 14px;
}
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table thead th {
border-top: 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6B675F !important;
font-weight: 600 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot th {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
text-transform: none;
color: #6B675F !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot td { text-align: right; }
body.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table tfoot .order-total td .amount {
font-size: 20px !important;
font-weight: 600 !important;
color: #2a2824 !important;
}
/* PayPal 说明与隐私文字：去灰底 */
body.woocommerce-checkout #payment {
background: transparent !important;
border-radius: 0 !important;
}
body.woocommerce-checkout #payment .payment_box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 6px 0 0 !important;
font-size: 13px !important;
color: #6B675F !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px solid #EFEBE3 !important;
padding: 0 0 14px !important;
}
body.woocommerce-checkout #payment div.place-order { margin-top: 18px; }
/* 下单按钮与全站统一（15px 句子大小写规则已全局覆盖） */
/* 结账页不再显示顶部错误列表：字段下方已有行内提示 */
body.woocommerce-checkout .woocommerce-error { display: none !important; }
/* ---- Cart: express pay buttons only at checkout (2026-09-06) ---- */
body.woocommerce-cart .ppcp-button-apm,
body.woocommerce-cart #ppc-button-ppcp-gateway,
body.woocommerce-cart .ppcp-messages { display: none !important; }
/* 错误/通知条：确保在内容流内完整显示，不被浮动元素遮挡 */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info {
position: static !important;
float: none !important;
width: auto !important;
margin: 0 0 20px !important;
z-index: 5;
}
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
position: static !important;
float: none !important;
}
/* 结账页 select2 下拉面板：品牌化（2026-09-06） */
body.woocommerce-checkout .select2-dropdown {
border: 1px solid #DDD8CF !important;
border-radius: 8px !important;
background: #FFFFFF !important;
overflow: hidden;
}
body.woocommerce-checkout .select2-results__option {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important;
padding: 10px 14px !important;
color: #2a2824 !important;
}
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #2a2824 !important;
color: #FFFFFF !important;
}
/* hide Additional information entirely */
body.woocommerce-checkout .woocommerce-additional-fields { display: none !important; }
/* no subtotal row in order review (items + total only) */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal { display: none !important; }
/* card form: compact rows, expiry + cvv share one line */
body.woocommerce-checkout #wc-ppcp-credit-card-gateway-cc-form p.form-row { margin-bottom: 2px !important; }
body.woocommerce-checkout #wc-ppcp-credit-card-gateway-cc-form p.form-row .payment_box { margin: 0 !important; }
body.woocommerce-checkout #wc-ppcp-credit-card-gateway-cc-form .form-row-first {
width: 48% !important; float: left !important; clear: none !important;
}
body.woocommerce-checkout #wc-ppcp-credit-card-gateway-cc-form .form-row-last {
width: 48% !important; float: right !important;
}
body.woocommerce-checkout #wc-ppcp-credit-card-gateway-cc-form .clear { display: none; }
/* ===== Payment skeleton: visible while SDK loads (2026-09-08) ===== */
.sp-pay-sk {
height: 46px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 16px;
margin: 4px 0 10px; opacity: .92;
}
.sp-pay-sk span { pointer-events: none; }
.sp-pay-sk--ppcp-gateway { background: #FFC439; color: #003087; font-style: italic; letter-spacing: .01em; }
.sp-pay-sk--ppcp-googlepay, .sp-pay-sk--ppcp-applepay { background: #000000; color: #FFFFFF; }
.sp-pay-sk.sp-pay-done { display: none !important; }
/* ===== Header: shopping bag icon left of avatar (2026-09-08) =====
The Astra cart element already exists (bag SVG, links to /cart/) but is collapsed
to 0x0 by inherited rules. Revive it as a pure icon: no price text. */
.ast-header-woo-cart,
.ast-header-woo-cart .ast-site-header-cart,
.ast-header-woo-cart .ast-site-header-cart-li { display: block !important; }
.ast-header-woo-cart .ast-woo-header-cart-info-wrap { display: none !important; }
.ast-header-woo-cart .ast-site-header-cart-li a.cart-container {
display: inline-flex !important; align-items: flex-end; justify-content: center;
width: 18px; height: 18px; padding: 0; border: none; margin-right: 12px;
position: relative;
}
.ast-header-woo-cart .ast-icon svg {
width: 18px !important; height: 18px !important; display: block;
position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
}
/* bag follows the avatar color logic: ink by default, white on home hero, ink again after scroll */
.ast-header-woo-cart .ast-icon svg path { fill: #111111 !important; }
body.home #masthead .ast-header-woo-cart .ast-icon svg path { fill: #ffffff !important; }
body.home #masthead.sp-nav-solid .ast-header-woo-cart .ast-icon svg path { fill: #111111 !important; }
/* remove the grey triangle above payment boxes */
body.woocommerce-checkout #payment ul.wc_payment_methods li .payment_box::before { display: none !important; }
/* collapse payment box chrome so G Pay button hugs the text above */
body.woocommerce-checkout #payment ul.wc_payment_methods li .payment_box {
padding: 6px 0 0 !important; margin: 4px 0 0 !important;
}
body.woocommerce-checkout #payment .payment_box p { margin: 0 0 10px !important; }
body.woocommerce-checkout #payment ul.wc_payment_methods { margin: 0 0 4px !important; }
/* no half-length divider under the Total row */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr:last-child td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td { border-bottom: none !important; }
/* cart bag: never show the count badge (double-lock with PHP filter) */
.ast-header-woo-cart .ast-icon-shopping-bag::after,
.ast-header-woo-cart [data-cart-total]::after { content: none !important; display: none !important; }
/* G Pay button: kill the big reserved gap above it */
body.woocommerce-checkout #payment .payment_box .ppcp-button-googlepay { margin-top: 0 !important; padding-top: 0 !important; }
body.woocommerce-checkout #payment .payment_box > * { margin-top: 0 !important; }
body.woocommerce-checkout #payment .payment_box p:first-child { margin-bottom: 6px !important; }
body.woocommerce-checkout #payment .place-order { margin-top: 4px !important; }
body.woocommerce-checkout .woocommerce-privacy-policy-text { margin-bottom: 2px !important; }
body.woocommerce-checkout #payment .payment_box .ppcp-button-apm { margin: 0 0 8px !important; }
/* our skeletons only ever appear for gateways that are NOT selected; never flash on switch */
.sp-pay-sk { display: none !important; }
/* G Pay / Apple Pay slot: collapse the empty applepay wrapper + button spacing */
body.woocommerce-checkout .ppc-button-wrapper { height: 45px !important; overflow: hidden !important; padding: 0 !important; margin: 6px 0 0 !important; }
body.woocommerce-checkout .ppc-button-wrapper > div:empty { display: none !important; }
body.woocommerce-checkout .ppc-button-rect.ppcp-button-apm { margin-top: 6px !important; }
body.woocommerce-checkout .ppc-button-wrapper .paypal-buttons { height: 45px !important; }
body.woocommerce-checkout .ppc-button-wrapper { margin-top: 6px !important; }
/* drop the fixed "Pay via PayPal." blurb inside the gateway box */
body.woocommerce-checkout .payment_method_ppcp-gateway .payment_box > p { display: none !important; }
/* payment boxes: no reserved empty space, no duplicate decorative buttons */
body.woocommerce-checkout #payment .payment_box .ppcp-button-container { display: none !important; }
body.woocommerce-checkout #payment .payment_box:empty { display: none !important; }
/* skeleton hides once its gateway is selected (real UI renders directly) */
body.woocommerce-checkout .wc_payment_method input:checked ~ .payment_box .sp-pay-sk { display: none !important; }
/* validation feedback: red outline + notices span the grid */
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid textarea { border-color: #a33b2e !important; }
body.woocommerce-checkout .woocommerce-NoticeGroup-updateOrderReview { grid-column: 1 / -1; }
/* ===== Checkout typography: two-font rule (2026-09-08) =====
Whole checkout area uses Plus Jakarta Sans only; section headings get the
PRODUCT header treatment; everything else reads like the Country label. */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.checkout * {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* unified type scale — one hierarchy for BOTH columns:
heading 16px/600 ink, label 13px gray, body 14px ink, inputs 15px ink */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #payment h3 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: .12em !important; text-transform: uppercase !important;
color: rgba(31,27,22,.5) !important;
margin: 0 0 0 !important;
padding: 10px 0 10px !important;
line-height: 1.3 !important;
border-bottom: 1px solid rgba(31,27,22,.18) !important;
}
/* spacing below the divider comes from the content, not the heading */
body.woocommerce-checkout .sp-email-line { margin: 16px 0 12px !important; }
body.woocommerce-checkout form.checkout label {
font-size: 13px !important; color: rgba(31,27,22,.55) !important;
}
body.woocommerce-checkout #payment label {
font-size: 14px !important; color: #1F1B16 !important;
}
body.woocommerce-checkout .sp-email-line .sp-email-k { font-size: 13px !important; color: rgba(31,27,22,.55) !important; }
body.woocommerce-checkout .sp-email-line .sp-email-v { font-size: 15px !important; color: #1F1B16 !important; }
body.woocommerce-checkout #payment .payment_box p { font-size: 13px !important; color: rgba(31,27,22,.7) !important; }
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
font-size: 13px !important; line-height: 1.65 !important; color: rgba(31,27,22,.55) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { font-size: 14px !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:nth-child(2) { visibility: hidden !important; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th { padding: 10px 0 !important; line-height: 1.3 !important; }
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea { font-size: 15px !important; }
body.woocommerce-checkout .sp-email-line .sp-email-v { font-family: 'Plus Jakarta Sans', sans-serif !important; }
/* "Pay via PayPal." blurb (deeper selector — the > p variant missed it) */
body.woocommerce-checkout .payment_method_ppcp-gateway .payment_box p { display: none !important; }
/* no divider anywhere in the order review table */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { border-bottom: none !important; border-top: none !important; }
/* ===== Checkout: EoT two-column shell (2026-09-08) ===== */
/* left = address + payment, right = order summary; stacks below 900px */
body.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: 460px minmax(0, 1fr);
gap: 48px;
align-items: start;
}
body.woocommerce-checkout #order_review { max-width: 520px; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: 6px !important; }
body.woocommerce-checkout #payment { margin-top: 8px !important; }
body.woocommerce-checkout #customer_details {
grid-column: 1; grid-row: 1; float: none !important; width: 100% !important;
max-width: 460px;
}
body.woocommerce-checkout #payment .place-order button#place_order {
width: 100% !important; max-width: none;
}
body.woocommerce-checkout #payment .place-order { width: 100%; }
body.woocommerce-checkout #order_review { grid-column: 2; grid-row: 1; float: none !important; width: 100% !important; }
body.woocommerce-checkout #order_review_heading { display: none !important; }
body.woocommerce-checkout #customer_details .col-1 { width: 100% !important; float: none !important; }
body.woocommerce-checkout #customer_details .col-2 { display: none; }
/* payment block inside left column */
body.woocommerce-checkout #payment {
border-top: 1px dotted rgba(31,27,22,.18);
margin-top: 22px !important;
padding-top: 18px;
border-radius: 0;
background: transparent;
}
body.woocommerce-checkout #payment .place-order { margin-top: 14px; }
@media (max-width: 900px) {
body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 40px; }
body.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
body.woocommerce-checkout #order_review { grid-column: 1; grid-row: 2; }
}
/* ===== Checkout address: EoT multi-column layout (2026-09-08) ===== */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields {
display: grid;
grid-template-columns: repeat(6, 1fr);
column-gap: 12px;
align-items: start;
}
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row {
grid-column: span 6;
margin: 0 0 12px;
}
body.woocommerce-checkout #billing_first_name_field, body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #shipping_first_name_field, body.woocommerce-checkout #shipping_last_name_field { grid-column: span 3; }
body.woocommerce-checkout #billing_city_field, body.woocommerce-checkout #billing_state_field, body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #shipping_city_field, body.woocommerce-checkout #shipping_state_field, body.woocommerce-checkout #shipping_postcode_field { grid-column: span 2; }
/* name fields fill their half of the row */
body.woocommerce-checkout .form-row-first, body.woocommerce-checkout .form-row-last {
width: 100% !important; float: none !important;
}
body.woocommerce-checkout .form-row-first input, body.woocommerce-checkout .form-row-last input { width: 100%; }
/* Country always first, phone last — survives Woo's locale JS re-render */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field { order: -1; }
body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #shipping_phone_field { order: 9; }
/* state select: long names collapse to a tidy "text..." inside the box */
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.woocommerce-checkout #billing_state_field .select2-selection__rendered,
body.woocommerce-checkout #shipping_state_field .select2-selection__rendered {
max-width: 100%;
}
/* no red asterisks on required fields */
body.woocommerce-checkout .sp-email-line {
grid-column: span 6;
display: flex; align-items: center; justify-content: space-between;
background: #F6F5F3; border: 1px solid #D9D9D9; border-radius: 8px;
padding: 14px 16px; margin: 0 0 12px;
}
body.woocommerce-checkout .sp-email-line .sp-email-k { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: rgba(31,27,22,.55); }
body.woocommerce-checkout .sp-email-line .sp-email-v { font-family: 'Literata', Georgia, serif; font-size: 15px; color: #1F1B16; }
body.woocommerce-checkout .woocommerce form .form-row label .required,
body.woocommerce-checkout .woocommerce form .form-row .required { display: none !important; }
/* ===== Sticky footer: footer always reaches viewport bottom (2026-09-08) ===== */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#page {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
#content > .ast-container, .site-content {
flex: 1 0 auto;
width: 100%;
}
.sp-footer, .site-footer {
margin-top: auto;
}
/* ===== reCAPTCHA v3 badge hidden + disclosure ===== */
.grecaptcha-badge { visibility: hidden !important; }
/* ===== Contact page: one-screen two-column (2026-09-08) ===== */
/* left = intro text, right = form; fits 14" MacBook without scrolling */
body.page-id-414 [data-id="7f18638"] > .e-con-inner { display: contents !important; }
body.page-id-414 [data-id="7f18638"] {
max-width: 1160px;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 28px;
padding-right: 28px;
}
body.page-id-414 [data-id="7f18638"] {
display: grid !important;
grid-template-columns: 45fr 55fr;
gap: 56px;
align-items: start;
}
body.page-id-414 .elementor-414 .e-con-inner {
padding-top: 8px !important;
padding-bottom: 24px !important;
}
body.page-id-414 .hfe-infocard-title { margin-bottom: 14px !important; }
body.page-id-414 .hfe-infocard-text p {
font-size: 15px !important;
line-height: 1.65 !important;
margin-bottom: 1em !important;
}
body.page-id-414 .srfm-form-container textarea { min-height: 96px !important; height: 96px !important; }
body.page-id-414 .srfm-form-container .srfm-block { margin-bottom: 10px !important; }
body.page-id-414 .srfm-form-container .srfm-input-block .srfm-block-wrap,
body.page-id-414 .srfm-form-container .srfm-email-block .srfm-block-wrap,
body.page-id-414 .srfm-form-container .srfm-textarea-block .srfm-block-wrap { margin-bottom: 0 !important; }
body.page-id-414 .srfm-form-container .srfm-error-wrap { min-height: 0 !important; height: auto !important; position: absolute !important; margin-top: 2px !important; }
body.page-id-414 .srfm-form-container .srfm-block { position: relative; }
body.page-id-414 .srfm-form-container .srfm-submit-container { margin-top: 14px !important; }
body.page-id-414 .srfm-form-container .srfm-submit-container button { width: auto !important; min-width: 160px; }
@media (max-width: 860px) {
body.page-id-414 [data-id="7f18638"] { grid-template-columns: 1fr; gap: 32px; }
}
/* logged-in header: the account icon drops ~2px vs guest state — keep it aligned with the bag */
body.logged-in .ast-header-account-wrap .ast-header-account-icon,
body.logged-in .ast-header-account-wrap svg { position: relative; top: -2px; }
/* ===== Cart drawer: brand style =====
The bag icon opens Astra's off-canvas mini-cart. Style it as part of the
shop UI (Plus Jakarta Sans, ink buttons) — distinct from Literata content.
Type scale mirrors the cart page: name > meta > price > total. */
.astra-cart-drawer {
width: 400px !important;
background: #FFFFFF !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: #1F1B16 !important;
}
.astra-cart-drawer .astra-cart-drawer-header {
background: #FFFFFF !important;
border-bottom: 1px solid rgba(31,27,22,.12) !important;
padding: 18px 24px !important;
display: flex; align-items: center;
}
.astra-cart-drawer .astra-cart-drawer-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: .12em !important; text-transform: uppercase !important;
color: rgba(31,27,22,.5) !important; margin: 0 !important;
}
.astra-cart-drawer .astra-cart-drawer-close { color: #1F1B16 !important; }
.astra-cart-drawer .astra-cart-drawer-close:hover { color: #A2603F !important; }
.astra-cart-drawer .astra-cart-drawer-content,
.astra-cart-drawer .widget_shopping_cart_content {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* item name: the loudest line */
.astra-cart-drawer .woocommerce-mini-cart-item,
.astra-cart-drawer .woocommerce-mini-cart-item a:not(.remove),
.astra-cart-drawer .woocommerce-mini-cart-item span,
.astra-cart-drawer .woocommerce-mini-cart-item bdi {
font-size: 13px !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item a:not(.remove) {
color: #1F1B16 !important; font-weight: 600 !important; line-height: 1.4;
}
/* item meta (variation, qty): quiet */
.astra-cart-drawer .woocommerce-mini-cart-item .quantity,
.astra-cart-drawer .woocommerce-mini-cart-item .variation {
color: rgba(31,27,22,.5) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5;
}
/* price per line: medium emphasis */
.astra-cart-drawer .woocommerce-mini-cart-item .amount {
font-weight: 600 !important; font-size: 13px !important; color: #1F1B16 !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item {
position: relative;
padding-right: 30px !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item a.remove {
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%);
width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.astra-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
background-image: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
}
/* subtotal: label light, value the biggest number */
.astra-cart-drawer .woocommerce-mini-cart__total {
font-family: 'Plus Jakarta Sans', sans-serif !important;
border-top: 1px dotted rgba(31,27,22,.2) !important;
padding-top: 12px !important; margin-top: 10px !important;
}
.astra-cart-drawer .woocommerce-mini-cart__total strong {
font-weight: 400 !important; font-size: 13px !important; color: rgba(31,27,22,.55) !important;
}
.astra-cart-drawer .woocommerce-mini-cart__total .amount {
font-weight: 600 !important; font-size: 16px !important; color: #1F1B16 !important;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons {
display: flex; gap: 10px;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button {
background: #2a2824 !important; color: #FFFFFF !important;
border: 0 !important; border-radius: 999px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important; font-weight: 600 !important;
padding: 12px 18px !important; margin: 0 !important;
flex: 1; text-align: center;
}
.astra-cart-drawer .woocommerce-mini-cart__buttons a.button:hover { opacity: .9 !important; }
.astra-cart-drawer .widget_shopping_cart .total, .astra-cart-drawer .total .amount { color: #1F1B16 !important; }
/* empty state: small and quiet */
.astra-cart-drawer .widget_shopping_cart_content p.woocommerce-mini-cart__empty-message {
font-family: 'Plus Jakarta Sans', sans-serif !important;
color: rgba(31,27,22,.5) !important; font-size: 13px !important;
}
.astra-cart-drawer .woocommerce-mini-cart__empty-message::before { color: rgba(31,27,22,.3) !important; }
/* neutralise Astra blue leftovers inside the drawer */
.astra-cart-drawer a { color: #1F1B16 !important; }
.astra-cart-drawer a:hover { color: #A2603F !important; }
/* Cart drawer empty state for guests: sign-in prompt */
.sp-drawer-login {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #1F1B16 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.sp-drawer-login:hover { color: #A2603F !important; }
/* ===== WooCommerce notices: calm brand style (no alarming default blocks) ===== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: #FFFFFF !important;
border: 1px solid rgba(31,27,22,.12) !important;
border-left: 3px solid #A2603F !important;
border-radius: 4px !important;
color: #1F1B16 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
line-height: 1.6 !important;
padding: 12px 16px !important;
box-shadow: none !important;
}
.woocommerce-message { border-left-color: #3d7a46 !important; }
.woocommerce-info { border-left-color: #A2603F !important; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: rgba(31,27,22,.35) !important; }
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
background: #2a2824 !important;
color: #FFFFFF !important;
border-radius: 4px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 8px 16px !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
background: #FFFFFF !important;
color: #1F1B16 !important;
border: 1px solid #1F1B16 !important;
}
/* ===== Request a refund page ===== */
body.page-id-8280 .entry-content {
max-width: 600px;
margin: 0 auto;
padding: 20px 28px 60px;
}
body.page-id-8280 .sp-refund-intro {
font-family: 'Literata', Georgia, serif;
font-size: 15px;
line-height: 1.7;
color: #4A4238;
}
body.page-id-8280 .sp-refund-intro a { color: #A2603F; }
/* refund form inputs: site standard */
#srfm-form-8279 .srfm-input-common,
#srfm-form-8279 textarea {
background-color: #FFFFFF !important;
border: 1px solid #D9D9D9 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: 'Literata', Georgia, serif !important;
font-size: 15px !important;
color: #1F1B16 !important;
box-sizing: border-box !important;
}
#srfm-form-8279 input.srfm-input-common { height: 46px !important; min-height: 46px !important; width: 100% !important; padding: 0 14px !important; }
#srfm-form-8279 textarea { min-height: 130px !important; padding: 12px 14px !important; line-height: 1.6 !important; width: 100%; }
#srfm-form-8279 .srfm-input-common::placeholder,
#srfm-form-8279 textarea::placeholder { color: rgba(31,27,22,.45) !important; opacity: 1 !important; }
#srfm-form-8279 .srfm-input-common:focus,
#srfm-form-8279 textarea:focus { border-color: #1F1B16 !important; outline: none !important; }
#srfm-form-8279 label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; color: rgba(31,27,22,.6) !important; }
#srfm-form-8279 .srfm-block { margin-bottom: 14px !important; }
/* Refund page refinements: small-caps title, tight form, ink send button */
body.page-id-8280 .entry-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
color: rgba(31, 27, 22, .55) !important;
text-align: left !important;
margin: 0 0 18px !important;
padding: 0 !important;
border: 0 !important;
line-height: 1.3 !important;
}
#srfm-form-8279 .srfm-block { margin-bottom: 8px !important; }
#srfm-form-8279 label { margin-bottom: 4px !important; display: block; }
#srfm-form-8279 .srfm-submit-button {
background: #2a2824 !important;
color: #FFFFFF !important;
border-radius: 4px !important;
border: 1px solid #2a2824 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 12px 30px !important;
cursor: pointer;
}
/* ===== Refund custom form ===== */
body.page-id-8280 .entry-header {
max-width: 600px;
margin: 0 auto;
padding: 28px 28px 0 !important;
}
body.page-id-8280 .entry-header .entry-title { margin: 0 0 14px !important; }
body.page-id-8280 .entry-content { padding-left: 28px !important; padding-right: 28px !important; }
.sp-refund-form .sp-rf-field { margin: 0 0 12px !important; }
.sp-refund-form label {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
color: rgba(31, 27, 22, .6) !important;
margin-bottom: 5px;
}
.sp-refund-form .sp-rf-input,
.sp-refund-form .sp-rf-select,
.sp-refund-form .sp-rf-textarea {
width: 100%;
box-sizing: border-box;
font-family: 'Literata', Georgia, serif;
font-size: 15px;
color: #1F1B16;
background: #FFFFFF;
border: 1px solid #D9D9D9;
border-radius: 0;
box-shadow: none;
padding: 0 14px;
height: 46px;
outline: none;
}
.sp-refund-form .sp-rf-textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.6; }
.sp-refund-form .sp-rf-input:focus,
.sp-refund-form .sp-rf-select:focus,
.sp-refund-form .sp-rf-textarea:focus { border-color: #1F1B16; }
.sp-refund-form .sp-rf-input[readonly] {
background: #F6F5F3;
color: rgba(31, 27, 22, .75);
cursor: not-allowed;
}
.sp-refund-form .sp-rf-file {
width: 100%;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
color: rgba(31, 27, 22, .7);
}
.sp-refund-form .sp-rf-hint {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important;
color: rgba(31, 27, 22, .5) !important;
margin: 6px 0 0 !important;
line-height: 1.5 !important;
}
.sp-refund-form .sp-rf-opt { color: rgba(31, 27, 22, .4); }
.sp-rf-photo {
border: 1px dashed rgba(31, 27, 22, .25);
border-radius: 6px;
padding: 12px 14px;
}
.sp-refund-form .sp-rf-actions { margin: 4px 0 0 !important; }
.sp-rf-send {
background: #2a2824 !important;
color: #FFFFFF !important;
border: 1px solid #2a2824 !important;
border-radius: 4px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 12px 30px !important;
cursor: pointer;
}
.sp-rf-send:hover {
background: #FFFFFF !important;
color: #1F1B16 !important;
}
.sp-rf-thanks {
font-family: 'Literata', Georgia, serif;
font-size: 15px;
color: #1F1B16;
margin: 20px 0 0;
}
/* Refund form: compact, labels hug their inputs */
body.page-id-8280 .sp-refund-intro { margin-bottom: 14px !important; }
.sp-refund-form .sp-rf-field { margin: 0 0 9px !important; }
.sp-refund-form label {
margin: 0 0 3px !important;
font-size: 12px !important;
color: rgba(31, 27, 22, .55) !important;
}
.sp-refund-form .sp-rf-input,
.sp-refund-form .sp-rf-select {
height: 40px !important;
padding: 0 12px !important;
}
.sp-refund-form .sp-rf-textarea { min-height: 78px !important; padding: 9px 12px !important; }
.sp-rf-photo { padding: 9px 12px !important; }
.sp-refund-form .sp-rf-hint { font-size: 11px !important; margin-top: 4px !important; }
.sp-refund-form .sp-rf-actions { margin-top: 2px !important; }
.sp-rf-send { padding: 10px 26px !important; font-size: 14px !important; }
/* Refund form: labels flush to their inputs */
.sp-refund-form .sp-rf-field { margin-bottom: 6px !important; }
.sp-refund-form label {
margin: 0 0 2px !important;
padding: 0 !important;
line-height: 1.2 !important;
display: block;
}
.sp-refund-form .sp-rf-input,
.sp-refund-form .sp-rf-select { margin: 0 !important; }
/* Refund: inline label+control rows */
.sp-refund-form .sp-rf-inline {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px !important;
}
.sp-refund-form .sp-rf-inline label {
margin: 0 !important;
white-space: nowrap;
}
.sp-refund-form .sp-rf-val {
font-family: 'Literata', Georgia, serif;
font-size: 15px;
font-weight: 600;
color: #1F1B16;
}
.sp-refund-form .sp-rf-inline .sp-rf-select {
width: auto;
min-width: 220px;
max-width: 70%;
margin: 0 !important;
}
/* Refund select: visible chevron + placeholder textarea spacing */
.sp-refund-form .sp-rf-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 14px;
padding-right: 38px !important;
cursor: pointer;
}
.sp-refund-form .sp-rf-textarea { display: block; margin-top: 2px !important; }
.sp-refund-form .sp-rf-textarea::placeholder { color: rgba(31, 27, 22, .45) !important; }
/* Empty-bag and any remaining Woo alert blocks: calm card, not alarm */
.woocommerce-cart .cart-empty,
.woocommerce .cart-empty,
.cart-empty {
background: #FFFFFF !important;
border: 1px solid rgba(31, 27, 22, .12) !important;
border-left: 3px solid #A2603F !important;
border-radius: 4px !important;
color: #1F1B16 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 13px !important;
padding: 12px 16px !important;
}
/* Checkout errors: clearly visible below the fixed header, still calm */
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
grid-column: 1 / -1;
margin-bottom: 14px;
}
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .sp-ac-input,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid select,
body.woocommerce-checkout form.checkout .form-row.woocommerce-invalid .select2-selection {
border-color: #A2603F !important;
}
/* Bulk checkout errors: one calm list, all missing fields at once */
.sp-checkout-errors {
background: #FFFFFF;
border: 1px solid rgba(31, 27, 22, .12);
border-left: 3px solid #A2603F;
border-radius: 4px;
color: #1F1B16;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
line-height: 1.6;
padding: 10px 14px;
margin-bottom: 14px;
}
.sp-checkout-errors[hidden] { display: none; }
.form-row.sp-checkout-invalid input,
.form-row.sp-checkout-invalid select,
.form-row.sp-checkout-invalid .select2-selection,
.form-row.sp-checkout-invalid textarea { border-color: #A2603F !important; }
/* Cart drawer on phones: never exceed the viewport */
@media (max-width: 520px) {
.astra-cart-drawer { width: 100vw !important; }
}
/* Product info tooltips: tap-to-open on touch (no hover) */
.sp-pv .sp-tip--open .tipbox { opacity: 1; visibility: visible; transform: translateY(0); }
/* ===== Mobile/tablet nav: always solid white, no shrink/fade (2026-09-08) ===== */
@media (max-width: 921px) {
#masthead,
#masthead .ast-primary-header-bar,
body.home #masthead,
body.home #masthead .ast-primary-header-bar,
body.home #masthead.sp-nav-solid {
background: #FFFFFF !important;
box-shadow: none !important;
border-bottom: 1px solid rgba(31, 27, 22, .08) !important;
}
/* keep header icons ink on the white bar (they were white for the desktop hero) */
body.home #masthead .ast-header-woo-cart .ast-icon svg path,
body.home #masthead a[href*="my-account"] .account-icon path,
body.home #masthead a[href*="my-account"] .account-icon circle {
fill: #111111 !important;
}
/* text links on the compact bar read ink */
body.home #masthead .ast-builder-menu .main-header-menu .menu-link {
color: #1F1B16 !important;
}
/* no transparent hero overlay height games on small screens */
body.home .elementor-element-sHero {
margin-top: 0 !important;
}
}
/* Mobile/tablet header: fixed height, no shrink on scroll */
@media (max-width: 921px) {
#masthead .ast-primary-header-bar,
#masthead .main-header-bar {
min-height: 56px !important;
height: 56px !important;
max-height: 56px !important;
transition: none !important;
}
#masthead .ast-primary-header-bar .ast-builder-layout-element,
#masthead .site-primary-header-wrap { min-height: 56px !important; }
#masthead img.custom-logo { max-height: 36px !important; width: auto !important; }
#masthead .ast-header-woo-cart,
#masthead .ast-header-account { display: flex; align-items: center; }
}
/* Mobile/tablet fixes: ink logo (no white-invert) + opaque menu drawer */
@media (max-width: 921px) {
body.home #masthead .site-logo-img img {
filter: none !important;
opacity: 1 !important;
}
/* hamburger drawer covers the hero completely — no video bleeding through */
.ast-mobile-popup-inner {
width: 100% !important;
max-width: 100% !important;
}
.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
background: rgba(255, 255, 255, 0) !important;
}
}
/* ===== Mobile menu: own full-screen menu (Astra popup retired) ===== */
@media (max-width: 921px) {
.ast-mobile-popup-drawer,
.ast-mobile-popup-overlay,
.ast-mobile-popup-header { display: none !important; }
.sp-mmenu {
position: fixed; inset: 0;
background: #FFFFFF;
z-index: 99999;
display: flex;
flex-direction: column;
padding: 96px 32px 40px;
overflow-y: auto;
}
.sp-mmenu[hidden] { display: none; }
.sp-mmenu-close {
position: absolute; top: 10px; right: 12px;
background: none; border: 0;
font-size: 34px; line-height: 1;
color: #1F1B16; cursor: pointer;
padding: 6px 10px;
}
.sp-mmenu nav { display: flex; flex-direction: column; gap: 6px; }
.sp-mmenu nav a {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 26px;
font-weight: 600;
color: #1F1B16;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid rgba(31, 27, 22, .08);
}
.sp-mmenu nav a:hover { color: #A2603F; }
.sp-mmenu-foot {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(31, 27, 22, .1);
}
.sp-mmenu-foot a {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 600;
color: #1F1B16;
text-decoration: underline;
text-underline-offset: 3px;
margin-right: 18px;
}
body.sp-mmenu-open { overflow: hidden; }
}
/* Mobile menu v2: panel slides from under the header; header stays */
@media (max-width: 921px) {
.sp-mmenu {
top: 56px !important;
padding: 20px 32px 40px;
}
/* custom hamburger -> X animation on the toggle */
#masthead .menu-toggle .sp-mm-icon,
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
#masthead .menu-toggle .sp-mm-icon span,
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span {
display: block;
width: 20px;
height: 2px;
background: #1F1B16;
border-radius: 1px;
margin: 3px 0;
transition: transform .28s ease, opacity .2s ease;
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(1),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(2),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(2) {
opacity: 0;
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(3),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* hide Astra's own toggle icons inside the button */
#masthead .menu-toggle .ahfb-svg-iconset,
#masthead .ast-mobile-menu-trigger-fill .ahfb-svg-iconset { display: none !important; }
}
/* Mobile menu v3: slide-in from right + symmetric X + visible by default */
@media (max-width: 921px) {
.sp-mmenu {
transform: translateX(100%);
transition: transform .32s ease;
top: 56px !important;
}
.sp-mmenu.sp-mmenu--open { transform: none; }
.sp-mm-icon { position: relative; width: 22px; height: 22px; }
.sp-mm-icon span {
position: absolute;
left: 1px; right: 1px;
top: 10px;
height: 2px;
margin: 0;
background: #1F1B16;
transition: top .28s ease, transform .28s ease, opacity .2s ease;
}
.sp-mm-icon span:nth-child(1) { top: 4px; }
.sp-mm-icon span:nth-child(3) { top: 16px; }
body.sp-mmenu-open .sp-mm-icon span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.sp-mmenu-open .sp-mm-icon span:nth-child(2) { opacity: 0; }
body.sp-mmenu-open .sp-mm-icon span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
}
/* Icon morph: final authoritative rules */
@media (max-width: 921px) {
#masthead .menu-toggle .sp-mm-icon,
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon {
display: flex;
align-items: center;
justify-content: center;
}
#masthead .menu-toggle .sp-mm-icon span,
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span {
transform: none;
}
#masthead .menu-toggle .sp-mm-icon span:nth-child(1),
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(1) {
top: 4px !important;
}
#masthead .menu-toggle .sp-mm-icon span:nth-child(3),
#masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(3) {
top: 16px !important;
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(1),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(1) {
top: 10px !important;
transform: rotate(45deg) !important;
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(2),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(2) {
opacity: 0 !important;
}
body.sp-mmenu-open #masthead .menu-toggle .sp-mm-icon span:nth-child(3),
body.sp-mmenu-open #masthead .ast-mobile-menu-trigger-fill .sp-mm-icon span:nth-child(3) {
top: 10px !important;
transform: rotate(-45deg) !important;
}
/* vertical centering in the header bar */
#masthead .menu-toggle,
#masthead .ast-mobile-menu-trigger-fill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
}
/* Align the hamburger/X icon vertically with the logo (logo centre = header 28px) */
@media (max-width: 921px) {
#masthead .menu-toggle .sp-mm-icon,
#ast-mobile-header .menu-toggle .sp-mm-icon,
.ast-mobile-menu-trigger-fill .sp-mm-icon {
margin-top: -9px;
}
}
/* Mobile menu: uniform item size, no divider above account */
@media (max-width: 921px) {
.sp-mmenu nav { gap: 2px; }
.sp-mmenu nav a {
font-size: 16px !important;
font-weight: 600;
padding: 9px 0;
}
.sp-mmenu-foot {
margin-top: 18px;
padding-top: 0;
border-top: 0;
}
.sp-mmenu-foot a { font-size: 16px !important; }
}
/* Mobile: drawer slides in from the LEFT */
@media (max-width: 921px) {
.sp-mmenu { transform: translateX(-100%); }
.sp-mmenu.sp-mmenu--open { transform: none; }
/* mobile header: show the bag icon, drop the avatar icon */
#ast-mobile-header .ast-header-woo-cart { display: block !important; }
#ast-mobile-header .ast-header-account,
#ast-mobile-header .sp-mobile-account { display: none !important; }
}
/* Mobile header: burger left, bag right, logo centred — all vertically level */
@media (max-width: 921px) {
#ast-mobile-header .ast-primary-header-bar { position: relative; }
#ast-mobile-header .site-branding {
position: absolute;
left: 50%;
top: 0;
width: 130px;
margin-left: -65px;
transform: none;
display: flex;
align-items: center;
height: 56px;
z-index: 2;
}
#ast-mobile-header .menu-toggle {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
margin: auto 0;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 3;
}
#ast-mobile-header .ast-header-woo-cart {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
margin: auto 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
#ast-mobile-header .ast-header-woo-cart .ast-site-header-cart-li { display: block; }
#ast-mobile-header .site-header-primary-section-left,
#ast-mobile-header .site-header-primary-section-right { width: 0; overflow: visible; }
}
/* Mobile bag: +3px larger, 2px lower */
@media (max-width: 921px) {
#ast-mobile-header .ast-header-woo-cart .ast-icon svg {
position: static !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
width: 21px !important;
height: 21px !important;
margin-top: 7px;
}
}
/* ===== Mobile/tablet navigation: fully self-drawn ===== */
@media (max-width: 921px) {
#ast-desktop-header, #ast-mobile-header, #masthead { display: none !important; }
body { padding-top: 56px !important; }
.sp-hdr {
position: fixed;
top: 0; left: 0; right: 0;
height: 56px;
background: #FFFFFF;
border-bottom: 1px solid rgba(31, 27, 22, .08);
z-index: 99999;
box-sizing: border-box;
}
.sp-hdr .sp-hdr-burger {
position: absolute;
left: 12px; top: 0; bottom: 0; margin: auto 0;
width: 44px; height: 44px;
border: 0; background: none; padding: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.sp-hdr .sp-hdr-link {
position: absolute;
left: 50%;
top: 0;
height: 56px;
display: flex;
align-items: center;
transform: translateX(-50%);
}
.sp-hdr .sp-hdr-logo { height: 18px; width: auto; display: block; }
.sp-hdr .sp-hdr-bag {
position: absolute;
right: 12px; top: 0; bottom: 0; margin: auto 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
color: #1F1B16;
}
.sp-hdr .sp-hdr-bag svg { width: 21px; height: 21px; }
/* burger lines + morph to X (menu open state on body) */
.sp-hdr .sp-mm-icon { position: relative; width: 22px; height: 22px; }
.sp-hdr .sp-mm-icon span {
position: absolute; left: 1px; right: 1px; top: 10px; height: 2px;
background: #1F1B16; margin: 0;
transition: top .28s ease, transform .28s ease, opacity .2s ease;
}
.sp-hdr .sp-mm-icon span:nth-child(1) { top: 4px; }
.sp-hdr .sp-mm-icon span:nth-child(3) { top: 16px; }
body.sp-mmenu-open .sp-hdr .sp-mm-icon span:nth-child(1) { top: 10px; transform: rotate(45deg); }
body.sp-mmenu-open .sp-hdr .sp-mm-icon span:nth-child(2) { opacity: 0; }
body.sp-mmenu-open .sp-hdr .sp-mm-icon span:nth-child(3) { top: 10px; transform: rotate(-45deg); }
/* the full-screen menu itself */
.sp-mmenu { top: 56px; padding: 24px 32px 40px; transform: translateX(-100%); }
.sp-mmenu.sp-mmenu--open { transform: none; }
}
@media (min-width: 922px) {
.sp-hdr { display: none !important; }
}
/* logo column centres on the link, not the img */
.sp-hdr .sp-hdr-link { position: absolute; left: 50%; top: 0; height: 56px; display: flex; align-items: center; transform: translateX(-50%); }
/* Empty states are plain text, never alert-looking */
.cart-empty,
.woocommerce .cart-empty,
.woocommerce-cart .cart-empty,
.woocommerce-cart .cart-empty.woocommerce-info {
border: 0 !important;
border-left: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 6px 0 !important;
color: rgba(31, 27, 22, .55) !important;
}
.astra-cart-drawer .woocommerce-mini-cart__empty-message {
border: 0 !important;
border-left: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: rgba(31, 27, 22, .55) !important;
}
/* no alert boxes inside the cart drawer at all */
.astra-cart-drawer .woocommerce-message,
.astra-cart-drawer .woocommerce-info,
.astra-cart-drawer .woocommerce-error {
border: 0 !important;
border-left: 0 !important;
background: transparent !important;
padding: 4px 0 !important;
color: #1F1B16 !important;
}
/* Unified calm notices: one neutral tone, no red/orange anywhere */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-left: 3px solid rgba(31, 27, 22, .35) !important;
}
.woocommerce-message { border-left-color: rgba(31, 27, 22, .35) !important; }
.woocommerce-info { border-left-color: rgba(31, 27, 22, .35) !important; }
.woocommerce-error { border-left-color: rgba(31, 27, 22, .35) !important; }
/* ===== Mobile/tablet cart drawer: self-drawn, mirrors the menu panel =====
Same language as .sp-mmenu (white full panel under the 56px header) but
slides in from the RIGHT. Astra's off-canvas cart is retired on mobile.
Item type scale mirrors the desktop cart drawer (name > meta > price). */
@media (max-width: 921px) {
/* Astra off-canvas cart: retire on mobile (desktop flyout untouched) */
#astra-mobile-cart-drawer,
.astra-mobile-cart-overlay { display: none !important; }
.sp-cdrawer {
position: fixed;
top: 56px; left: 0; right: 0; bottom: 0;
background: #FFFFFF;
z-index: 99990;
transform: translateX(100%);
transition: transform .32s ease;
display: flex;
flex-direction: column;
font-family: 'Plus Jakarta Sans', sans-serif;
color: #1F1B16;
box-shadow: -14px 0 36px rgba(31, 27, 22, .10);
}
.sp-cdrawer[hidden] { display: none !important; }
.sp-cdrawer.sp-cdrawer--open { transform: none; }
body.sp-cdrawer-open { overflow: hidden; }
/* header strip: same labelling as the desktop drawer */
.sp-cdrawer-head {
flex: 0 0 auto;
padding: 15px 32px 13px;
border-bottom: 1px solid rgba(31, 27, 22, .12);
}
.sp-cdrawer-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(31, 27, 22, .5);
}
/* scroll area: the item list scrolls, totals + buttons stay pinned */
.sp-cdrawer-body {
flex: 1 1 auto; min-height: 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
display: flex; flex-direction: column;
}
.sp-cdrawer .widget_shopping_cart { display: flex; flex-direction: column; flex: 1 1 auto; }
.sp-cdrawer .widget_shopping_cart_content { display: flex; flex-direction: column; flex: 1 1 auto; }
.sp-cdrawer ul.woocommerce-mini-cart {
flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
list-style: none; margin: 0; padding: 6px 32px;
}
.sp-cdrawer ul.woocommerce-mini-cart::after { content: ""; display: block; height: 8px; }
/* item rows */
.sp-cdrawer .woocommerce-mini-cart-item {
position: relative;
padding: 14px 34px 14px 0;
border-bottom: 1px solid rgba(31, 27, 22, .08);
overflow: hidden;
}
.sp-cdrawer .woocommerce-mini-cart-item:last-child { border-bottom: 0; }
.sp-cdrawer .woocommerce-mini-cart-item img {
width: 56px; height: 56px; object-fit: cover;
border-radius: 4px;
float: left; margin: 0 14px 0 0;
}
.sp-cdrawer .woocommerce-mini-cart-item a:not(.remove) {
display: block;
font-size: 13px; font-weight: 600; line-height: 1.4;
color: #1F1B16;
padding-right: 0;
}
.sp-cdrawer .woocommerce-mini-cart-item .quantity {
display: block;
font-size: 12px; font-weight: 400;
color: rgba(31, 27, 22, .55);
margin-top: 3px;
}
.sp-cdrawer .woocommerce-mini-cart-item .quantity .amount { font-size: 12px; }
.sp-cdrawer .woocommerce-mini-cart-item .variation { display: none; }
.sp-cdrawer .woocommerce-mini-cart-item a.remove {
position: absolute !important;
right: 0 !important; top: 50% !important;
transform: translateY(-50%);
width: 16px !important; height: 16px !important;
margin: 0 !important; padding: 0 !important;
font-size: 0 !important; line-height: 0 !important;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
border: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
}
.sp-cdrawer .woocommerce-mini-cart-item a.remove:hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.sp-cdrawer .woocommerce-mini-cart-item .blockUI { display: none !important; }
/* subtotal: quiet label, amount is the biggest number on the strip */
.sp-cdrawer .woocommerce-mini-cart__total {
flex: 0 0 auto;
display: flex; align-items: baseline; justify-content: space-between;
margin: 0; padding: 13px 32px 11px;
border-top: 1px dotted rgba(31, 27, 22, .3);
font-family: 'Plus Jakarta Sans', sans-serif;
}
.sp-cdrawer .woocommerce-mini-cart__total strong {
font-weight: 400; font-size: 13px; color: rgba(31, 27, 22, .55);
}
.sp-cdrawer .woocommerce-mini-cart__total .amount {
font-weight: 600; font-size: 16px; color: #1F1B16;
}
/* action buttons: full-width ink pills (matches desktop drawer) */
.sp-cdrawer .woocommerce-mini-cart__buttons {
flex: 0 0 auto;
display: flex; gap: 10px;
margin: 0; padding: 4px 32px calc(18px + env(safe-area-inset-bottom));
}
.sp-cdrawer .woocommerce-mini-cart__buttons a.button {
flex: 1; text-align: center;
background: #2a2824 !important; color: #FFFFFF !important;
border: 0 !important; border-radius: 999px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 14px !important; font-weight: 600 !important;
padding: 12px 18px !important; margin: 0 !important;
}
.sp-cdrawer .woocommerce-mini-cart__buttons a.button:hover { opacity: .9 !important; }
/* empty state: centred block, quiet message, self-width button (2026-09-08 v2) */
.sp-cdrawer .widget_shopping_cart_content:has(.ast-mini-cart-empty) { justify-content: center; }
.sp-cdrawer .widget_shopping_cart_content:has(.ast-mini-cart-empty) > .woocommerce-mini-cart__empty-message { display: none; }
.sp-cdrawer .ast-mini-cart-empty {
text-align: center;
padding: 0 40px;
}
.sp-cdrawer .ast-mini-cart-message { padding: 0; }
.sp-cdrawer .ast-mini-cart-message .woocommerce-mini-cart__empty-message,
.sp-cdrawer .woocommerce-mini-cart__empty-message {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px; font-weight: 400;
color: rgba(31, 27, 22, .6);
padding: 0 0 24px;
line-height: 1.6;
}
.sp-cdrawer .ast-mini-cart-empty .woocommerce-mini-cart__buttons {
justify-content: center;
padding: 0;
}
.sp-cdrawer .ast-mini-cart-empty .woocommerce-mini-cart__buttons a.button {
flex: 0 1 auto;
min-width: 0;
padding: 12px 28px !important;
}
.sp-cdrawer .woocommerce-mini-cart__empty-message .sp-drawer-login {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px; font-weight: 600;
color: #1F1B16 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.sp-cdrawer .woocommerce-mini-cart__empty-message .sp-drawer-login:hover { color: #A2603F !important; }
/* neutralise stray link colours inside the drawer */
.sp-cdrawer a { color: #1F1B16; }
.sp-cdrawer a:hover { color: #A2603F; }
}
/* bag ↔ X glyph swap on the self-drawn header (cart open state) */
.sp-hdr .sp-hdr-bag {
background: none !important;
border: 0 !important;
padding: 0 !important;
}
.sp-hdr .sp-hdr-bag-glyph { position: relative !important; width: 24px !important; height: 24px !important; display: block !important; }
.sp-hdr .sp-hdr-bag-glyph img,
.sp-hdr .sp-hdr-bag-glyph svg {
position: absolute; inset: 0; width: 100%; height: 100%;
transition: opacity .22s ease, transform .28s ease;
}
.sp-hdr .sp-hdr-bag-glyph img.sp-hdr-bag-img { opacity: 1; transform: scale(1); }
.sp-hdr .sp-hdr-bag-glyph svg { opacity: 0; transform: scale(.6) rotate(-30deg); }
body.sp-cdrawer-open .sp-hdr .sp-hdr-bag-glyph img.sp-hdr-bag-img { opacity: 0; transform: scale(.6) rotate(30deg); }
body.sp-cdrawer-open .sp-hdr .sp-hdr-bag-glyph svg { opacity: 1; transform: scale(1) rotate(0); }
/* ===== Hero buttons — mobile/tablet only: short labels, one row (2026-09-08)
Desktop keeps "READ THE NOTES / BROWSE THE TEAPOTS". On ≤921px the long
labels overflow the row and wrap; swap the text via ::after and give
teapots (primary action → Gallery) more padding than notes. ===== */
@media (max-width: 921px) {
body.home .elementor-element-sHero [data-id="wHeroBtn"] .elementor-button,
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button {
font-size: 0 !important;
text-transform: uppercase !important;
}
body.home .elementor-element-sHero [data-id="wHeroBtn"] .elementor-button .elementor-button-text,
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button .elementor-button-text {
display: none !important;
}
body.home .elementor-element-sHero [data-id="wHeroBtn"] .elementor-button::after {
content: "notes";
font-size: 15px !important;
letter-spacing: .04em !important;
}
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button::after {
content: "teapots";
font-size: 15px !important;
letter-spacing: .04em !important;
}
/* 一大一小:notes 紧凑, teapots 突出(主行动) */
body.home .elementor-element-sHero [data-id="wHeroBtn"] .elementor-button {
padding: 14px 20px !important;
}
body.home .elementor-element-sHero [data-id="wHeroShopBtn"] .elementor-button {
padding: 14px 30px !important;
}
}
/* ===== "What is this place?" section — mobile/tablet only (2026-09-08)
Desktop pins the section to min-height 670px; on ≤921px that leaves a
portrait photo stretched over a tall container with dead background above
and below the text. Collapse the section to hug its content so the same
cover photo reads as a landscape crop (tiny breathing room either side). ===== */
@media (max-width: 921px) {
body.home .elementor-element-sAbout {
min-height: 0 !important;
padding: 12px 0 !important;
/* fixed 背景在移动端按视口渲染(不随容器高变化且发糊)；改 scroll 让它 cover 容器本身 */
background-attachment: scroll !important;
}
/* 移动端排版：标题收小、正文松行距、按钮与文本的距离重新平衡 */
body.home .elementor-element-sAbout .elementor-element-wAboutTitle { margin-bottom: 16px !important; }
/* 高特异性：线上 CSS 会被优化器重排 @media 块，同特异性 !important 规则后出现者赢，
故把选择器拉深到 .elementor-element-wAboutTitle 之下以必胜 */
body.home .elementor-element-sAbout .elementor-element-wAboutTitle h2 {
font-size: 20px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
}
body.home .elementor-element-sAbout .elementor-widget-text-editor p {
font-size: 15px !important;
line-height: 2 !important;
margin: 0 0 4px !important;
padding: 0 18px !important;
}
body.home .elementor-element-sAbout .elementor-element-wAboutText { margin-bottom: 12px !important; }
}
/* ===== Global (non-home): page tops hug the fixed 56px mobile bar (2026-09-08)
The mobile header no longer shrinks on scroll (it is a fixed 56px bar), so the
large top paddings reserved for the old shrinking header are dead space.
Mobile/tablet only; desktop untouched. ===== */
@media (max-width: 921px) {
/* Blog list */
body.blog #primary { padding-top: 44px !important; }
/* Gallery placeholder page (id 7683) */
body.page-id-7683 .content-area { padding-top: 8px !important; }
/* Shop archive (.sp-sv comes from sp-shop-view.php inline CSS) */
body.post-type-archive-product .sp-sv { padding-top: 40px !important; }
}
/* ===== About page (id 43): first story block top padding on mobile (2026-09-08)
Elementor desktop padding-top 110px leaves a large gap once the "About"
page title is hidden; collapse it on mobile/tablet only. ===== */
@media (max-width: 921px) {
body.page-id-43 .elementor-element-6a827bc {
padding-top: 36px !important;
}
}
/* ===== About page (id 43): kill stray top gap above .site-content .ast-container
(2026-09-08) — whitespace text node in .site-content forms a line box on the
page template; pull the real container up. Target the .ast-container INSIDE
.site-content (the first one in the DOM lives in the hidden Astra header). ===== */
@media (max-width: 921px) {
body.page-id-43 .site-content .ast-container {
margin-top: -50px !important;
}
}
/* ===== About page (id 43): remove the injected "The gallery coming soon"
newsletter block entirely (mobile + desktop, 2026-09-08) ===== */
body.page-id-43 .sp-newsletter {
display: none !important;
}
/* ===== Single product page (.sp-pv) — mobile/tablet only (2026-09-08)
Desktop keeps the two-column grid (images right / buy box left). On ≤921px
the self-drawn template's own media rule gets overridden by the CSS
optimiser's reordering, so force a single column with HIGH specificity +
!important. Order: gallery on top (order -1) as a manual horizontal
swipe carousel (no autoplay, native scroll-snap), buy box below. Both hug
the width leaving the template's side margins. ===== */
/* swipe pagination dots are a mobile-only affordance — hidden by default on
desktop (the mobile block below overrides to flex with !important) */
body.single-product .sp-pv .sp-gdots { display: none; }
@media (max-width: 921px) {
body.single-product .sp-pv .layout {
grid-template-columns: 1fr !important;
display: grid !important;
gap: 26px !important;
}
body.single-product .sp-pv .buybox {
order: 2 !important;
position: static !important;
}
/* Gallery wrapper: image on top, manual swipe carousel (snap, no autoplay).
Ordering/grid placement + the fixed overlay live on .sp-pv-gal; the inner
.gallery is the ONLY scrolling element, so the dots (overlay sibling) do
NOT scroll away with the images. */
body.single-product .sp-pv .sp-pv-gal {
order: -1 !important;
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
}
body.single-product .sp-pv .gallery {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
}
body.single-product .sp-pv .gallery::-webkit-scrollbar { display: none !important; }
body.single-product .sp-pv .gallery figure {
flex: 0 0 100% !important;
scroll-snap-align: center !important;
margin: 0 !important;
/* force every image (portrait & landscape) into a fixed square cell so the
swipe track keeps one uniform height — no more landscape shots sitting
in the top half */
aspect-ratio: 1 / 1 !important;
}
body.single-product .sp-pv .gallery img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* pagination dots, overlaid on top of the image (mobile only); anchored to
.sp-pv-gal which does not scroll */
body.single-product .sp-pv .sp-gdots {
position: absolute !important;
top: 12px !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
justify-content: center !important;
gap: 6px !important;
z-index: 6 !important;
pointer-events: none !important;
}
body.single-product .sp-pv .sp-gdots button {
pointer-events: auto !important;
width: 6px !important;
height: 6px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 0 !important;
background: rgba(31, 27, 22, 0.22) !important;
}
body.single-product .sp-pv .sp-gdots button.is-on {
background: #1F1B16 !important;
}
}