/* site palette */
html:root {
--bg: #FFFFFF;
--surface: #F9F7F3;
--surface-alt: #F4F1E6;
--text: #2B2519;
--text-muted: #726A5A;
--border: #E4E0D8;
--primary: #F8CD2F;
--primary-hover: #F6C308;
--on-primary: #111111;
--primary-text: #29271E;
--accent: #29271E;
--on-accent: #FFFFFF;
--accent-text: #29271E;
--dark-band: #19160F;
--on-dark: #FFFFFF;
--on-dark-muted: #C3BFB6;
--brand-btn-bg: #111111;
--brand-btn-text: #F8CD2F;
--section-alt-bg: #F4F1E6;
--dark-band-bg: #19160F;
--brand-band-bg: #F8CD2F;
--hero-bg: #19160F;
--on-hero: #FFFFFF;
--footer-bg: #19160F;
--on-footer: #FFFFFF;
--on-footer-muted: #C3BFB6;
}
html:root {
--bs-primary: #F8CD2F;
--bs-primary-rgb: 248, 205, 47;
--bs-link-color: #29271E;
--bs-link-color-rgb: 41, 39, 30;
--bs-link-hover-color: #F6C308;
--mdb-primary: #F8CD2F;
--mdb-primary-rgb: 248, 205, 47;
}
.btn-primary {
--bs-btn-bg: var(--primary);
--bs-btn-border-color: var(--primary);
--bs-btn-color: var(--on-primary);
--bs-btn-hover-bg: var(--primary-hover);
--bs-btn-hover-border-color: var(--primary-hover);
--bs-btn-hover-color: var(--on-primary);
--bs-btn-active-bg: var(--primary-hover);
--bs-btn-active-border-color: var(--primary-hover);
--bs-btn-active-color: var(--on-primary);
background-color: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--on-primary);
}
.btn-outline-primary {
--bs-btn-color: var(--primary-text);
--bs-btn-border-color: var(--primary);
--bs-btn-hover-bg: var(--primary);
--bs-btn-hover-border-color: var(--primary);
--bs-btn-hover-color: var(--on-primary);
color: var(--primary-text);
border-color: var(--primary);
}
.btn-outline-primary:hover {
background-color: var(--primary);
color: var(--on-primary);
}
.text-primary,
.link-primary {
color: var(--primary-text) !important;
}
.bg-primary,
.text-bg-primary,
.badge.bg-primary {
color: var(--on-primary) !important;
}
/* /site palette */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'DM Serif Text', serif;
font-weight: 400;
background-color: var(--bg);
color: var(--text);
line-height: 1.6;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.text-muted {
color: var(--text-muted) !important;
}
.qx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--primary);
color: var(--on-primary);
font-family: 'DM Serif Text', serif;
font-size: 16px;
padding: 12px 28px;
border-radius: 9999px;
border: none;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.qx-btn:hover,
.qx-btn:focus {
background-color: var(--primary-hover);
color: var(--on-primary);
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.qx-btn-alt {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: var(--primary-text);
font-family: 'DM Serif Text', serif;
font-size: 16px;
padding: 10px 26px;
border-radius: 9999px;
border: 1.5px solid var(--accent);
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qx-btn-alt:hover,
.qx-btn-alt:focus {
background-color: var(--surface-alt);
color: var(--primary-text);
border-color: var(--accent);
}
.qx-card {
background-color: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
padding: 24px;
display: flex;
flex-direction: column;
height: 100%;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.qx-card:hover {
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
border-color: var(--primary);
}
.qx-media {
width: 100%;
aspect-ratio: 1 / 1;
flex-shrink: 0;
border-radius: 12px;
border: 1px solid var(--border);
overflow: hidden;
background-color: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
}
.qx-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.qx-eyebrow {
display: inline-block;
background-color: var(--surface-alt);
color: var(--accent-text);
border: 1px solid var(--border);
padding: 6px 16px;
border-radius: 9999px;
font-size: 14px;
line-height: 1.2;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.qx-title {
font-family: 'DM Serif Text', serif;
font-size: 36px;
line-height: 1.25;
color: var(--text);
margin-top: 0;
margin-bottom: 16px;
font-weight: 400;
}
.qx-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 9999px;
font-size: 12px;
background-color: var(--surface-alt);
color: var(--text);
border: 1px solid var(--border);
}
.qx-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--bg);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
flex-shrink: 0;
}
.qx-section {
background-color: var(--bg);
color: var(--text);
padding-top: 80px;
padding-bottom: 80px;
}
.qx-section-alt {
background-color: var(--section-alt_bg, var(--surface-alt));
color: var(--text);
padding-top: 80px;
padding-bottom: 80px;
}
.qx-section-dark {
background-color: var(--dark-band-bg, var(--dark-band));
color: var(--on-dark);
padding-top: 80px;
padding-bottom: 80px;
}
.qx-section-brand {
background-color: var(--brand-band-bg, var(--primary));
color: var(--on-primary);
padding-top: 80px;
padding-bottom: 80px;
}
.qx-section-brand .qx-btn {
background-color: var(--brand-btn-bg, #111111);
color: var(--brand-btn-text, #F8CD2F);
box-shadow: none;
}
.qx-section-brand .qx-btn:hover {
background-color: #29271E;
color: #FFFFFF;
}
.qx-section-brand .qx-btn-alt {
border-color: var(--on-primary);
color: var(--on-primary);
}
.qx-section-dark h1,
.qx-section-dark h2,
.qx-section-dark h3,
.qx-section-dark h4,
.qx-section-dark .qx-title,
.qx-on-dark h1,
.qx-on-dark h2,
.qx-on-dark h3,
.qx-on-dark h4,
.qx-on-dark .qx-title {
color: var(--on-dark);
}
.qx-section-dark p,
.qx-section-dark .text-muted,
.qx-on-dark p,
.qx-on-dark .text-muted {
color: var(--on-dark-muted) !important;
}
.qx-section-dark .qx-eyebrow,
.qx-on-dark .qx-eyebrow {
background-color: rgba(255, 255, 255, 0.1);
color: var(--on-dark);
border-color: rgba(255, 255, 255, 0.2);
}
.qx-section-dark .qx-btn-alt,
.qx-on-dark .qx-btn-alt {
border-color: var(--on-dark);
color: var(--on-dark);
}
.qx-section-dark .qx-btn-alt:hover,
.qx-on-dark .qx-btn-alt:hover {
background-color: rgba(255, 255, 255, 0.15);
color: var(--on-dark);
}
.qx-section-dark .qx-card,
.qx-on-dark .qx-card {
background-color: var(--surface);
color: var(--text);
border-color: var(--border);
}
.qx-section-dark .qx-card .qx-title,
.qx-section-dark .qx-card h3,
.qx-section-dark .qx-card h4,
.qx-on-dark .qx-card .qx-title,
.qx-on-dark .qx-card h3,
.qx-on-dark .qx-card h4 {
color: var(--text);
}
.qx-section-dark .qx-card p,
.qx-on-dark .qx-card p {
color: var(--text);
}
.qx-section-dark .qx-card .text-muted,
.qx-on-dark .qx-card .text-muted {
color: var(--text-muted) !important;
}
@media (max-width: 767.98px) {
.qx-section,
.qx-section-alt,
.qx-section-dark,
.qx-section-brand {
padding-top: 48px;
padding-bottom: 48px;
}
.qx-card {
padding: 16px;
}
.qx-title {
font-size: 28px;
}
}
/* ===== header ===== */
.pures-header {
background-color: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(43, 37, 25, 0.06);
z-index: 1030;
}
.pures-header .pures-navbar {
background-color: var(--bg);
}
.pures-header .pures-brand {
text-decoration: none;
color: var(--text);
}
.pures-header .pures-brand-img {
max-width: 44px;
max-height: 44px;
width: 44px;
height: 44px;
object-fit: contain;
}
.pures-header .pures-brand-text {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 1.35rem;
font-weight: 400;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.pures-header .pures-nav-link {
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.95rem;
color: var(--text);
padding: 0.5rem 0.85rem;
border-radius: 9999px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.pures-header .pures-nav-link:hover,
.pures-header .pures-nav-link:focus {
color: var(--primary-text);
background-color: var(--surface-alt);
}
.pures-header .dropdown-toggle::after {
vertical-align: middle;
margin-left: 0.35rem;
}
.pures-header .pures-dropdown-menu {
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.1);
padding: 0.5rem 0;
min-width: 200px;
}
.pures-header .pures-dropdown-item {
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.9rem;
color: var(--text);
padding: 0.5rem 1.25rem;
transition: background-color 0.15s ease, color 0.15s ease;
}
.pures-header .pures-dropdown-item:hover,
.pures-header .pures-dropdown-item:focus {
background-color: var(--surface-alt);
color: var(--primary-text);
}
.pures-header .pures-dropdown-divider {
border-color: var(--border);
margin: 0.35rem 0;
}
.pures-header .pures-cart-btn {
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid transparent;
border-radius: 9999px;
padding: 0.45rem 0.95rem;
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.9rem;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.pures-header .pures-cart-btn:hover,
.pures-header .pures-cart-btn:focus {
background-color: var(--primary-hover);
color: var(--on-primary);
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.pures-header .pures-cart-icon {
width: 20px;
height: 20px;
}
.pures-header .pures-cart-title {
font-weight: 500;
}
.pures-header .pures-cart-counter {
background-color: var(--dark-band);
color: var(--on-dark);
border-radius: 9999px;
font-size: 0.75rem;
padding: 0.2rem 0.45rem;
}
.pures-header .pures-toggler {
border: 1px solid var(--border);
border-radius: 8px;
background-color: var(--surface);
color: var(--text);
}
.pures-header .pures-toggler:focus {
box-shadow: none;
border-color: var(--primary);
}
.pures-header .pures-toggler-icon {
width: 24px;
height: 24px;
}
@media (max-width: 991.98px) {
.pures-header .navbar-collapse {
background-color: var(--bg);
border-top: 1px solid var(--border);
padding: 1rem 0.5rem;
margin-top: 0.5rem;
}
.pures-header .pures-nav-link {
padding: 0.65rem 1rem;
font-size: 0.85rem;
}
.pures-header .pures-dropdown-menu {
border: 1px solid var(--border);
background-color: var(--surface);
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
/* ===== hero_section ===== */
.pp-hero {
min-height: 84vh;
background-color: var(--hero-bg, #19160F);
overflow: hidden;
color: var(--on-hero, #FFFFFF);
}
.pp-hero .pp-hero-bg {
z-index: 0;
}
.pp-hero .pp-hero-img {
object-fit: cover;
object-position: center 38%;
}
.pp-hero .pp-hero-overlay {
background: linear-gradient(90deg, rgba(25, 22, 15, 0.94) 0%, rgba(25, 22, 15, 0.84) 55%, rgba(25, 22, 15, 0.65) 100%);
}
.pp-hero .pp-hero-content {
max-width: 650px;
}
.pp-hero .pp-hero-eyebrow {
background-color: #F4F1E6;
color: #29271E;
border: 1px solid #E4E0D8;
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 500;
text-transform: uppercase;
}
.pp-hero .pp-hero-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #F8CD2F;
display: inline-block;
}
.pp-hero .pp-hero-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 52px;
line-height: 1.15;
font-weight: 400;
color: #FFFFFF;
overflow-wrap: anywhere;
}
.pp-hero .pp-hero-text {
font-size: 18px;
line-height: 1.6;
color: #E2DFD8;
overflow-wrap: anywhere;
}
.pp-hero .pp-hero-cta {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: none;
border-radius: 9999px;
padding: 13px 30px;
font-family: 'DM Serif Text', serif;
font-size: 16px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
}
.pp-hero .pp-hero-cta:hover {
background-color: var(--primary_hover, #F6C308);
color: var(--on-primary, #111111);
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.pp-hero .pp-hero-btn-alt {
background-color: transparent;
color: #FFFFFF;
border: 1.5px solid rgba(255, 255, 255, 0.75);
border-radius: 9999px;
padding: 11px 26px;
font-family: 'DM Serif Text', serif;
font-size: 16px;
text-decoration: none;
}
.pp-hero .pp-hero-btn-alt:hover {
background-color: #FFFFFF;
color: #19160F;
border-color: #FFFFFF;
}
.pp-hero .pp-hero-features {
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.pp-hero .pp-hero-check-circle {
width: 22px;
height: 22px;
border-radius: 50%;
background-color: rgba(248, 205, 47, 0.2);
color: #F8CD2F;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pp-hero .pp-hero-feature-text {
font-size: 13px;
color: #DDD9CF;
font-weight: 500;
}
.pp-hero .pp-hero-card {
background: rgba(35, 31, 23, 0.8);
border: 1px solid rgba(244, 241, 230, 0.18);
border-radius: 20px;
backdrop-filter: blur(12px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.pp-hero .pp-hero-card-tag {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #F8CD2F;
display: block;
margin-bottom: 2px;
}
.pp-hero .pp-hero-card-title {
font-family: 'DM Serif Text', serif;
font-size: 20px;
color: #FFFFFF;
font-weight: 400;
}
.pp-hero .pp-hero-badge {
background: rgba(248, 205, 47, 0.15);
color: #F8CD2F;
border: 1px solid rgba(248, 205, 47, 0.4);
border-radius: 9999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
}
.pp-hero .pp-hero-list-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pp-hero .pp-hero-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #F8CD2F;
display: inline-block;
}
.pp-hero .pp-hero-list-label {
font-size: 13px;
color: #C3BFB6;
}
.pp-hero .pp-hero-list-val {
font-size: 13px;
color: #FFFFFF;
font-weight: 600;
}
@media (max-width: 991.98px) {
.pp-hero .pp-hero-overlay {
background: linear-gradient(180deg, rgba(25, 22, 15, 0.95) 0%, rgba(25, 22, 15, 0.88) 100%);
}
.pp-hero .pp-hero-title {
font-size: 34px;
}
}
@media (max-width: 767.98px) {
.pp-hero {
min-height: auto;
}
.pp-hero .pp-hero-title {
font-size: 18px !important;
line-height: 1.25;
}
.pp-hero .pp-hero-text {
font-size: 14px;
line-height: 1.5;
}
.pp-hero .pp-hero-card-title {
font-size: 16px !important;
}
.pp-hero .pp-hero-cta,
.pp-hero .pp-hero-btn-alt {
width: 100%;
justify-content: center;
font-size: 15px;
}
.pp-hero .pp-hero-features {
flex-direction: column;
align-items: flex-start !important;
gap: 10px !important;
}
}
/* ===== pre_order ===== */
.pures-preorder-block {
position: relative;
overflow: hidden;
}
.pures-preorder-block .pures-preorder-heading {
color: var(--text);
font-size: 34px;
line-height: 1.25;
}
.pures-preorder-block .pures-preorder-subtext {
color: var(--text-muted);
font-size: 15px;
line-height: 1.5;
}
.pures-preorder-block .pures-preorder-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pures-preorder-block .pures-preorder-card:hover {
border-color: var(--primary);
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
}
.pures-preorder-block .pures-card-top {
background: var(--surface-alt);
aspect-ratio: 16 / 10;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.pures-preorder-block .pures-card-media {
width: 100%;
height: 100%;
}
.pures-preorder-block .pures-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pures-preorder-block .pures-release-badge {
background: rgba(25, 22, 15, 0.88);
color: #FFFFFF;
padding: 6px 12px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(4px);
}
.pures-preorder-block .pures-discount-pill {
background: var(--primary);
color: var(--on-primary);
font-size: 12px;
font-weight: 700;
padding: 6px 12px;
border-radius: 9999px;
letter-spacing: 0.02em;
}
.pures-preorder-block .pures-card-body {
padding: 24px;
}
.pures-preorder-block .pures-sku-tag {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--text-muted);
text-transform: uppercase;
}
.pures-preorder-block .pures-status-badge {
font-size: 12px;
color: var(--text-muted);
background: var(--surface-alt);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 9999px;
}
.pures-preorder-block .pures-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #2E7D32;
display: inline-block;
}
.pures-preorder-block .pures-item-title {
font-size: 24px;
line-height: 1.3;
color: var(--text);
}
.pures-preorder-block .pures-title-link {
color: var(--text);
text-decoration: none;
transition: color 0.15s ease;
}
.pures-preorder-block .pures-title-link:hover {
color: var(--primary-text);
text-decoration: underline;
}
.pures-preorder-block .pures-item-desc {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
.pures-preorder-block .pures-perk-box {
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
}
.pures-preorder-block .pures-perk-text {
font-size: 13px;
color: var(--text);
}
.pures-preorder-block .pures-perk-box svg {
color: var(--primary-text);
flex-shrink: 0;
}
.pures-preorder-block .pures-price-current {
font-size: 26px;
font-weight: 700;
color: var(--text);
}
.pures-preorder-block .pures-price-old {
font-size: 16px;
color: var(--text-muted);
text-decoration: line-through;
}
.pures-preorder-block .pures-preorder-trigger {
border-radius: 9999px;
padding: 10px 24px;
font-weight: 600;
cursor: pointer;
}
.pures-preorder-block .pures-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(25, 22, 15, 0.65);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
visibility: hidden;
pointer-events: none;
}
.pures-preorder-block .pures-modal-backdrop.is-active {
visibility: visible;
pointer-events: auto;
}
.pures-preorder-block .pures-modal-dialog {
background: #FFFFFF;
width: 100%;
max-width: 520px;
border-radius: 16px;
border: 1px solid var(--border);
box-shadow: 0 20px 40px rgba(25, 22, 15, 0.25);
max-height: 90vh;
overflow-y: auto;
}
.pures-preorder-block .pures-modal-content {
padding: 24px;
}
.pures-preorder-block .pures-modal-title {
font-size: 22px;
color: var(--text);
line-height: 1.3;
}
.pures-preorder-block .pures-modal-close {
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--text);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.15s ease;
}
.pures-preorder-block .pures-modal-close:hover {
background: var(--border);
}
.pures-preorder-block .pures-modal-summary {
background: var(--surface-alt);
border: 1px solid var(--border);
}
.pures-preorder-block .pures-summary-product {
color: var(--text);
font-size: 15px;
}
.pures-preorder-block .pures-summary-price {
color: var(--text);
font-weight: 700;
font-size: 15px;
}
.pures-preorder-block .pures-summary-meta,
.pures-preorder-block .pures-summary-date {
font-size: 12px;
color: var(--text-muted);
}
.pures-preorder-block .pures-field-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.pures-preorder-block .pures-form-input {
background: #FFFFFF;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
}
.pures-preorder-block .pures-form-input:focus {
background: #FFFFFF;
color: var(--text);
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25);
}
.pures-preorder-block .pures-form-input::placeholder {
color: var(--text-muted);
opacity: 0.85;
}
.pures-preorder-block .pures-consent-label {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.pures-preorder-block .pures-form-checkbox {
border: 1px solid var(--border);
margin-top: 3px;
}
.pures-preorder-block .pures-form-checkbox:checked {
background-color: var(--primary);
border-color: var(--primary);
}
.pures-preorder-block .pures-policy-link {
color: var(--primary-text);
text-decoration: underline;
}
.pures-preorder-block .pures-submit-btn {
border-radius: 9999px;
padding: 12px 24px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 767px) {
.pures-preorder-block .pures-preorder-heading {
font-size: 26px;
}
.pures-preorder-block .pures-card-body {
padding: 16px;
}
.pures-preorder-block .pures-modal-content {
padding: 18px;
}
}
/* ===== value_bundles ===== */
.bundles-section {
color: var(--text);
position: relative;
}
.bundles-section .bundles-section__heading {
font-size: 36px;
line-height: 1.25;
color: var(--text);
font-family: 'DM Serif Text', serif;
font-weight: 400;
}
.bundles-section .bundles-section__subheading {
font-size: 16px;
line-height: 1.6;
color: var(--text-muted);
max-width: 680px;
}
.bundles-section .bundles-section__card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
overflow: hidden;
position: relative;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.bundles-section .bundles-section__card:hover {
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
border-color: var(--primary);
}
.bundles-section .bundles-section__badge-wrap {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
}
.bundles-section .bundles-section__savings-pill {
background: var(--primary);
color: var(--on-primary);
font-family: 'DM Serif Text', serif;
font-size: 13px;
font-weight: 400;
padding: 6px 14px;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(248, 205, 47, 0.35);
letter-spacing: 0.02em;
}
.bundles-section .bundles-section__card-media {
background: var(--surface-alt);
aspect-ratio: 16 / 10;
width: 100%;
border-bottom: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.bundles-section .bundles-section__media-link {
width: 100%;
height: 100%;
display: block;
}
.bundles-section .bundles-section__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.2s ease;
}
.bundles-section .bundles-section__card:hover .bundles-section__img {
transform: scale(1.02);
}
.bundles-section .bundles-section__card-body {
padding: 24px;
}
.bundles-section .bundles-section__tier-tag {
font-size: 12px;
font-weight: 400;
font-family: 'DM Serif Text', serif;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bundles-section .bundles-section__stock {
font-size: 12px;
}
.bundles-section .bundles-section__stock-dot {
width: 8px;
height: 8px;
background-color: #2e7d32;
border-radius: 50%;
display: inline-block;
}
.bundles-section .bundles-section__stock-label {
color: var(--text-muted);
font-size: 12px;
}
.bundles-section .bundles-section__card-title {
font-size: 24px;
line-height: 1.25;
margin-bottom: 8px;
font-family: 'DM Serif Text', serif;
font-weight: 400;
color: var(--text);
}
.bundles-section .bundles-section__title-link {
color: var(--text);
text-decoration: none;
}
.bundles-section .bundles-section__title-link:hover {
color: var(--primary-text);
text-decoration: underline;
}
.bundles-section .bundles-section__card-desc {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 18px;
}
.bundles-section .bundles-section__included-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
}
.bundles-section .bundles-section__included-header {
display: block;
font-size: 12px;
font-weight: 400;
font-family: 'DM Serif Text', serif;
color: var(--accent-text);
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bundles-section .bundles-section__items-list {
list-style: none;
}
.bundles-section .bundles-section__item {
font-size: 13px;
line-height: 1.5;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
}
.bundles-section .bundles-section__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.bundles-section .bundles-section__item:first-child {
padding-top: 0;
}
.bundles-section .bundles-section__bullet-icon {
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--accent-text);
}
.bundles-section .bundles-section__bullet-icon svg {
width: 12px;
height: 12px;
}
.bundles-section .bundles-section__item-link {
color: var(--text);
text-decoration: none;
font-weight: 400;
transition: color 0.15s ease;
}
.bundles-section .bundles-section__item-link:hover {
color: var(--primary-text);
text-decoration: underline;
}
.bundles-section .bundles-section__item-value {
color: var(--text-muted);
font-size: 12px;
font-weight: 400;
}
.bundles-section .bundles-section__specs-bar {
border-bottom: 1px solid var(--border);
}
.bundles-section .bundles-section__spec-pill {
font-size: 12px;
color: var(--text-muted);
background: var(--surface-alt);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 9999px;
line-height: 1.3;
}
.bundles-section .bundles-section__price-box {
border-color: var(--border) !important;
}
.bundles-section .bundles-section__price-label {
font-size: 13px;
color: var(--text-muted);
}
.bundles-section .bundles-section__price-current {
font-size: 26px;
font-family: 'DM Serif Text', serif;
font-weight: 400;
color: var(--text);
line-height: 1.1;
}
.bundles-section .bundles-section__price-old {
font-size: 15px;
color: var(--text-muted);
text-decoration: line-through;
}
.bundles-section .bundles-section__discount-callout {
font-size: 12px;
font-weight: 400;
font-family: 'DM Serif Text', serif;
color: var(--accent-text);
background: var(--surface-alt);
border: 1px solid var(--primary);
padding: 4px 10px;
border-radius: 9999px;
}
.bundles-section .bundles-section__cta-btn {
min-height: 48px;
font-family: 'DM Serif Text', serif;
font-weight: 400;
font-size: 16px;
border-radius: 9999px;
background: var(--primary);
color: var(--on-primary);
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.bundles-section .bundles-section__cta-btn:hover {
background: var(--primary-hover);
color: var(--on-primary);
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
@media (max-width: 767px) {
.bundles-section .bundles-section__heading {
font-size: 16px !important;
line-height: 1.25;
hyphens: auto;
}
.bundles-section .bundles-section__card-title {
font-size: 14px !important;
line-height: 1.25;
hyphens: auto;
}
.bundles-section .bundles-section__price-current {
font-size: 20px;
}
.bundles-section .bundles-section__card-body {
padding: 18px 16px;
}
}
/* ===== corporate_clients ===== */
.pures-corp-section {
position: relative;
overflow: hidden;
}
.pures-corp-section .pures-corp-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary);
display: inline-block;
}
.pures-corp-section .pures-corp-lead {
font-size: 1.05rem;
line-height: 1.6;
color: var(--on-dark-muted);
max-width: 780px;
}
.pures-corp-section .pures-corp-card {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pures-corp-section .pures-corp-card:hover {
border-color: var(--primary);
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
}
.pures-corp-section .pures-corp-icon-box {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #FFFFFF;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-text);
}
.pures-corp-section .pures-corp-svg {
width: 24px;
height: 24px;
}
.pures-corp-section .pures-corp-card-title {
font-size: 1.25rem;
color: var(--text);
font-weight: 400;
}
.pures-corp-section .pures-corp-card-text {
font-size: 0.925rem;
color: var(--text-muted);
line-height: 1.55;
}
.pures-corp-section .pures-corp-pill {
background-color: var(--surface-alt);
color: var(--text);
border: 1px solid var(--border);
border-radius: 9999px;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 500;
width: fit-content;
}
.pures-corp-section .pures-corp-mini-svg {
width: 14px;
height: 14px;
color: #111111;
}
.pures-corp-section .pures-corp-footer-banner {
background-color: #231E15;
border: 1px solid rgba(248, 205, 47, 0.3);
border-radius: 16px;
}
.pures-corp-section .pures-corp-banner-title {
font-size: 1.2rem;
}
.pures-corp-section .pures-corp-banner-text {
color: var(--on-dark-muted);
font-size: 0.95rem;
}
.pures-corp-section .pures-corp-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
.pures-corp-section .pures-corp-modal.is-active {
display: flex;
}
.pures-corp-section .pures-corp-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(17, 17, 17, 0.75);
backdrop-filter: blur(4px);
}
.pures-corp-section .pures-corp-modal-dialog {
position: relative;
z-index: 2;
width: 100%;
max-width: 680px;
max-height: 90vh;
overflow-y: auto;
border-radius: 20px;
}
.pures-corp-section .pures-corp-modal-content {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}
.pures-corp-section .pures-corp-modal-header {
border-bottom: 1px solid var(--border);
}
.pures-corp-section .pures-corp-modal-title {
font-size: 1.45rem;
color: var(--text);
}
.pures-corp-section .pures-corp-close-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
cursor: pointer;
transition: background-color 0.2s ease;
}
.pures-corp-section .pures-corp-close-btn:hover {
background-color: var(--surface-alt);
}
.pures-corp-section .pures-corp-close-icon {
width: 18px;
height: 18px;
}
.pures-corp-section .pures-corp-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
margin-bottom: 6px;
display: block;
}
.pures-corp-section .pures-corp-input,
.pures-corp-section .pures-corp-select,
.pures-corp-section .pures-corp-textarea {
width: 100%;
background-color: #FFFFFF;
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
font-size: 0.925rem;
color: var(--text);
outline: none;
transition: border-color 0.2s ease;
}
.pures-corp-section .pures-corp-input::placeholder,
.pures-corp-section .pures-corp-textarea::placeholder {
color: var(--text-muted);
opacity: 0.85;
}
.pures-corp-section .pures-corp-input:focus,
.pures-corp-section .pures-corp-select:focus,
.pures-corp-section .pures-corp-textarea:focus {
border-color: var(--primary);
}
.pures-corp-section .pures-corp-checkbox {
width: 18px;
height: 18px;
accent-color: var(--primary);
cursor: pointer;
flex-shrink: 0;
}
.pures-corp-section .pures-corp-consent-label {
font-size: 0.825rem;
color: var(--text-muted);
line-height: 1.4;
margin-bottom: 0;
cursor: pointer;
}
.pures-corp-section .pures-corp-link {
color: var(--primary-text);
text-decoration: underline;
}
.pures-corp-section .pures-corp-link:hover {
color: #111111;
}
.pures-corp-section .pures-corp-submit-btn {
border-radius: 9999px;
padding: 12px 24px;
font-size: 1rem;
}
@media (max-width: 767px) {
.pures-corp-section .pures-corp-modal-content {
padding: 20px;
}
.pures-corp-section .pures-corp-lead {
font-size: 0.95rem;
}
.pures-corp-section h2.qx-title {
font-size: 1.35rem;
}
.pures-corp-section .pures-corp-card-title {
font-size: 1.15rem;
}
.pures-corp-section .pures-corp-card {
padding: 20px;
}
}
/* ===== featured_puzzles ===== */
.catalog-grid-block {
padding-top: 5rem;
padding-bottom: 5rem;
overflow: hidden
}
.catalog-grid-block .catalog-grid-subtitle {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.6;
max-width: 680px
}
.catalog-grid-block .qx-title {
color: var(--text);
line-height: 1.25
}
.catalog-grid-block .catalog-product-card {
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
background-color: var(--bg);
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08)
}
.catalog-grid-block .catalog-card-media-wrapper {
background-color: var(--surface-alt);
aspect-ratio: 4/3;
overflow: hidden;
border-bottom: 1px solid var(--border)
}
.catalog-grid-block .catalog-card-img-link {
width: 100%;
height: 100%
}
.catalog-grid-block .catalog-product-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.catalog-grid-block .catalog-product-badge {
top: 12px;
left: 12px;
background-color: var(--primary);
color: var(--on-primary);
font-size: .75rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 9999px;
letter-spacing: .02em
}
.catalog-grid-block .catalog-card-content {
padding: 1.25rem
}
.catalog-grid-block .catalog-product-meta {
font-size: .75rem;
color: var(--text-muted);
font-weight: 500
}
.catalog-grid-block .catalog-product-title {
color: var(--text);
font-size: 1.125rem;
line-height: 1.3;
margin-top: .25rem;
margin-bottom: .5rem;
overflow-wrap: anywhere
}
.catalog-grid-block .catalog-product-title-link:hover .catalog-product-title {
color: var(--primary-text)
}
.catalog-grid-block .catalog-product-spec {
color: var(--text-muted);
font-size: .875rem;
line-height: 1.5;
margin-bottom: 0;
overflow-wrap: anywhere
}
.catalog-grid-block .catalog-card-footer {
border-top: 1px solid var(--border)
}
.catalog-grid-block .catalog-product-price-label {
font-size: .8125rem;
color: var(--text-muted)
}
.catalog-grid-block .catalog-product-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--text)
}
.catalog-grid-block .btnAddCart {
cursor: pointer
}
@media (max-width:767.98px) {
.catalog-grid-block {
padding-top: 3rem;
padding-bottom: 3rem
}
.catalog-grid-block .qx-title {
font-size: 16px;
line-height: 1.3;
hyphens: auto
}
.catalog-grid-block .catalog-product-title {
font-size: 14px;
line-height: 1.3;
hyphens: auto
}
.catalog-grid-block .catalog-card-content {
padding: 1rem
}
}
/* ===== latest_articles ===== */
.blog-grid-section {
padding-top: 80px;
padding-bottom: 80px;
}
.blog-grid__subtitle {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
max-width: 640px;
}
.blog-grid__view-all {
white-space: nowrap;
flex-shrink: 0;
}
.blog-grid__card {
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-grid__card:hover {
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
border-color: var(--primary);
}
.blog-grid__media-link {
display: block;
text-decoration: none;
overflow: hidden;
}
.blog-grid__media-box {
position: relative;
aspect-ratio: 16 / 10;
width: 100%;
background-color: var(--surface-alt);
overflow: hidden;
}
.blog-grid__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.blog-grid__card:hover .blog-grid__img {
transform: scale(1.03);
}
.blog-grid__tag {
background-color: rgba(25, 22, 15, 0.85);
color: var(--on-dark);
font-size: 12px;
padding: 4px 12px;
border-radius: 9999px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.blog-grid__meta {
font-size: 13px;
color: var(--text-muted);
line-height: 1.4;
}
.blog-grid__meta-icon {
width: 15px;
height: 15px;
color: var(--primary-text);
flex-shrink: 0;
}
.blog-grid__title {
font-size: 20px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.blog-grid__title-link {
color: var(--text);
transition: color 0.2s ease;
}
.blog-grid__title-link:hover,
.blog-grid__title-link:focus {
color: var(--primary-text);
text-decoration: underline;
}
.blog-grid__excerpt {
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.blog-grid__btn-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.blog-grid-section {
padding-top: 48px;
padding-bottom: 48px;
}
.blog-grid__title {
font-size: 18px;
hyphens: auto;
}
.blog-grid__view-all {
width: 100%;
}
}
/* ===== footer ===== */
.pures-footer {
background-color: var(--footer-bg, #19160F);
color: var(--on-footer, #FFFFFF);
position: relative;
width: 100%;
overflow: hidden;
}
.pures-footer__top-border {
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--primary, #F8CD2F) 50%, transparent 100%);
}
.pures-footer__main {
padding: 64px 0 40px;
}
.pures-footer__col {
display: flex;
flex-direction: column;
height: 100%;
}
.pures-footer__title {
font-family: 'DM Serif Text', serif;
font-size: 20px;
line-height: 1.3;
font-weight: 400;
color: var(--on-footer, #FFFFFF);
margin-bottom: 20px;
overflow-wrap: anywhere;
}
.pures-footer__desc {
color: var(--on-footer-muted, #C3BFB6);
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
overflow-wrap: anywhere;
}
.pures-footer__contact-box {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
}
.pures-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--on-footer-muted, #C3BFB6);
overflow-wrap: anywhere;
}
.pures-footer__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: var(--primary, #F8CD2F);
}
.pures-footer__contact-text {
color: var(--on-footer-muted, #C3BFB6);
line-height: 1.5;
}
.pures-footer__contact-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
transition: color 0.2s ease;
line-height: 1.5;
}
.pures-footer__contact-link:hover,
.pures-footer__contact-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__wa-wrap {
margin-top: auto;
padding-top: 10px;
}
.pures-footer__wa-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--on-footer, #FFFFFF);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pures-footer__wa-link:hover,
.pures-footer__wa-link:focus {
background-color: var(--primary, #F8CD2F);
border-color: var(--primary, #F8CD2F);
color: #111111;
}
.pures-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pures-footer__list-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
overflow-wrap: anywhere;
}
.pures-footer__list-link:hover,
.pures-footer__list-link:focus {
color: var(--primary, #F8CD2F);
transform: translateX(3px);
}
.pures-footer__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.pures-footer__input-wrap {
width: 100%;
}
.pures-footer__input {
width: 100%;
height: 46px;
border-radius: 9999px;
background-color: #29271E;
border: 1px solid rgba(228, 224, 216, 0.25);
color: #FFFFFF;
padding: 0 20px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pures-footer__input::placeholder {
color: #A6A092;
opacity: 1;
}
.pures-footer__input:focus {
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.2);
}
.pures-footer__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 2px;
}
.pures-footer__checkbox {
margin-top: 3px;
min-width: 16px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary, #F8CD2F);
}
.pures-footer__consent-text {
font-size: 12px;
line-height: 1.5;
color: var(--on-footer-muted, #C3BFB6);
cursor: pointer;
margin: 0;
}
.pures-footer__inline-link {
color: var(--on-footer, #FFFFFF);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.pures-footer__inline-link:hover,
.pures-footer__inline-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 46px;
border-radius: 9999px;
background-color: var(--primary, #F8CD2F);
color: #111111;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
}
.pures-footer__btn:hover,
.pures-footer__btn:focus {
background-color: var(--primary-hover, #F6C308);
color: #111111;
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.pures-footer__bottom {
border-top: 1px solid rgba(228, 224, 216, 0.15);
padding: 24px 0 32px;
font-size: 13px;
}
.pures-footer__copy {
color: var(--on-footer-muted, #C3BFB6);
font-size: 13px;
overflow-wrap: anywhere;
}
.pures-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
}
.pures-footer__legal-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}
.pures-footer__legal-link:hover,
.pures-footer__legal-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__sep {
color: rgba(228, 224, 216, 0.3);
font-size: 10px;
}
.pures-footer__payment-list {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pures-footer__payment-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 12px;
border-radius: 6px;
background-color: #FFFFFF;
border: 1px solid rgba(228, 224, 216, 0.2);
}
.pures-footer__visa-text {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 14px;
letter-spacing: 0.5px;
color: #1A1F71;
line-height: 1;
}
.pures-footer__payment-pill--mastercard {
gap: 6px;
}
.pures-footer__mc-circle {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
}
.pures-footer__mc-circle--red {
background-color: #EB001B;
margin-right: -7px;
}
.pures-footer__mc-circle--amber {
background-color: #F79E1B;
opacity: 0.95;
}
.pures-footer__mc-label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 600;
color: #19160F;
line-height: 1;
margin-left: 2px;
}
@media (max-width: 991.98px) {
.pures-footer__main {
padding: 48px 0 32px;
}
.pures-footer__legal {
justify-content: center;
}
.pures-footer__payment-list {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.pures-footer__title {
font-size: 18px;
margin-bottom: 14px;
}
.pures-footer__main {
padding: 40px 0 24px;
}
.pures-footer__bottom {
padding: 20px 0 28px;
}
.pures-footer__legal {
flex-direction: column;
gap: 8px;
}
.pures-footer__sep {
display: none;
}
}
.blog-list-section {
background-color: var(--bg, #FFFFFF);
}
.blog-list-section .blog-list-intro {
max-width: 480px;
}
.blog-list-section .blog-list-intro-text {
color: var(--text-muted, #726A5A);
font-size: 15px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.blog-list-section .blog-filter-bar {
background-color: var(--surface-alt, #F4F1E6);
border: 1px solid var(--border, #E4E0D8);
}
.blog-list-section .blog-filter-chip {
background-color: transparent;
border: 1px solid var(--border, #E4E0D8);
color: var(--text, #2B2519);
border-radius: 9999px;
padding: 8px 18px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-list-section .blog-filter-chip:hover {
background-color: var(--surface, #F9F7F3);
border-color: var(--text, #2B2519);
}
.blog-list-section .blog-filter-chip.active {
background-color: var(--primary, #F8CD2F);
border-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
}
.blog-list-section .blog-search-box {
min-width: 240px;
}
.blog-list-section .blog-search-input {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 9999px;
padding: 9px 36px 9px 18px;
font-size: 14px;
color: var(--text, #2B2519);
}
.blog-list-section .blog-search-input::placeholder {
color: var(--text-muted, #726A5A);
}
.blog-list-section .blog-search-input:focus {
background-color: #FFFFFF;
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.2);
color: var(--text, #2B2519);
}
.blog-list-section .blog-search-icon {
color: var(--text-muted, #726A5A);
pointer-events: none;
}
.blog-list-section .blog-editorial-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px;
}
.blog-list-section .blog-editorial-tile {
grid-column: span 2;
border-radius: 16px;
overflow: hidden;
background-color: var(--dark-band, #19160F);
border: 1px solid var(--border, #E4E0D8);
min-height: 380px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
}
.blog-list-section .blog-editorial-grid:has(> .blog-card ~ .blog-card ~ .blog-card ~ .blog-card)>.blog-editorial-tile {
grid-row: span 2;
}
.blog-list-section .blog-editorial-img {
object-fit: cover;
width: 100%;
height: 100%;
min-height: 320px;
}
.blog-list-section .blog-editorial-gradient {
background: linear-gradient(180deg, transparent 0%, rgba(25, 22, 15, 0.88) 50%, rgba(25, 22, 15, 0.98) 100%);
}
.blog-list-section .blog-editorial-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 26px;
line-height: 1.25;
color: var(--on-dark, #FFFFFF);
overflow-wrap: anywhere;
}
.blog-list-section .blog-editorial-text {
font-size: 15px;
line-height: 1.5;
color: var(--on-dark-muted, #C3BFB6);
overflow-wrap: anywhere;
}
.blog-list-section .blog-card {
display: flex;
flex-direction: column;
background-color: var(--surface, #FFFFFF);
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
overflow: hidden;
height: 100%;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-list-section .blog-card:hover {
box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14);
border-color: var(--primary, #F8CD2F);
}
.blog-list-section .blog-card-media {
position: relative;
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
background-color: var(--surface-alt, #F4F1E6);
border-bottom: 1px solid var(--border, #E4E0D8);
}
.blog-list-section .blog-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-list-section .blog-card-tag {
background-color: rgba(25, 22, 15, 0.75);
color: #FFFFFF;
border-radius: 9999px;
padding: 4px 12px;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(4px);
}
.blog-list-section .blog-card-body {
padding: 24px;
flex: 1 1 auto;
}
.blog-list-section .blog-card-meta {
font-size: 12px;
color: var(--text-muted, #726A5A);
}
.blog-list-section .blog-card-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 19px;
line-height: 1.3;
color: var(--text, #2B2519);
overflow-wrap: anywhere;
}
.blog-list-section .blog-card-title-link {
text-decoration: none;
color: var(--text, #2B2519);
transition: color 0.15s ease;
}
.blog-list-section .blog-card-title-link:hover,
.blog-list-section .blog-card-title-link:focus {
color: var(--primary-text, #29271E);
text-decoration: underline;
}
.blog-list-section .blog-card-excerpt {
font-size: 14px;
line-height: 1.55;
color: var(--text-muted, #726A5A);
overflow-wrap: anywhere;
}
.blog-list-section .blog-card-btn {
text-align: center;
text-decoration: none;
padding: 11px 20px;
font-size: 14px;
font-weight: 500;
display: block;
}
.blog-list-section .blog-no-results-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--surface-alt, #F4F1E6);
color: var(--text, #2B2519);
}
.blog-list-section .blog-filter-reset-btn {
border: 1.5px solid var(--text, #2B2519);
border-radius: 9999px;
padding: 9px 24px;
font-size: 14px;
background-color: transparent;
color: var(--text, #2B2519);
cursor: pointer;
}
.blog-list-section .blog-filter-reset-btn:hover {
background-color: var(--surface-alt, #F4F1E6);
}
@media (max-width: 991.98px) {
.blog-list-section .blog-editorial-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.blog-list-section .blog-editorial-tile {
grid-column: 1 / -1 !important;
grid-row: auto !important;
aspect-ratio: 16 / 9;
min-height: auto;
}
.blog-list-section .blog-editorial-title {
font-size: 22px;
}
}
@media (max-width: 767.98px) {
.blog-list-section .blog-editorial-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.blog-list-section .blog-editorial-tile {
grid-column: 1 / -1 !important;
grid-row: auto !important;
aspect-ratio: 4 / 3;
min-height: auto;
}
.blog-list-section .blog-card-body {
padding: 16px;
}
.blog-list-section .blog-card-title {
font-size: 16px;
}
.blog-list-section .blog-card-excerpt {
font-size: 13px;
}
.blog-list-section .blog-card-btn {
padding: 9px 14px;
font-size: 13px;
}
.blog-list-section .blog-editorial-title {
font-size: 18px;
}
.blog-list-section .blog-editorial-text {
font-size: 13px;
}
}
/* ===== PAGE: privacy ===== */
#privacy-content.policy-content{max-width:100%;margin:0 auto;padding:40px 24px 72px 24px;color:var(--text,#2B2519);background-color:var(--bg,#FFFFFF);font-family:'DM Serif Text',serif;font-size:16px;line-height:1.65;box-sizing:border-box;hyphens:auto;overflow-wrap:anywhere}#privacy-content.policy-content .policy-meta-badge{display:inline-block;padding:6px 18px;margin-bottom:24px;border-radius:9999px;font-size:14px;color:var(--primary-text,#29271E);background-color:var(--surface-alt,#F4F1E6);border:1px solid var(--border,#E4E0D8);letter-spacing:0.02em}#privacy-content.policy-content .policy-intro-lead{font-size:18px;line-height:1.7;color:var(--text,#2B2519);margin-bottom:32px;font-weight:400}#privacy-content.policy-content h2{font-size:24px;line-height:1.3;color:var(--primary-text,#29271E);margin-top:40px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border,#E4E0D8);font-weight:400;overflow-wrap:anywhere}#privacy-content.policy-content p{margin-top:0;margin-bottom:18px;color:var(--text,#2B2519)}#privacy-content.policy-content ul{margin-top:0;margin-bottom:24px;padding-left:24px}#privacy-content.policy-content li{margin-bottom:10px;color:var(--text,#2B2519)}#privacy-content.policy-content strong{color:var(--primary-text,#29271E);font-weight:600}#privacy-content.policy-content .policy-link{color:var(--primary-text,#29271E);text-decoration:underline;text-underline-offset:3px}#privacy-content.policy-content .policy-link:hover{color:var(--primary-hover,#F6C308)}@media (max-width:767px){#privacy-content.policy-content{padding:28px 16px 48px 16px;font-size:15px;line-height:1.6}#privacy-content.policy-content h2{font-size:16px;line-height:1.3;margin-top:28px;margin-bottom:12px;padding-bottom:8px}#privacy-content.policy-content .policy-intro-lead{font-size:16px;line-height:1.6;margin-bottom:24px}#privacy-content.policy-content ul{padding-left:18px;margin-bottom:18px}#privacy-content.policy-content .policy-meta-badge{font-size:12px;padding:4px 14px;margin-bottom:18px}}
/* ===== PAGE: terms ===== */
#privacy-content.policy-content { width: 100%; max-width: 900px; margin: 0 auto; padding: 48px 24px 80px 24px; box-sizing: border-box; color: var(--text); font-family: var(--font-family-primary, 'DM Serif Text', serif); line-height: 1.7; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; } #privacy-content.policy-content h2 { color: var(--text); font-family: var(--font-family-headings, 'DM Serif Text', serif); font-size: 24px; line-height: 1.3; margin-top: 36px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-weight: 400; overflow-wrap: anywhere; } #privacy-content.policy-content h2:first-of-type { margin-top: 0; } #privacy-content.policy-content h3 { color: var(--text); font-family: var(--font-family-headings, 'DM Serif Text', serif); font-size: 20px; line-height: 1.35; margin-top: 24px; margin-bottom: 12px; font-weight: 400; overflow-wrap: anywhere; } #privacy-content.policy-content p { color: var(--text); font-size: 16px; line-height: 1.65; margin-top: 0; margin-bottom: 16px; } #privacy-content.policy-content ul, #privacy-content.policy-content ol { margin-top: 0; margin-bottom: 20px; padding-left: 28px; } #privacy-content.policy-content li { color: var(--text); font-size: 16px; line-height: 1.6; margin-bottom: 10px; } #privacy-content.policy-content strong { color: var(--text); font-weight: 700; } #privacy-content.policy-content a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } #privacy-content.policy-content a:hover, #privacy-content.policy-content a:focus { color: var(--primary-hover); } @media (max-width: 767px) { #privacy-content.policy-content { padding: 32px 16px 56px 16px; font-size: 15px; } #privacy-content.policy-content h1 { font-size: 18px; margin-bottom: 14px; hyphens: auto; } #privacy-content.policy-content h2 { font-size: 16px; margin-top: 28px; margin-bottom: 12px; padding-bottom: 8px; hyphens: auto; } #privacy-content.policy-content h3 { font-size: 14px; margin-top: 20px; margin-bottom: 10px; hyphens: auto; } #privacy-content.policy-content p, #privacy-content.policy-content li { font-size: 15px; line-height: 1.6; } #privacy-content.policy-content ul, #privacy-content.policy-content ol { padding-left: 22px; } }
/* ===== PAGE: disclaimer ===== */
#privacy-content.policy-content{color:var(--text,#2B2519);line-height:1.65;font-size:16px;max-width:100%;overflow-wrap:anywhere}#privacy-content.policy-content .policy-content__meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 20px;margin-bottom:28px;background:var(--surface,#F9F7F3);border:1px solid var(--border,#E4E0D8);border-radius:12px}#privacy-content.policy-content .policy-content__meta-item{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-muted,#726A5A);white-space:normal}#privacy-content.policy-content .policy-content__meta-item strong{color:var(--text,#2B2519)}#privacy-content.policy-content h2{color:var(--accent,#29271E);font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:24px;line-height:1.28;margin-top:36px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border,#E4E0D8);overflow-wrap:anywhere}#privacy-content.policy-content h2:first-of-type{margin-top:0}#privacy-content.policy-content p{color:var(--text,#2B2519);margin-bottom:18px;overflow-wrap:anywhere}#privacy-content.policy-content ul{list-style-type:disc;padding-left:24px;margin-bottom:22px;color:var(--text,#2B2519)}#privacy-content.policy-content ul li{margin-bottom:10px;padding-left:4px;overflow-wrap:anywhere}#privacy-content.policy-content ul li strong{color:var(--accent,#29271E)}#privacy-content.policy-content a{color:var(--primary-text,#29271E);text-decoration:underline;text-underline-offset:3px;font-weight:600;transition:color 0.2s ease}#privacy-content.policy-content a:hover{color:var(--primary-hover,#F6C308)}@media (max-width:767px){#privacy-content.policy-content{font-size:15px;line-height:1.55}#privacy-content.policy-content h2{font-size:16px;line-height:1.25;margin-top:26px;margin-bottom:12px;hyphens:auto}#privacy-content.policy-content .policy-content__meta-bar{padding:12px 16px;gap:8px 14px}#privacy-content.policy-content .policy-content__meta-item{font-size:13px}#privacy-content.policy-content ul{padding-left:18px;margin-bottom:18px}#privacy-content.policy-content ul li{margin-bottom:8px}}
/* ===== PAGE: refund ===== */
#privacy-content.policy-content{color:var(--text);background-color:var(--surface);padding:32px 24px;border-radius:16px;border:1px solid var(--border);max-width:960px;margin:0 auto;box-sizing:border-box;overflow-wrap:anywhere}#privacy-content.policy-content h2{font-family:var(--font-family-headings);color:var(--primary-text);font-size:24px;line-height:1.25;margin-top:32px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);hyphens:auto}#privacy-content.policy-content h2:first-of-type{margin-top:0}#privacy-content.policy-content p{color:var(--text);font-size:16px;line-height:1.6;margin-bottom:16px}#privacy-content.policy-content ul,#privacy-content.policy-content ol{margin:0 0 20px 0;padding-left:24px;color:var(--text);line-height:1.6}#privacy-content.policy-content ul{list-style-type:disc}#privacy-content.policy-content ol{list-style-type:decimal}#privacy-content.policy-content li{margin-bottom:8px}#privacy-content.policy-content strong{color:var(--primary-text);font-weight:600}#privacy-content.policy-content a{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px;transition:color 0.2s ease}#privacy-content.policy-content a:hover,#privacy-content.policy-content a:focus{color:var(--primary-hover);text-decoration:underline}@media(max-width:767px){#privacy-content.policy-content{padding:20px 16px;border-radius:12px}#privacy-content.policy-content h2{font-size:16px;line-height:1.3;margin-top:24px;margin-bottom:10px}#privacy-content.policy-content p,#privacy-content.policy-content li{font-size:14px;line-height:1.5}#privacy-content.policy-content ul,#privacy-content.policy-content ol{padding-left:20px;margin-bottom:16px}}
/* ===== PAGE: about ===== */
.about-page-wrapper {
padding-top: 56px;
padding-bottom: 72px;
background-color: var(--bg);
color: var(--text);
}
.about-page-wrapper .about-section-heading {
font-family: var(--font-family-headings);
font-size: 36px;
line-height: 1.25;
color: var(--text);
font-weight: 400;
overflow-wrap: anywhere;
}
.about-page-wrapper .about-subheading {
font-family: var(--font-family-headings);
font-size: 28px;
line-height: 1.3;
color: var(--text);
font-weight: 400;
overflow-wrap: anywhere;
}
.about-page-wrapper .about-lead-text {
font-size: 18px;
line-height: 1.6;
color: var(--text);
font-weight: 400;
}
.about-page-wrapper .about-body-text {
font-size: 16px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 0;
overflow-wrap: anywhere;
}
.about-page-wrapper .about-media-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
border: 1px solid var(--border);
}
.about-page-wrapper .about-feature-img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
.about-page-wrapper .about-badge-card {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 18px;
box-shadow: 0 4px 16px rgba(43, 37, 25, 0.1);
}
.about-page-wrapper .about-badge-title {
font-size: 15px;
color: var(--text);
font-family: var(--font-family-headings);
line-height: 1.2;
}
.about-page-wrapper .about-badge-subtitle {
font-size: 13px;
color: var(--text-muted);
line-height: 1.3;
}
.about-page-wrapper .about-icon-svg {
width: 22px;
height: 22px;
stroke: var(--accent);
}
.about-page-wrapper .about-mission-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.05);
}
.about-page-wrapper .about-family-img-wrap {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
height: 100%;
min-height: 280px;
}
.about-page-wrapper .about-family-img {
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
display: block;
}
.about-page-wrapper .about-stat-box {
background: #FFFFFF;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
text-align: center;
}
.about-page-wrapper .about-stat-number {
display: block;
font-family: var(--font-family-headings);
font-size: 24px;
color: var(--accent);
line-height: 1.2;
margin-bottom: 4px;
}
.about-page-wrapper .about-stat-label {
font-size: 12px;
color: var(--text-muted);
line-height: 1.3;
display: block;
}
.about-page-wrapper .about-tab-btn {
border-radius: 9999px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text);
font-family: var(--font-family-headings);
font-size: 14px;
padding: 8px 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.about-page-wrapper .about-tab-btn:hover,
.about-page-wrapper .about-tab-btn.active {
background: var(--primary);
border-color: var(--primary);
color: var(--on-primary);
}
.about-page-wrapper .about-bento-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.04);
transition: border-color 0.2s ease;
}
.about-page-wrapper .about-bento-card:hover {
border-color: var(--primary);
}
.about-page-wrapper .about-card-title {
font-family: var(--font-family-headings);
font-size: 20px;
line-height: 1.3;
color: var(--text);
font-weight: 400;
}
.about-page-wrapper .about-card-desc {
font-size: 14px;
line-height: 1.5;
color: var(--text-muted);
}
.about-page-wrapper .about-material-img-wrap {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
}
.about-page-wrapper .about-material-img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}
.about-page-wrapper .about-list-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary);
margin-top: 8px;
flex-shrink: 0;
}
.about-page-wrapper .about-dark-cta {
background: var(--dark-band);
color: var(--on-dark);
border: 1px solid rgba(248, 205, 47, 0.3);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}
.about-page-wrapper .about-cta-title {
font-family: var(--font-family-headings);
font-size: 32px;
line-height: 1.25;
color: #FFFFFF;
font-weight: 400;
}
.about-page-wrapper .about-cta-text {
font-size: 16px;
line-height: 1.6;
color: var(--on-dark-muted);
}
@media (max-width: 767px) {
.about-page-wrapper {
padding-top: 36px;
padding-bottom: 48px;
}
.about-page-wrapper .about-section-heading {
font-size: 24px;
}
.about-page-wrapper .about-subheading {
font-size: 20px;
}
.about-page-wrapper .about-cta-title {
font-size: 22px;
}
.about-page-wrapper .about-feature-img {
height: 280px;
}
.about-page-wrapper .about-material-img {
height: 260px;
}
.about-page-wrapper .about-badge-card {
position: static;
margin-top: 12px;
}
}
/* ===== PAGE: contact ===== */
.contact-info-block .qx-icon { width: 44px; height: 44px; border-radius: 50%; background-color: var(--surface); border: 1px solid var(--border); color: var(--primary-text); } .contact-info-block .contact-info-text { color: var(--text); font-size: 15px; word-break: break-word; } .contact-info-block .contact-info-link { color: var(--text); font-weight: 600; text-decoration: none; word-break: break-all; transition: color 0.2s ease; } .contact-info-block .contact-info-link:hover, .contact-info-block .contact-info-link:focus { color: var(--primary-hover); text-decoration: underline; } .contact-info-block .contact-map-wrapper { border-radius: 16px; overflow: hidden; background-color: var(--surface); border: 1px solid var(--border); } .contact-info-block .contact-map { width: 100%; height: 420px; border-radius: 12px; overflow: hidden; } .contact-info-block .contact-map iframe { width: 100%; height: 100%; border: 0; display: block; } .contact-form-block .contact-form-container { background-color: var(--bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08); } .contact-form-block .contact-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .contact-form-block .contact-input { background-color: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 12px 16px; font-size: 15px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .contact-form-block .contact-input:focus { background-color: var(--bg); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25); color: var(--text); outline: none; } .contact-form-block .contact-input::placeholder { color: var(--text-muted); opacity: 0.85; } .contact-form-block .contact-textarea { resize: vertical; min-height: 120px; } .contact-form-block .contact-checkbox { width: 18px; height: 18px; border-color: var(--border); background-color: var(--surface); cursor: pointer; } .contact-form-block .contact-checkbox:checked { background-color: var(--primary); border-color: var(--primary); } .contact-form-block .contact-consent-label { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; cursor: pointer; } .contact-form-block .contact-policy-link { color: var(--primary-text); text-decoration: underline; font-weight: 500; } .contact-form-block .contact-policy-link:hover { color: var(--primary-hover); } @media (max-width: 767px) { .contact-info-block .contact-map { height: 280px; } .contact-form-block .contact-form-container { padding: 20px 16px; } }
/* ===== PAGE: delivery ===== */
.delivery-section{background-color:var(--bg);color:var(--text);overflow-wrap:anywhere}.delivery-section .delivery-main-heading{font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:34px;line-height:1.25;color:var(--text)}.delivery-section .delivery-lead{font-size:16px;line-height:1.6}.delivery-section .delivery-hero-badge-box{background-color:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px -4px rgba(43,37,25,0.08)}.delivery-section .delivery-badge-tag{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted)}.delivery-section .delivery-badge-title{font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:20px;color:var(--text)}.delivery-section .delivery-icon-circle{width:44px;height:44px;min-width:44px;background-color:#ffffff;border:1px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}.delivery-section .delivery-svg{width:22px;height:22px;stroke:var(--primary_text,#29271E)}.delivery-section .delivery-card{background:#ffffff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px -4px rgba(43,37,25,0.08);padding:24px}.delivery-section .delivery-card-title{font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:22px;margin-bottom:8px;color:var(--text)}.delivery-section .delivery-feature-list li{font-size:14px;color:var(--text)}.delivery-section .delivery-payment-chip{display:inline-block;padding:6px 16px;background-color:var(--surface_alt);border:1px solid var(--border);border-radius:9999px;font-size:14px;font-weight:600;color:var(--accent_text,#29271E)}.delivery-section .delivery-calculator-box{background-color:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 8px 24px -4px rgba(43,37,25,0.08)}.delivery-section .delivery-calc-heading{font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:24px;color:var(--text)}.delivery-section .delivery-tab-btn{background:#ffffff;border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:9999px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.delivery-section .delivery-tab-btn.active{background-color:var(--primary);border-color:var(--primary);color:var(--on_primary,#111111);font-weight:600}.delivery-section .delivery-calc-result{border:1px solid var(--border)}.delivery-section .delivery-result-val{display:block;font-size:17px;color:var(--text)}.delivery-section .delivery-policy-card{background-color:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px -4px rgba(43,37,25,0.08)}.delivery-section .delivery-policy-title{font-family:var(--font_family_headings,'DM Serif Text',serif);font-size:20px;color:var(--text)}@media (max-width:767px){.delivery-section .delivery-main-heading{font-size:16px;hyphens:auto}.delivery-section .delivery-calc-heading{font-size:16px}.delivery-section .delivery-card-title,.delivery-section .delivery-badge-title,.delivery-section .delivery-policy-title{font-size:14px}.delivery-section .delivery-calc-controls{flex-direction:column;width:100%}.delivery-section .delivery-tab-btn{width:100%;text-align:center}}
/* ===== PAGE: faq ===== */
.faq-block {
background-color: var(--bg);
color: var(--text);
}
.faq-block .faq-lead-text {
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-muted);
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.faq-block .faq-search-wrapper {
max-width: 580px;
width: 100%;
}
.faq-block .faq-search-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
color: var(--text-muted);
pointer-events: none;
}
.faq-block .faq-search-input {
height: 52px;
border-radius: 9999px;
padding-left: 50px;
padding-right: 20px;
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(43, 37, 25, 0.04);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-block .faq-search-input:focus {
background-color: #FFFFFF;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25);
color: var(--text);
outline: none;
}
.faq-block .faq-search-input::placeholder {
color: var(--text-muted);
opacity: 0.85;
}
.faq-block .faq-filter-btn {
border-radius: 9999px;
padding: 8px 18px;
font-size: 0.9rem;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
font-weight: 500;
}
.faq-block .faq-filter-btn:hover {
background-color: var(--surface_alt);
border-color: var(--text-muted);
}
.faq-block .faq-filter-btn.active {
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(248, 205, 47, 0.35);
}
.faq-block .faq-accordion-container {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-block .faq-item {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-block .faq-item:hover {
border-color: var(--primary);
box-shadow: 0 6px 18px rgba(43, 37, 25, 0.06);
}
.faq-block .faq-item.active {
border-color: var(--primary);
background-color: #FFFFFF;
}
.faq-block .faq-item-header {
background: none;
border: none;
color: var(--text);
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease;
}
.faq-block .faq-item-header:focus {
outline: none;
}
.faq-block .faq-item-badge {
background-color: var(--surface_alt);
color: var(--text);
border: 1px solid var(--border);
padding: 4px 10px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.faq-block .faq-question-text {
font-family: 'DM Serif Text', serif;
font-size: 1.15rem;
line-height: 1.35;
color: var(--text);
overflow-wrap: anywhere;
}
.faq-block .faq-chevron-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--surface_alt);
border: 1px solid var(--border);
color: var(--text);
transition: transform 0.25s ease, background-color 0.2s ease;
}
.faq-block .faq-item.active .faq-chevron-icon {
transform: rotate(180deg);
background-color: var(--primary);
color: var(--on-primary);
border-color: var(--primary);
}
.faq-block .faq-icon {
width: 18px;
height: 18px;
}
.faq-block .faq-item-body {
display: none;
}
.faq-block .faq-item.active .faq-item-body {
display: block;
}
.faq-block .faq-item-content {
color: var(--text-muted);
font-size: 0.98rem;
line-height: 1.65;
border-top: 1px dashed var(--border);
padding-top: 16px;
}
.faq-block .faq-inline-link {
color: var(--primary-text);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.faq-block .faq-inline-link:hover {
color: var(--primary_hover);
}
.faq-block .faq-empty-state {
background-color: var(--surface);
border: 1px dashed var(--border);
}
.faq-block .faq-empty-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--surface_alt);
color: var(--text-muted);
}
.faq-block .faq-empty-icon .faq-icon {
width: 26px;
height: 26px;
}
.faq-block .faq-empty-title {
font-family: 'DM Serif Text', serif;
font-size: 1.25rem;
color: var(--text);
}
.faq-block .faq-cta-panel {
background-color: var(--dark-band);
color: var(--on-dark);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-block .faq-cta-title {
font-family: 'DM Serif Text', serif;
font-size: 1.45rem;
color: var(--on-dark);
}
.faq-block .faq-cta-desc {
color: var(--on-dark-muted);
font-size: 0.95rem;
line-height: 1.6;
}
.faq-block .faq-cta-panel .qx-btn {
background-color: var(--primary);
color: var(--on-primary);
border: none;
border-radius: 9999px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.faq-block .faq-cta-panel .qx-btn:hover {
background-color: var(--primary_hover);
color: var(--on-primary);
}
.faq-block .faq-cta-panel .qx-btn-alt {
background-color: transparent;
color: var(--on-dark);
border: 1.5px solid rgba(255, 255, 255, 0.4);
border-radius: 9999px;
padding: 8px 22px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.faq-block .faq-cta-panel .qx-btn-alt:hover {
background-color: rgba(255, 255, 255, 0.12);
color: #FFFFFF;
border-color: #FFFFFF;
}
@media (max-width: 767px) {
.faq-block .faq-question-text {
font-size: 1.02rem;
}
.faq-block .faq-item-header {
padding: 16px !important;
}
.faq-block .faq-item-content {
padding: 0 16px 16px 16px !important;
}
.faq-block .faq-cta-actions {
width: 100%;
flex-direction: column;
}
.faq-block .faq-cta-actions .qx-btn,
.faq-block .faq-cta-actions .qx-btn-alt {
width: 100%;
text-align: center;
}
}
/* ===== PAGE: reviews ===== */
.reviews-block { background-color: var(--bg); }
.reviews-block .reviews-bento-hero { background-color: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08); }
.reviews-block .reviews-score-badge { color: var(--text); line-height: 1; }
.reviews-block .reviews-stars-gold { color: #E8A800; }
.reviews-block .reviews-star-icon { display: inline-block; vertical-align: middle; }
.reviews-block .reviews-rating-col { min-width: 52px; }
.reviews-block .reviews-count-col { min-width: 36px; text-align: right; }
.reviews-block .reviews-bar-track { height: 8px; background-color: var(--surface_alt); border-radius: 9999px; overflow: hidden; }
.reviews-block .reviews-bar-fill { background-color: var(--primary); }
.reviews-block .reviews-filter-btn { background-color: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 9999px; padding: 8px 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.reviews-block .reviews-filter-btn:hover { background-color: var(--surface_alt); border-color: var(--text); }
.reviews-block .reviews-filter-btn.active { background-color: var(--primary); color: var(--on_primary); border-color: var(--primary); font-weight: 600; box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35); }
.reviews-block .reviews-card { background-color: #FFFFFF; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.reviews-block .reviews-card:hover { box-shadow: 0 14px 32px -4px rgba(43, 37, 25, 0.14); border-color: #C3BFB6; }
.reviews-block .reviews-card-header { background-color: var(--surface_alt); border-bottom: 1px solid var(--border); }
.reviews-block .reviews-meta-pill { background-color: #FFFFFF; border: 1px solid var(--border); border-radius: 9999px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--text); }
.reviews-block .reviews-card-title { color: var(--text); font-family: 'DM Serif Text', serif; font-size: 18px; line-height: 1.35; }
.reviews-block .reviews-avatar { width: 44px; height: 44px; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 2px 6px rgba(43, 37, 25, 0.12); flex-shrink: 0; }
.reviews-block .reviews-notice-banner { background-color: var(--surface_alt); border: 1px solid var(--border); }
.reviews-block .reviews-shield-icon { width: 48px; height: 48px; border: 1px solid var(--border); }
@media (max-width: 767px) {
.reviews-block .reviews-card-title { font-size: 16px; }
.reviews-block .reviews-bento-hero { padding: 20px !important; }
}
.comment-card.main-comment {
background-color: #FFFFFF;
border: 1px solid #E4E0D8;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.08);
margin-bottom: 16px;
}
.comment-body-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.comment-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.comment-user-meta {
display: flex;
align-items: center;
gap: 14px;
}
.comment-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #E4E0D8;
background-color: #F4F1E6;
flex-shrink: 0;
}
.comment-user-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.comment-author-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.comment-author-name {
margin: 0;
font-family: 'DM Serif Text', serif;
font-size: 18px;
line-height: 1.25;
color: #2B2519;
font-weight: 400;
}
.comment-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-family: 'DM Serif Text', serif;
font-size: 12px;
line-height: 1.2;
color: #29271E;
background-color: #F4F1E6;
border: 1px solid #E4E0D8;
border-radius: 9999px;
}
.comment-timestamp {
font-family: 'DM Serif Text', serif;
font-size: 13px;
line-height: 1.2;
color: #726A5A;
}
.comment-rating {
display: inline-flex;
align-items: center;
gap: 4px;
}
.comment-star-icon {
width: 18px;
height: 18px;
color: #F8CD2F;
}
.comment-content {
margin-bottom: 18px;
}
.comment-text {
margin: 0;
font-family: 'DM Serif Text', serif;
font-size: 16px;
line-height: 1.6;
color: #2B2519;
}
.comment-actions {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px solid #E4E0D8;
padding-top: 14px;
}
.comment-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-family: 'DM Serif Text', serif;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
color: #29271E;
background-color: #F9F7F3;
border: 1px solid #E4E0D8;
border-radius: 9999px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.comment-action-btn:hover {
background-color: #F4F1E6;
border-color: #29271E;
color: #29271E;
}
.comment-action-icon {
width: 16px;
height: 16px;
color: #29271E;
}
.comment-like-badge {
display: inline-block;
background-color: #F8CD2F;
color: #111111;
font-size: 12px;
padding: 1px 7px;
border-radius: 9999px;
font-weight: 400;
}
.comment-card.reply-comment {
position: relative;
background-color: #F9F7F3;
border: 1px solid #E4E0D8;
border-left: 3px solid #F8CD2F;
border-radius: 12px;
padding: 20px;
margin-left: 36px;
margin-top: 12px;
margin-bottom: 12px;
box-shadow: 0 4px 14px rgba(43, 37, 25, 0.04);
}
@media (max-width: 576px) {
.comment-card.reply-comment {
margin-left: 16px;
padding: 16px;
}
}
.reply-thread-line {
display: none;
}
.comment-avatar.comment-avatar-sm {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #E4E0D8;
background-color: #F4F1E6;
flex-shrink: 0;
}
.staff-badge {
background-color: #19160F;
color: #F8CD2F;
border-color: #19160F;
}
.comment-card.reply-comment .comment-text {
font-size: 15px;
color: #2B2519;
line-height: 1.55;
}
.comment-card.reply-comment .comment-actions {
border-top: 1px solid #E4E0D8;
padding-top: 12px;
}
/* ===== PAGE TEMPLATE: catalog-items ===== */
.pures-header {
background-color: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: 0 4px 20px rgba(43, 37, 25, 0.06);
z-index: 1030;
}
.pures-header .pures-navbar {
background-color: var(--bg);
}
.pures-header .pures-brand {
text-decoration: none;
color: var(--text);
}
.pures-header .pures-brand-img {
max-width: 44px;
max-height: 44px;
width: 44px;
height: 44px;
object-fit: contain;
}
.pures-header .pures-brand-text {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 1.35rem;
font-weight: 400;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.2;
}
.pures-header .pures-nav-link {
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.95rem;
color: var(--text);
padding: 0.5rem 0.85rem;
border-radius: 9999px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.pures-header .pures-nav-link:hover,
.pures-header .pures-nav-link:focus {
color: var(--primary-text);
background-color: var(--surface-alt);
}
.pures-header .pures-nav-link.active {
color: var(--primary-text);
font-weight: 600;
}
.pures-header .dropdown-toggle::after {
vertical-align: middle;
margin-left: 0.35rem;
}
.pures-header .pures-dropdown-menu {
background-color: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 24px -4px rgba(43, 37, 25, 0.1);
padding: 0.5rem 0;
min-width: 200px;
}
.pures-header .pures-dropdown-item {
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.9rem;
color: var(--text);
padding: 0.5rem 1.25rem;
transition: background-color 0.15s ease, color 0.15s ease;
}
.pures-header .pures-dropdown-item:hover,
.pures-header .pures-dropdown-item:focus {
background-color: var(--surface-alt);
color: var(--primary-text);
}
.pures-header .pures-dropdown-divider {
border-color: var(--border);
margin: 0.35rem 0;
}
.pures-header .pures-cart-btn {
background-color: var(--primary);
color: var(--on-primary);
border: 1px solid transparent;
border-radius: 9999px;
padding: 0.45rem 0.95rem;
font-family: var(--font_family_primary, 'DM Serif Text', serif);
font-size: 0.9rem;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.pures-header .pures-cart-btn:hover,
.pures-header .pures-cart-btn:focus {
background-color: var(--primary-hover);
color: var(--on-primary);
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.pures-header .pures-cart-icon {
width: 20px;
height: 20px;
}
.pures-header .pures-cart-title {
font-weight: 500;
}
.pures-header .pures-cart-counter {
background-color: var(--dark-band);
color: var(--on-dark);
border-radius: 9999px;
font-size: 0.75rem;
padding: 0.2rem 0.45rem;
}
.pures-header .pures-toggler {
border: 1px solid var(--border);
border-radius: 8px;
background-color: var(--surface);
color: var(--text);
}
.pures-header .pures-toggler:focus {
box-shadow: none;
border-color: var(--primary);
}
.pures-header .pures-toggler-icon {
width: 24px;
height: 24px;
}
@media (max-width: 991.98px) {
.pures-header .navbar-collapse {
background-color: var(--bg);
border-top: 1px solid var(--border);
padding: 1rem 0.5rem;
margin-top: 0.5rem;
}
.pures-header .pures-nav-link {
padding: 0.65rem 1rem;
font-size: 0.85rem;
}
.pures-header .pures-dropdown-menu {
border: 1px solid var(--border);
background-color: var(--surface);
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.pp-hero {
background-color: var(--hero-bg, #19160F);
color: var(--on-hero, #FFFFFF);
padding: 36px 0;
border-bottom: 2px solid var(--primary, #F8CD2F);
}
.pp-hero .pp-hero-eyebrow {
background-color: #F4F1E6;
color: #29271E;
border: 1px solid #E4E0D8;
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 500;
text-transform: uppercase;
}
.pp-hero .pp-hero-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #F8CD2F;
display: inline-block;
}
.pp-hero .pp-hero-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 38px;
line-height: 1.2;
color: #FFFFFF;
overflow-wrap: anywhere;
}
.pp-hero .pp-hero-text {
font-size: 16px;
line-height: 1.6;
color: #E2DFD8;
overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
.pp-hero .pp-hero-title {
font-size: 18px !important;
}
.pp-hero .pp-hero-text {
font-size: 14px;
}
}
.pdp-main-content .pdp-wrapper {
max-width: 900px;
width: 100%;
}
.pdp-main-content .pdp-toc {
position: sticky;
top: 76px;
z-index: 10;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
padding: 10px 0;
border-bottom: 1px solid var(--border, #E4E0D8);
}
.pdp-main-content .pdp-toc-chip {
display: inline-block;
background-color: var(--surface-alt, #F4F1E6);
color: var(--text, #2B2519);
border: 1px solid var(--border, #E4E0D8);
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pdp-main-content .pdp-toc-chip:hover,
.pdp-main-content .pdp-toc-chip:focus {
background-color: var(--primary, #F8CD2F);
border-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
}
.pdp-main-content .pdp-heading {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 26px;
line-height: 1.3;
color: var(--text, #2B2519);
border-left: 4px solid var(--primary, #F8CD2F);
padding-left: 14px;
margin: 0;
overflow-wrap: anywhere;
}
.pdp-main-content .pdp-subheading {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 18px;
line-height: 1.3;
color: var(--text, #2B2519);
overflow-wrap: anywhere;
}
.pdp-main-content .pdp-image-frame {
width: 100%;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border, #E4E0D8);
aspect-ratio: 16 / 10;
background-color: var(--surface-alt, #F4F1E6);
}
.pdp-main-content .pdp-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pdp-main-content .pdp-card-intro {
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
}
.pdp-main-content .pdp-price-label {
font-size: 14px;
color: var(--text-muted, #726A5A);
}
.pdp-main-content .pdp-price-val {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 28px;
color: var(--text, #2B2519);
line-height: 1;
font-weight: 600;
}
.pdp-main-content .pdp-summary-text {
font-size: 15px;
line-height: 1.6;
color: var(--text, #2B2519);
}
.pdp-main-content .pdp-benefit-box {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 14px;
}
.pdp-main-content .pdp-benefit-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--surface-alt, #F4F1E6);
border: 1px solid var(--border, #E4E0D8);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent, #29271E);
}
.pdp-main-content .pdp-body-muted {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted, #726A5A);
}
.pdp-main-content .pdp-spec-card {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
}
.pdp-main-content .pdp-spec-term {
font-size: 14px;
font-weight: 500;
color: var(--text-muted, #726A5A);
}
.pdp-main-content .pdp-spec-desc {
font-size: 14px;
font-weight: 600;
color: var(--text, #2B2519);
}
.pdp-main-content .pdp-order-box {
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
}
.pdp-main-content .pdp-label {
font-size: 13px;
font-weight: 500;
color: var(--text, #2B2519);
}
.pdp-main-content .pdp-input,
.pdp-main-content .pdp-textarea {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 8px;
color: var(--text, #2B2519);
font-size: 14px;
padding: 10px 14px;
}
.pdp-main-content .pdp-input::placeholder,
.pdp-main-content .pdp-textarea::placeholder {
color: #9C9484;
opacity: 1;
}
.pdp-main-content .pdp-input:focus,
.pdp-main-content .pdp-textarea:focus {
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25);
}
.pdp-main-content .pdp-checkbox {
margin-top: 3px;
accent-color: var(--primary, #F8CD2F);
}
.pdp-main-content .pdp-consent-label {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted, #726A5A);
}
.pdp-main-content .pdp-link {
color: var(--text, #2B2519);
text-decoration: underline;
}
.pdp-main-content .pdp-submit-btn {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: none;
border-radius: 9999px;
font-weight: 500;
font-size: 15px;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
transition: background-color 0.15s ease;
}
.pdp-main-content .pdp-submit-btn:hover {
background-color: var(--primary-hover, #F6C308);
color: #111111;
}
.comment-card {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
position: relative;
}
.comment-card.reply-comment {
margin-left: 28px;
background-color: var(--surface, #F9F7F3);
}
.reply-thread-line {
position: absolute;
top: -16px;
left: -18px;
bottom: 50%;
width: 2px;
background-color: var(--border, #E4E0D8);
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.comment-user-meta {
display: flex;
align-items: center;
gap: 12px;
}
.comment-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.comment-avatar-sm {
width: 36px;
height: 36px;
}
.comment-author-name {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 16px;
line-height: 1.2;
color: var(--text, #2B2519);
margin: 0;
}
.comment-badge {
font-size: 11px;
padding: 2px 8px;
background-color: var(--surface-alt, #F4F1E6);
color: var(--text, #2B2519);
border-radius: 9999px;
margin-left: 6px;
}
.comment-badge.staff-badge {
background-color: var(--dark-band, #19160F);
color: #FFFFFF;
}
.comment-timestamp {
font-size: 11px;
color: var(--text-muted, #726A5A);
}
.comment-rating {
color: var(--primary, #F8CD2F);
display: inline-flex;
}
.comment-star-icon {
width: 16px;
height: 16px;
}
.comment-text {
font-size: 14px;
line-height: 1.5;
color: var(--text, #2B2519);
margin: 0 0 12px 0;
}
.comment-actions {
display: flex;
align-items: center;
gap: 12px;
}
.comment-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid var(--border, #E4E0D8);
border-radius: 9999px;
padding: 4px 12px;
font-size: 12px;
color: var(--text, #2B2519);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.comment-action-btn:hover {
background-color: var(--surface-alt, #F4F1E6);
}
.comment-action-btn.active {
background-color: var(--primary, #F8CD2F);
border-color: var(--primary, #F8CD2F);
color: #111111;
}
.comment-action-icon {
width: 14px;
height: 14px;
}
.comment-like-badge {
font-weight: 600;
}
.pdp-main-content .pdp-related-item {
background-color: #FFFFFF;
border: 1px solid var(--border, #E4E0D8);
border-radius: 12px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.pdp-main-content .pdp-related-item:hover {
border-color: var(--primary, #F8CD2F);
transform: translateX(4px);
}
.pdp-main-content .pdp-related-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary, #F8CD2F);
display: inline-block;
}
.pdp-main-content .pdp-related-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 16px;
color: var(--text, #2B2519);
}
.pdp-main-content .pdp-related-meta {
font-size: 13px;
color: var(--text-muted, #726A5A);
}
.pdp-main-content .pdp-arrow-icon {
color: var(--text, #2B2519);
}
.pdp-main-content .pdp-split-cta {
background-color: var(--dark-band, #19160F);
border-radius: 20px;
}
.pdp-main-content .pdp-cta-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 22px;
}
.pdp-main-content .pdp-cta-desc {
font-size: 14px;
}
.pdp-main-content .pdp-cta-btn {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: none;
border-radius: 9999px;
padding: 12px 28px;
font-size: 15px;
text-decoration: none;
font-weight: 500;
}
.pures-footer {
background-color: var(--footer-bg, #19160F);
color: var(--on-footer, #FFFFFF);
position: relative;
width: 100%;
overflow: hidden;
}
.pures-footer__top-border {
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--primary, #F8CD2F) 50%, transparent 100%);
}
.pures-footer__main {
padding: 64px 0 40px;
}
.pures-footer__col {
display: flex;
flex-direction: column;
height: 100%;
}
.pures-footer__title {
font-family: 'DM Serif Text', serif;
font-size: 20px;
line-height: 1.3;
font-weight: 400;
color: var(--on-footer, #FFFFFF);
margin-bottom: 20px;
overflow-wrap: anywhere;
}
.pures-footer__desc {
color: var(--on-footer-muted, #C3BFB6);
font-size: 14px;
line-height: 1.6;
margin-bottom: 24px;
overflow-wrap: anywhere;
}
.pures-footer__contact-box {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
}
.pures-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--on-footer-muted, #C3BFB6);
overflow-wrap: anywhere;
}
.pures-footer__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: var(--primary, #F8CD2F);
}
.pures-footer__contact-text {
color: var(--on-footer-muted, #C3BFB6);
line-height: 1.5;
}
.pures-footer__contact-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
transition: color 0.2s ease;
line-height: 1.5;
}
.pures-footer__contact-link:hover,
.pures-footer__contact-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__wa-wrap {
margin-top: auto;
padding-top: 10px;
}
.pures-footer__wa-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--on-footer, #FFFFFF);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pures-footer__wa-link:hover,
.pures-footer__wa-link:focus {
background-color: var(--primary, #F8CD2F);
border-color: var(--primary, #F8CD2F);
color: #111111;
}
.pures-footer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pures-footer__list-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
overflow-wrap: anywhere;
}
.pures-footer__list-link:hover,
.pures-footer__list-link:focus {
color: var(--primary, #F8CD2F);
transform: translateX(3px);
}
.pures-footer__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.pures-footer__input-wrap {
width: 100%;
}
.pures-footer__input {
width: 100%;
height: 46px;
border-radius: 9999px;
background-color: #29271E;
border: 1px solid rgba(228, 224, 216, 0.25);
color: #FFFFFF;
padding: 0 20px;
font-size: 14px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pures-footer__input::placeholder {
color: #A6A092;
opacity: 1;
}
.pures-footer__input:focus {
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.2);
}
.pures-footer__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 2px;
}
.pures-footer__checkbox {
margin-top: 3px;
min-width: 16px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--primary, #F8CD2F);
}
.pures-footer__consent-text {
font-size: 12px;
line-height: 1.5;
color: var(--on-footer-muted, #C3BFB6);
cursor: pointer;
margin: 0;
}
.pures-footer__inline-link {
color: var(--on-footer, #FFFFFF);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.pures-footer__inline-link:hover,
.pures-footer__inline-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
height: 46px;
border-radius: 9999px;
background-color: var(--primary, #F8CD2F);
color: #111111;
font-weight: 600;
font-size: 15px;
border: none;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
}
.pures-footer__btn:hover,
.pures-footer__btn:focus {
background-color: var(--primary-hover, #F6C308);
color: #111111;
box-shadow: 0 6px 18px rgba(246, 195, 8, 0.45);
}
.pures-footer__bottom {
border-top: 1px solid rgba(228, 224, 216, 0.15);
padding: 24px 0 32px;
font-size: 13px;
}
.pures-footer__copy {
color: var(--on-footer-muted, #C3BFB6);
font-size: 13px;
overflow-wrap: anywhere;
}
.pures-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px 12px;
}
.pures-footer__legal-link {
color: var(--on-footer-muted, #C3BFB6);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}
.pures-footer__legal-link:hover,
.pures-footer__legal-link:focus {
color: var(--primary, #F8CD2F);
}
.pures-footer__sep {
color: rgba(228, 224, 216, 0.3);
font-size: 10px;
}
.pures-footer__payment-list {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pures-footer__payment-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 12px;
border-radius: 6px;
background-color: #FFFFFF;
border: 1px solid rgba(228, 224, 216, 0.2);
}
.pures-footer__visa-text {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
font-style: italic;
font-size: 14px;
letter-spacing: 0.5px;
color: #1A1F71;
line-height: 1;
}
.pures-footer__payment-pill--mastercard {
gap: 6px;
}
.pures-footer__mc-circle {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
}
.pures-footer__mc-circle--red {
background-color: #EB001B;
margin-right: -7px;
}
.pures-footer__mc-circle--amber {
background-color: #F79E1B;
opacity: 0.95;
}
.pures-footer__mc-label {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 600;
color: #19160F;
line-height: 1;
margin-left: 2px;
}
@media (max-width: 991.98px) {
.pures-footer__main {
padding: 48px 0 32px;
}
.pures-footer__legal {
justify-content: center;
}
.pures-footer__payment-list {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.pures-footer__title {
font-size: 18px;
margin-bottom: 14px;
}
.pures-footer__main {
padding: 40px 0 24px;
}
.pures-footer__bottom {
padding: 20px 0 28px;
}
.pures-footer__legal {
flex-direction: column;
gap: 8px;
}
.pures-footer__sep {
display: none;
}
.comment-card.reply-comment {
margin-left: 12px;
}
.pdp-main-content .pdp-heading {
font-size: 16px !important;
}
.pdp-main-content .pdp-subheading {
font-size: 14px !important;
}
.pdp-main-content .pdp-cta-title {
font-size: 16px !important;
}
}
/* ===== PAGE TEMPLATE: blog-posts ===== */
.pp-article-view {
background-color: var(--bg, #FFFFFF);
color: var(--text, #2B2519);
}
.pp-article-view .pp-container-narrow {
max-width: 1100px;
}
.pp-article-view .pp-band {
width: 100%;
position: relative;
}
.pp-article-view .pp-pill-eyebrow {
background-color: var(--surface-alt, #F4F1E6);
color: var(--primary-text, #29271E);
border: 1px solid var(--border, #E4E0D8);
border-radius: 9999px;
padding: 6px 16px;
font-size: 13px;
letter-spacing: 0.04em;
font-weight: 500;
text-transform: uppercase;
}
.pp-article-view .pp-pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary, #F8CD2F);
display: inline-block;
}
.pp-article-view .pp-article-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 44px;
line-height: 1.2;
font-weight: 400;
color: var(--text, #2B2519);
overflow-wrap: anywhere;
}
.pp-article-view .pp-meta-row {
font-size: 14px;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-meta-icon {
width: 16px;
height: 16px;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-meta-divider {
color: var(--border, #E4E0D8);
font-size: 12px;
}
.pp-article-view .pp-media-offset-wrap {
max-width: 920px;
margin: 0 auto;
}
.pp-article-view .pp-media-offset-backdrop {
position: absolute;
top: 14px;
left: 14px;
right: -14px;
bottom: -14px;
background: linear-gradient(135deg, var(--surface-alt, #F4F1E6) 0%, var(--primary, #F8CD2F) 100%);
border-radius: 20px;
z-index: 1;
opacity: 0.85;
}
.pp-article-view .pp-media-offset-frame {
position: relative;
z-index: 2;
border-radius: 18px;
border: 1px solid var(--border, #E4E0D8);
aspect-ratio: 16 / 9;
background-color: var(--surface, #F9F7F3);
box-shadow: 0 12px 32px -6px rgba(43, 37, 25, 0.12);
}
.pp-article-view .pp-media-offset-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pp-article-view .pp-band-heading {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 32px;
line-height: 1.25;
font-weight: 400;
color: var(--text, #2B2519);
border-left: 4px solid var(--primary, #F8CD2F);
padding-left: 16px;
margin-bottom: 0;
overflow-wrap: anywhere;
}
.pp-article-view .pp-facts-list {
max-width: 860px;
margin: 0 auto;
}
.pp-article-view .pp-fact-card {
background-color: var(--bg, #FFFFFF);
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
box-shadow: 0 4px 16px rgba(43, 37, 25, 0.05);
}
.pp-article-view .pp-fact-num {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 20px;
font-weight: 400;
color: var(--on-primary, #111111);
background-color: var(--primary, #F8CD2F);
border-radius: 9999px;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pp-article-view .pp-fact-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 19px;
font-weight: 400;
color: var(--text, #2B2519);
}
.pp-article-view .pp-fact-desc {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-article-prose {
max-width: 860px;
margin: 0 auto;
font-size: 16px;
line-height: 1.7;
color: var(--text, #2B2519);
}
.pp-article-view .pp-content-heading {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 28px;
line-height: 1.3;
font-weight: 400;
color: var(--text, #2B2519);
border-left: 4px solid var(--primary, #F8CD2F);
padding-left: 16px;
margin-top: 36px;
margin-bottom: 20px;
overflow-wrap: anywhere;
}
.pp-article-view .pp-prose-lead {
font-size: 18px;
line-height: 1.6;
color: var(--text, #2B2519);
font-weight: 400;
margin-bottom: 20px;
}
.pp-article-view .pp-prose-p {
margin-bottom: 18px;
color: var(--text, #2B2519);
}
.pp-article-view .pp-blockquote {
background-color: var(--surface-alt, #F4F1E6);
border-left: 4px solid var(--primary, #F8CD2F);
border-radius: 0 16px 16px 0;
}
.pp-article-view .pp-blockquote-text {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 20px;
font-style: italic;
line-height: 1.5;
color: var(--text, #2B2519);
}
.pp-article-view .pp-blockquote-cite {
font-size: 14px;
color: var(--text-muted, #726A5A);
font-style: normal;
}
.pp-article-view .pp-prose-list {
list-style: disc inside;
color: var(--text, #2B2519);
padding-left: 8px;
}
.pp-article-view .pp-prose-list-item {
line-height: 1.6;
}
.pp-article-view .pp-band--cta {
background: linear-gradient(135deg, var(--surface-alt, #F4F1E6) 0%, var(--surface, #F9F7F3) 100%);
border-top: 1px solid var(--border, #E4E0D8);
border-bottom: 1px solid var(--border, #E4E0D8);
}
.pp-article-view .pp-cta-box {
background-color: var(--bg, #FFFFFF);
border: 1px solid var(--border, #E4E0D8);
border-radius: 20px;
box-shadow: 0 8px 28px -4px rgba(43, 37, 25, 0.08);
}
.pp-article-view .pp-cta-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 32px;
font-weight: 400;
color: var(--text, #2B2519);
}
.pp-article-view .pp-cta-subtitle {
max-width: 580px;
font-size: 15px;
line-height: 1.6;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-cta-form {
max-width: 560px;
}
.pp-article-view .pp-cta-input {
height: 48px;
border-radius: 9999px;
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
color: var(--text, #2B2519);
padding: 0 20px;
font-size: 15px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pp-article-view .pp-cta-input::placeholder {
color: var(--text-muted, #726A5A);
opacity: 1;
}
.pp-article-view .pp-cta-input:focus {
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25);
}
.pp-article-view .pp-cta-btn {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: none;
border-radius: 9999px;
padding: 0 28px;
height: 48px;
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 15px;
font-weight: 400;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
cursor: pointer;
transition: background-color 0.15s ease;
}
.pp-article-view .pp-cta-btn:hover,
.pp-article-view .pp-cta-btn:focus {
background-color: var(--primary-hover, #F6C308);
color: var(--on-primary, #111111);
}
.pp-article-view .pp-cta-checkbox {
margin-top: 3px;
min-width: 16px;
width: 16px;
height: 16px;
accent-color: var(--primary, #F8CD2F);
cursor: pointer;
}
.pp-article-view .pp-cta-consent-label {
font-size: 13px;
color: var(--text-muted, #726A5A);
line-height: 1.5;
cursor: pointer;
}
.pp-article-view .pp-cta-link {
color: var(--primary-text, #29271E);
text-decoration: underline;
}
.pp-article-view .pp-author-card {
max-width: 860px;
margin: 0 auto;
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
border-radius: 18px;
}
.pp-article-view .pp-author-avatar {
width: 80px;
height: 80px;
object-fit: cover;
border: 2px solid var(--border, #E4E0D8);
}
.pp-article-view .pp-author-tag {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted, #726A5A);
font-weight: 500;
}
.pp-article-view .pp-author-name {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 22px;
font-weight: 400;
color: var(--text, #2B2519);
}
.pp-article-view .pp-author-bio {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-accordion {
max-width: 860px;
margin: 0 auto;
}
.pp-article-view .pp-accordion-item {
background-color: var(--bg, #FFFFFF);
border: 1px solid var(--border, #E4E0D8) !important;
border-radius: 14px !important;
overflow: hidden;
}
.pp-article-view .pp-accordion-button {
background-color: var(--bg, #FFFFFF);
color: var(--text, #2B2519);
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 18px;
font-weight: 400;
padding: 18px 24px;
}
.pp-article-view .pp-accordion-button:not(.collapsed) {
background-color: var(--surface, #F9F7F3);
color: var(--primary-text, #29271E);
}
.pp-article-view .pp-accordion-button::after {
filter: brightness(0.2);
}
.pp-article-view .pp-accordion-body {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted, #726A5A);
padding: 0 24px 20px;
background-color: var(--surface, #F9F7F3);
}
.pp-article-view .pp-related-list {
max-width: 860px;
margin: 0 auto;
}
.pp-article-view .pp-related-link {
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
color: var(--text, #2B2519);
text-decoration: none;
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 17px;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pp-article-view .pp-related-link:hover,
.pp-article-view .pp-related-link:focus {
background-color: var(--surface-alt, #F4F1E6);
border-color: var(--primary, #F8CD2F);
color: var(--primary-text, #29271E);
}
.pp-article-view .pp-related-arrow {
color: var(--text-muted, #726A5A);
transition: transform 0.15s ease, color 0.15s ease;
}
.pp-article-view .pp-related-link:hover .pp-related-arrow {
color: var(--primary-text, #29271E);
transform: translateX(4px);
}
.pp-article-view .pp-comments-list {
max-width: 860px;
margin: 0 auto;
}
.pp-article-view .comment-card {
background-color: var(--bg, #FFFFFF);
border: 1px solid var(--border, #E4E0D8);
border-radius: 16px;
padding: 20px;
position: relative;
}
.pp-article-view .reply-comment {
margin-left: 40px;
background-color: var(--surface, #F9F7F3);
}
.pp-article-view .reply-thread-line {
position: absolute;
top: -16px;
left: -20px;
width: 2px;
height: 36px;
background-color: var(--border, #E4E0D8);
}
.pp-article-view .comment-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.pp-article-view .comment-user-meta {
display: flex;
align-items: center;
gap: 12px;
}
.pp-article-view .comment-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.pp-article-view .comment-avatar-sm {
width: 36px;
height: 36px;
}
.pp-article-view .comment-author-row {
display: flex;
align-items: center;
gap: 8px;
}
.pp-article-view .comment-author-name {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 16px;
color: var(--text, #2B2519);
margin: 0;
}
.pp-article-view .comment-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 9999px;
background-color: var(--surface-alt, #F4F1E6);
color: var(--primary-text, #29271E);
border: 1px solid var(--border, #E4E0D8);
}
.pp-article-view .staff-badge {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: 1px solid transparent;
}
.pp-article-view .comment-timestamp {
font-size: 12px;
color: var(--text-muted, #726A5A);
}
.pp-article-view .comment-rating {
display: flex;
gap: 2px;
color: #F8CD2F;
}
.pp-article-view .comment-star-icon {
width: 16px;
height: 16px;
}
.pp-article-view .comment-content {
margin-bottom: 14px;
}
.pp-article-view .comment-text {
font-size: 15px;
line-height: 1.6;
color: var(--text, #2B2519);
margin: 0;
}
.pp-article-view .comment-actions {
display: flex;
align-items: center;
gap: 12px;
}
.pp-article-view .comment-action-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid var(--border, #E4E0D8);
border-radius: 9999px;
padding: 4px 12px;
font-size: 13px;
color: var(--text-muted, #726A5A);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pp-article-view .comment-action-btn:hover {
background-color: var(--surface-alt, #F4F1E6);
color: var(--text, #2B2519);
}
.pp-article-view .comment-action-btn.active {
background-color: rgba(248, 205, 47, 0.2);
border-color: var(--primary, #F8CD2F);
color: var(--primary-text, #29271E);
}
.pp-article-view .comment-action-icon {
width: 16px;
height: 16px;
}
.pp-article-view .comment-like-badge {
font-size: 12px;
font-weight: 600;
background-color: var(--surface-alt, #F4F1E6);
padding: 1px 6px;
border-radius: 9999px;
}
.pp-article-view .pp-comment-form-wrap {
max-width: 860px;
margin: 0 auto;
background-color: var(--bg, #FFFFFF);
border: 1px solid var(--border, #E4E0D8);
border-radius: 18px;
}
.pp-article-view .pp-form-card-title {
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 24px;
color: var(--text, #2B2519);
}
.pp-article-view .pp-form-card-desc {
font-size: 14px;
color: var(--text-muted, #726A5A);
}
.pp-article-view .pp-input-label {
font-size: 13px;
font-weight: 500;
color: var(--text, #2B2519);
}
.pp-article-view .pp-text-input,
.pp-article-view .pp-textarea-input {
background-color: var(--surface, #F9F7F3);
border: 1px solid var(--border, #E4E0D8);
color: var(--text, #2B2519);
font-size: 14px;
}
.pp-article-view .pp-text-input::placeholder,
.pp-article-view .pp-textarea-input::placeholder {
color: var(--text-muted, #726A5A);
opacity: 1;
}
.pp-article-view .pp-text-input:focus,
.pp-article-view .pp-textarea-input:focus {
border-color: var(--primary, #F8CD2F);
box-shadow: 0 0 0 3px rgba(248, 205, 47, 0.25);
background-color: var(--bg, #FFFFFF);
}
.pp-article-view .pp-comment-submit-btn {
background-color: var(--primary, #F8CD2F);
color: var(--on-primary, #111111);
border: none;
border-radius: 9999px;
padding: 10px 24px;
font-family: var(--font_family_headings, 'DM Serif Text', serif);
font-size: 15px;
box-shadow: 0 4px 14px rgba(248, 205, 47, 0.35);
}
.pp-article-view .pp-comment-submit-btn:hover {
background-color: var(--primary-hover, #F6C308);
color: var(--on-primary, #111111);
}
@media (max-width: 767.98px) {
.pp-article-view .pp-article-title {
font-size: 18px !important;
line-height: 1.25;
}
.pp-article-view .pp-band-heading,
.pp-article-view .pp-cta-title {
font-size: 16px !important;
}
.pp-article-view .pp-content-heading,
.pp-article-view .pp-form-card-title,
.pp-article-view .pp-author-name {
font-size: 14px !important;
}
.pp-article-view .pp-media-offset-backdrop {
top: 8px;
left: 8px;
right: -8px;
bottom: -8px;
}
.pp-article-view .reply-comment {
margin-left: 14px;
}
.pp-article-view .reply-thread-line {
left: -10px;
}
}
/* mobile-text-guard */
@media (max-width: 767px) {
h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
overflow-wrap: anywhere;
}
a, button, .btn {
overflow-wrap: anywhere;
white-space: normal;
}
img, video, iframe {
max-width: 100%;
}
}
/* Shared navigation and product refinements */
.product-hero .pp-hero-img { object-position: center; }
.product-hero .pp-hero-overlay { background: linear-gradient(90deg, rgba(25,22,15,.9), rgba(25,22,15,.7) 45%, rgba(25,22,15,.18)); }
.pures-header-actions { flex-wrap: nowrap; flex-shrink: 0; }
@media (max-width: 991.98px) {
.pures-header .pures-navbar > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
.pures-header .pures-brand { margin: 0; min-width: 0; }
.pures-header .pures-brand-text { font-size: 1.1rem; }
.pures-header .pures-brand-img { width: 36px; height: 36px; }
.pures-header-actions { margin-left: 0 !important; }
.pures-header .navbar-collapse { grid-column: 1 / -1; }
.pures-header .pures-cart-btn { padding: .45rem .65rem; }
.pdp-main-content .pdp-toc { position: static; top: auto; backdrop-filter: none; }
}
/* Contact details: consistent icon and text columns */
.contact-info-block .contact-detail-card { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); align-items: start !important; gap: 16px !important; padding: 18px !important; }
.contact-info-block .contact-detail-card > div:last-child { min-width: 0; }
.contact-info-block .contact-detail-card .qx-icon { margin: 0; background: #F8CD2F; }
.contact-info-block .contact-detail-card .small { font-size: 12px; line-height: 1.4; letter-spacing: .04em; margin-bottom: 5px; text-transform: uppercase; }
.contact-info-block .contact-info-text, .contact-info-block .contact-info-link { display: block; font-size: 16px; line-height: 1.5; font-weight: 500; word-break: normal; overflow-wrap: anywhere; }
.contact-info-block .contact-map { height: 100%; min-height: 500px; }
@media (min-width: 992px) { .contact-info-block > .container > .row { align-items: stretch !important; } .contact-info-block .col-lg-7 { display: flex; } .contact-info-block .contact-map-wrapper { width: 100%; } }
@media (max-width: 991.98px) { .contact-info-block .contact-map { height: 320px; min-height: 0; } }