:root { --color-primary: #B7825F;
--color-primary-dark: #8C5E3C;
--color-bg-light: #E5DECA;
--color-bg-dark: #38211E;
--color-text-main: #38211E;
--color-off-white: #F9F7F2;
--color-white: #ffffff;
--color-border: rgba(56, 33, 30, 0.05); --font-display: 'Fraunces', serif;
--font-body: 'Libre Baskerville', serif;
--font-accent: 'Courier Prime', monospace; --container-width: 1440px;
--header-height: 100px;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-2xl: 1.5rem;
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--color-bg-light);
color: var(--color-text-main);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
} h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
color: var(--color-text-main);
}
.font-accent {
font-family: var(--font-accent);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.text-center { text-align: center; }
.italic { font-style: italic; } .container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 1.5rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.grid { display: grid; }
.gap-4 { gap: 1rem; }
.relative { position: relative; } .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
border-bottom: 1px solid var(--color-border);
background: rgba(229, 222, 202, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: all 0.3s ease;
}
.header-inner {
height: var(--header-height);
display: flex;
align-items: center;
justify-content: space-between;
position: relative; }
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
} .custom-logo-link {
display: block; margin: 0 auto; }
.custom-logo-link img {
max-height: 80px;
width: auto;
margin: 0 auto; }
.brand h2 {
font-size: 1.5rem;
letter-spacing: -0.02em;
font-weight: 900;
}
.main-nav ul {
display: none; gap: 2.5rem;
margin: 0;
padding: 0;
}
.main-nav a {
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-main);
}
.main-nav a:hover {
color: var(--color-primary);
}
.header-actions {
display: flex;
gap: 1rem;
}
.icon-btn {
padding: 0.5rem;
border-radius: 50%;
color: var(--color-text-main);
transition: background-color 0.2s, color 0.2s;
position: relative;
}
.icon-btn:hover {
background-color: rgba(56, 33, 30, 0.05);
color: var(--color-primary);
}
.cart-dot {
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
background-color: var(--color-primary);
border-radius: 50%;
}
.mobile-menu-btn {
display: block;
color: var(--color-text-main);
} @media (max-width: 991px) {
.brand {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 20;
width: max-content; justify-content: center;
} .brand .custom-logo-link {
display: flex;
justify-content: center;
}
} @media (min-width: 992px) {
.main-nav ul { display: flex; }
.mobile-menu-btn { display: none; } .brand {
position: static;
transform: none;
width: auto;
}
} .hero-section {
position: relative;
width: 100%;
height: 85vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
margin-top: var(--header-height);
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
transition: transform 20s ease;
}
.hero-section:hover .hero-bg {
transform: scale(1.05);
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(56,33,30,0.2), transparent, var(--color-bg-light));
z-index: 1;
}
.hero-content {
position: relative;
z-index: 10;
max-width: 768px;
width: 100%;
background-color: rgba(229, 222, 202, 0.3);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-2xl);
padding: 2rem;
text-align: center;
box-shadow: 0 10px 40px -10px rgba(183, 130, 95, 0.15); }
.hero-title {
font-size: 3rem;
margin-bottom: 1rem;
color: #38211E;
}
.hero-subtitle {
font-size: 1.125rem;
max-width: 450px;
margin: 0 auto 1.5rem;
}
.btn-group {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
@media (min-width: 640px) {
.btn-group { flex-direction: row; }
.hero-title { font-size: 4.5rem; }
} .btn {
padding: 1rem 2rem;
border-radius: var(--radius-xl);
font-weight: 700;
letter-spacing: 0.025em;
transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.btn:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
}
.btn-secondary {
background-color: var(--color-off-white);
color: var(--color-text-main);
}
.btn-secondary:hover {
background-color: var(--color-white);
} .section-philosophy {
padding: 6rem 1.5rem;
text-align: center;
}
.philosophy-content {
max-width: 768px;
margin: 0 auto;
}
.section-label {
color: var(--color-primary);
font-size: 1.25rem;
font-family: var(--font-accent);
display: block;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.25rem;
margin-bottom: 1.5rem;
} .section-process {
padding: 5rem 0;
background-color: rgba(255, 255, 255, 0.5);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4rem;
position: relative;
}
.process-line {
display: none;
position: absolute;
top: 24px;
left: 40px;
right: 40px;
height: 2px;
background-color: rgba(56, 33, 30, 0.1);
z-index: 0;
}
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
position: relative;
z-index: 1;
}
.icon-circle {
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: var(--color-white);
border: 1px solid rgba(183, 130, 95, 0.3);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.process-step:hover .icon-circle {
transform: scale(1.1);
}
.icon-circle.filled {
background-color: var(--color-primary);
color: var(--color-white);
border: none;
}
@media (min-width: 768px) { .process-grid { grid-template-columns: repeat(5, 1fr); } 
.process-line { display: block; }
} .section-classics {
padding: 6rem 1.5rem;
max-width: var(--container-width);
margin: 0 auto;
}
.classics-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
}
.products-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.product-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.product-image-wrapper {
position: relative;
aspect-ratio: 4 / 5;
background-color: #F0ECE3;
border-radius: var(--radius-2xl);
overflow: hidden;
cursor: pointer;
}
.product-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s ease;
}
.product-image-wrapper:hover .product-bg {
transform: scale(1.05);
}
.product-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.05);
opacity: 0;
transition: opacity 0.3s;
display: flex;
align-items: flex-end;
padding: 1.5rem;
}
.product-image-wrapper:hover .product-overlay {
opacity: 1;
}
.btn-customise {
width: 100%;
background: var(--color-white);
color: var(--color-text-main);
padding: 0.75rem;
border-radius: var(--radius-xl);
font-weight: 700;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
transform: translateY(1rem);
transition: transform 0.3s;
}
.product-image-wrapper:hover .btn-customise {
transform: translateY(0);
}
.badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(4px);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-primary);
z-index: 10;
}
.product-meta h3 {
font-size: 1.25rem;
}
@media (min-width: 768px) {
.products-grid { grid-template-columns: repeat(3, 1fr); }
} .section-impact {
padding: 3rem 0;
}
.impact-container {
display: flex;
flex-direction: column;
min-height: 600px;
}
.impact-image {
width: 100%;
min-height: 400px;
position: relative;
}
.impact-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.impact-text {
width: 100%;
background-color: var(--color-bg-dark);
color: var(--color-bg-light);
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.impact-text h2 {
color: var(--color-bg-light);
font-size: 2.5rem;
margin-bottom: 2rem;
}
.impact-text p {
opacity: 0.9;
margin-bottom: 1.5rem;
}
.btn-outline {
border: 1px solid var(--color-bg-light);
color: var(--color-bg-light);
padding: 0.75rem 2rem;
border-radius: var(--radius-xl);
align-self: flex-start;
transition: all 0.3s;
}
.btn-outline:hover {
background: var(--color-bg-light);
color: var(--color-bg-dark);
}
@media (min-width: 768px) {
.impact-container { flex-direction: row; }
.impact-image, .impact-text { width: 50%; }
.impact-text { padding: 6rem; }
.impact-text h2 { font-size: 3rem; }
} .section-studio {
padding: 6rem 1.5rem;
text-align: center;
max-width: 64rem;
margin: 0 auto;
}
.icons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 3rem;
}
.icon-item {
aspect-ratio: 1;
background: var(--color-white);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-main);
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: all 0.3s;
}
.icon-item:hover {
color: var(--color-primary);
transform: translateY(-4px);
}
@media (min-width: 640px) { .icons-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 768px) { .icons-grid { grid-template-columns: repeat(8, 1fr); } } .site-footer {
background-color: #EBE5D5;
padding: 8rem 1.5rem 4rem;
border-top: 1px solid var(--color-border);
}
.footer-inner {
max-width: var(--container-width);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-hero {
text-align: center;
margin-bottom: 3rem;
}
.footer-hero h2 {
color: var(--color-primary);
font-family: var(--font-accent);
font-size: 2rem;
margin-bottom: 1rem;
}
.footer-links-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
width: 100%;
max-width: 56rem;
margin-bottom: 4rem;
text-align: center;
}
.footer-col h4 {
margin-bottom: 1rem;
} .footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-col li {
margin-bottom: 0.5rem;
}
.footer-col a {
display: block;
opacity: 0.7;
margin-bottom: 0.5rem; font-size: 0.875rem;
}
.footer-col a:hover {
color: var(--color-primary);
opacity: 1;
}
.footer-social {
display: flex;
justify-content: center;
gap: 1rem;
}
.footer-bottom {
width: 100%;
border-top: 1px solid rgba(56, 33, 30, 0.1);
padding-top: 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.75rem;
opacity: 0.5;
gap: 1rem;
}
@media (min-width: 768px) {
.footer-links-grid { grid-template-columns: repeat(4, 1fr); text-align: left; }
.footer-hero h2 { font-size: 3rem; }
.footer-social { justify-content: flex-start; }
.footer-bottom { flex-direction: row; justify-content: space-between; }
}.product-page-container {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem;
padding-top: calc(var(--header-height) + 2rem);
}
.product-grid-layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
@media (min-width: 992px) {
.product-grid-layout {
grid-template-columns: 7fr 5fr;
gap: 4rem;
}
} .product-gallery-col { display: flex; flex-direction: column; gap: 1.5rem; }
.main-image-wrapper { 
width: 100%; 
aspect-ratio: 4 / 5; 
background-color: #f0edea; 
border-radius: 1rem; 
overflow: hidden; 
position: relative; 
}
.main-image { 
width: 100%; 
height: 100%; 
background-size: cover; 
background-position: center; 
transition: transform 0.5s ease; 
}
.main-image-wrapper:hover .main-image { transform: scale(1.05); } .zoom-hint { 
position: absolute; 
bottom: 1.5rem; 
right: 1.5rem; 
background: rgba(255, 255, 255, 0.8); 
backdrop-filter: blur(4px); 
padding: 0.375rem 0.75rem; 
border-radius: 999px; 
font-size: 0.75rem; 
font-weight: 600; 
color: var(--color-text-main); 
display: flex; 
align-items: center; 
gap: 0.25rem; 
opacity: 0; 
transition: opacity 0.3s; 
pointer-events: none;
}
.main-image-wrapper:hover .zoom-hint { opacity: 1; } .gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.7);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
color: var(--color-text-main);
}
.main-image-wrapper:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.1); color: var(--color-primary); }
.prev-btn { left: 10px; }
.next-btn { right: 10px; } .thumbnails-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.thumb-btn { aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; border: 1px solid transparent; padding: 0; cursor: pointer; transition: all 0.2s; }
.thumb-btn.active { border: 2px solid var(--color-primary); }
.thumb-img { width: 100%; height: 100%; background-size: cover; background-position: center; } .product-details-col { position: relative; }
.sticky-wrapper { position: sticky; top: calc(var(--header-height) + 2rem); }
.product-header { margin-bottom: 1.5rem; position: relative; }
.crafted-badge { 
position: absolute; 
top: -1.5rem; 
right: 0; 
transform: rotate(12deg); 
background: rgba(255, 255, 255, 0.6); 
backdrop-filter: blur(4px); 
border: 1px solid rgba(255, 255, 255, 0.8); 
padding: 0.25rem 0.75rem; 
border-radius: 999px; 
z-index: 10; 
}
.product-title { font-size: 2rem; line-height: 1.2; margin-bottom: 0.75rem; color: var(--color-text-main); }
.product-price { font-size: 1.5rem; font-weight: 500; color: var(--color-text-main); }
.product-description { font-size: 0.875rem; opacity: 0.8; margin-bottom: 2rem; line-height: 1.6; } .customise-panel {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 2rem;
width: 100%;
}
.panel-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 1.5rem; }
.custom-field-group { margin-bottom: 1.5rem; }
.custom-label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-text-main); } .icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.icon-option input { display: none; }
.icon-box { aspect-ratio: 1; border-radius: 0.5rem; border: 1px solid rgba(56, 33, 30, 0.1); background: #fff; display: flex; align-items: center; justify-content: center; color: rgba(56, 33, 30, 0.6); cursor: pointer; transition: all 0.2s; }
.icon-option input:checked + .icon-box { border: 2px solid var(--color-primary); color: var(--color-primary); background: rgba(183, 130, 95, 0.05); }
.icon-box:hover { color: var(--color-primary); } .input-wrapper { position: relative; }
.custom-input { width: 100%; background: #fff; border: 1px solid rgba(56, 33, 30, 0.1); border-radius: 0.5rem; padding: 0.75rem 1rem; font-family: var(--font-body); color: var(--color-text-main); }
.custom-input:focus { outline: none; border-color: var(--color-primary); }
.char-count { position: absolute; right: 0.75rem; top: 0.75rem; font-size: 0.75rem; opacity: 0.4; } .color-picker-wrapper { display: flex; align-items: center; gap: 1rem; }
.custom-color-input { -webkit-appearance: none; border: none; width: 3rem; height: 3rem; cursor: pointer; padding: 0; background: none; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.custom-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color-input::-webkit-color-swatch { border: 2px solid #fff; border-radius: 50%; }
.color-code-hint { font-size: 0.75rem; opacity: 0.7; } .variations { width: 100%; border-spacing: 0; border-collapse: collapse; }
.variations tbody tr { display: flex; flex-direction: column; align-items: flex-start; } .variations td { padding: 0 0 1rem 0 !important; display: block; border: none !important; }
.variations label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text-main); }
.variations select { width: 100%; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(56, 33, 30, 0.2); background-color: #fff; }
.reset_variations { display: none !important; } .woocommerce-variation-add-to-cart,
form.cart:not(.variations_form) {
display: flex !important;
flex-wrap: wrap;
flex-direction: column !important;
gap: 1rem !important;
align-items: flex-start !important;
margin-top: 1rem;
} .woocommerce div.quantity.pip-qty-box {
display: flex; align-items: center; justify-content:space-between; width: auto; min-width: 6rem; height: 2.5rem; flex-shrink: 0; background: #fff; border-radius: 0.5rem; border: 1px solid rgba(56, 33, 30, 0.2); padding: 0; overflow: visible; margin-top: 1.5rem !important; align-self: flex-start; position: relative;
}
.woocommerce div.quantity.pip-qty-box::before { position: absolute; top: -1.5rem; left: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text-main); line-height: 1; }
.pip-qty-btn { width: 2rem; height: 100%; background: transparent; border: none; color: var(--color-text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pip-qty-btn.minus { border-radius: 0.5rem 0 0 0.5rem; }
.pip-qty-btn.plus { border-radius: 0 0.5rem 0.5rem 0; }
.pip-qty-btn:hover { background-color: rgba(56, 33, 30, 0.05); color: var(--color-primary); }
.woocommerce div.quantity.pip-qty-box input.qty { width: 2rem; height: 100%; padding: 0; text-align: center; background: transparent; border: none !important; font-weight: 700; font-size: 0.875rem; color: var(--color-text-main); -moz-appearance: textfield; }
.woocommerce div.quantity input.qty::-webkit-outer-spin-button, .woocommerce div.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .single_add_to_cart_button {
width: 100% !important; background-color: #38211E !important; color: #e4ddce !important; font-weight: 700 !important; padding: 1rem 2rem !important; border-radius: 0.75rem !important; border: none !important; display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; transition: background 0.3s; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: pointer; height: auto; min-height: 3.5rem; margin-top: 0.5rem !important;
}
.single_add_to_cart_button:hover { background-color: var(--color-primary) !important; }
.btn-icon-bag { font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 24px; line-height: 1; display: inline-block; white-space: nowrap; direction: ltr; } .woocommerce-notices-wrapper { margin-bottom: 2rem; width: 100%; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { background-color: #fff !important; border-top: 3px solid var(--color-primary) !important; color: var(--color-text-main) !important; padding: 1.5rem 2rem !important; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); margin-bottom: 1.5rem !important; display: flex; align-items: center; gap: 1rem; }
.woocommerce-error { border-top-color: #dc2626 !important; }
.woocommerce-message .button { float: right; background: transparent !important; color: var(--color-primary) !important; font-weight: 700; text-decoration: underline; border: none !important; padding: 0 !important; margin-left: 1rem; } .product-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 3rem 0; margin-top: 3rem; border-top: 1px solid rgba(56, 33, 30, 0.05); border-bottom: 1px solid rgba(56, 33, 30, 0.05); background: rgba(255, 255, 255, 0.3); }
@media (min-width: 768px) { .product-features { grid-template-columns: repeat(4, 1fr); } }
.feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; }
.feature-icon { padding: 0.75rem; background: var(--color-bg-light); border-radius: 50%; color: var(--color-primary); display: flex; }
.feature-item h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.feature-item p { font-size: 0.75rem; opacity: 0.7; max-width: 150px; } .product-long-description--single {
margin-top: 5rem;
padding: 4.5rem 3rem;
background: linear-gradient(180deg, #f6f3ec 0%, #f9f7f2 100%);
border-radius: 1.5rem;
box-shadow: 0 12px 30px rgba(56,33,30,0.08);
position: relative;
animation: fadeUp 0.6s ease both;
} .product-long-description--single .section-title {
font-size: 2.2rem;
margin-bottom: 2.5rem;
font-family: var(--font-display);
color: var(--color-primary);
text-align: center;
position: relative;
} .product-long-description--single .section-title::after {
content: '';
display: block;
width: 70px;
height: 3px;
background-color: var(--color-primary);
margin: 1rem auto 0;
border-radius: 3px;
opacity: 0.8;
}
.product-long-description--single .description-inner {
max-width: 820px;
margin: 0 auto;
}
.product-long-description--single .description-text {
font-size: 1.05rem;
line-height: 1.95;
color: var(--color-text-main);
opacity: 0.95;
}
.product-long-description--single .description-text p {
margin-bottom: 1.8rem;
} .product-long-description--single .description-text ul {
padding-left: 1.2rem;
margin: 2rem 0;
}
.product-long-description--single .description-text li {
margin-bottom: 0.6rem;
} @keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .product-long-description h3::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--color-primary);
margin: 1rem auto 0;
border-radius: 2px;
}
.description-content {
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1.8;
color: var(--color-text-main);
opacity: 0.9;
}
.description-content p {
margin-bottom: 1.5rem;
}  .pip-shop-header {
background-color: #E5DECA; padding: 6rem 1.5rem 4rem;
text-align: center;
margin-bottom: 4rem;
border-bottom: 1px solid rgba(56,33,30,0.05);
}
.pip-shop-subtitle {
font-family: 'Courier Prime', monospace;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.85rem;
color: #B7825F;
display: block;
margin-bottom: 1rem;
font-weight: 700;
}
.pip-shop-title {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
color: #38211E;
margin-bottom: 1.5rem;
font-weight: 700;
line-height: 1.1;
}
.pip-shop-desc {
font-family: 'Libre Baskerville', serif;
font-size: 1.1rem;
line-height: 1.8;
color: #38211E;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
} .shop-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem 6rem;
}  .woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
content: none !important;
width: 0 !important;
} .woocommerce ul.products {
display: grid !important;
grid-template-columns: 1fr; gap: 2rem;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
@media (min-width: 640px) {
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
} .woocommerce ul.products li.product {
display: flex;
flex-direction: column;
width: auto !important; margin: 0 !important;
position: relative;
background: transparent;
float: none !important;
clear: none !important; } .woocommerce ul.products li.product a {
text-decoration: none;
color: inherit;
display: block;
} .woocommerce ul.products li.product a img {
width: 100%;
aspect-ratio: 3/4; object-fit: contain; border-radius: 1rem;
background-color: transparent; transition: transform 0.6s ease;
margin-bottom: 1rem !important;
display: block;
box-shadow: 0 4px 10px rgba(56,33,30,0.05);
}
.woocommerce ul.products li.product:hover a img {
transform: scale(1.02);
box-shadow: 0 10px 20px rgba(56,33,30,0.1);
} .woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: 'Fraunces', serif;
font-size: 1.1rem; color: #38211E;
margin: 0 0 0.25rem;
font-weight: 700;
padding: 0;
line-height: 1.3;
} .woocommerce ul.products li.product .price {
font-family: 'Libre Baskerville', serif;
font-size: 0.95rem;
color: #38211E;
font-weight: 400;
display: block;
margin-bottom: 1rem;
opacity: 0.9;
}
.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 0.5rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 700; } .woocommerce ul.products li.product .button {
display: inline-block;
width: 100%;
text-align: center;
background-color: #fff;
border: 1px solid #38211E;
color: #38211E;
border-radius: 0.75rem;
padding: 0.7rem;
font-family: 'Fraunces', serif;
font-weight: 700;
font-size: 0.85rem;
transition: all 0.3s ease;
margin-top: auto; text-decoration: none;
}
.woocommerce ul.products li.product .button:hover {
background-color: #38211E;
color: #E5DECA;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(56,33,30,0.1);
}
.woocommerce ul.products li.product .button.loading { opacity: 0.7; }
.woocommerce ul.products li.product .button.added { background-color: #E5DECA; color: #38211E; border-color: #E5DECA; } .woocommerce-pagination { margin-top: 5rem; text-align: center; }
.woocommerce-pagination ul { display: inline-flex; gap: 0.5rem; border: none !important; }
.woocommerce-pagination ul li { border: none !important; overflow: visible; float: none; display: inline-block; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span {
display: flex; align-items: center; justify-content: center;
width: 3rem; height: 3rem;
border-radius: 50%;
background: transparent;
border: 1px solid rgba(56,33,30,0.1);
color: #38211E;
font-family: 'Libre Baskerville', serif;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
font-size: 1rem;
padding: 0;
}
.woocommerce-pagination ul li a:hover, .woocommerce-pagination ul li span.current {
background-color: #38211E;
color: #E5DECA;
border-color: #38211E;
} .woocommerce-result-count { display: none; }
.woocommerce-ordering { margin-bottom: 2rem; float: right; }
.woocommerce-ordering select {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid rgba(56,33,30,0.2);
background: #fff;
color: #38211E;
font-family: 'Libre Baskerville', serif;
}