#fw-section-custom-html-1d12b8bd-3ac6-4033-9ed2-ab1a01fa66b9 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-8b7bc49c-d30c-4654-92f9-305495d86833 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-308421d3-4fc9-43c0-9e4e-8547aaf1080a {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-8e6909f4-0e33-48c7-9555-d28e5865736f {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-0496453c-6029-465a-944d-6101cce4d6c0 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-ac3031a0-9351-4f16-ad80-a04bd97ede1f {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-d7fceedf-bafa-44ec-94f6-f833a6d81dba {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-d6199621-0bb7-4dda-9cea-896ed16e4ead {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-aeeb93c6-c7c6-46d0-90e6-4eaf24043c71 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-34617f3d-a461-4bfa-8271-0ebb25d667a2 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-cb140202-5377-4cbd-9025-af5407890fb2 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-f3069409-e5b3-419e-923e-7197241df43f {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-b20feff1-c642-4019-974c-329e5e04a2dc {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-619934cd-afc3-4e49-9513-ca5e417c968d {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-6ee8e7b4-45fa-4888-9eb4-71f0dbd2ff50 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-ff75d782-035c-4287-8c4c-e173282477ea {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-33bf6179-f1d2-4416-a399-09e0cc95bf26 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-aed3a350-36b8-448b-891d-f6a7f8252cb3 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-35af0a72-ff43-4fd7-8ec1-f51f65315fd8 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-6fcf90fa-a27a-4fbd-a7a7-917d6c808808 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-db14dd18-35f3-4145-92e1-84f3f46f538a {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-1fc59131-27dc-4402-8dbc-2e34deb38305 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-731b8c03-12ae-4dfd-abdd-1ba3ae1b4238 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-f97cd557-5d80-4269-a6c9-ac58c52b480a {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-2338f43d-3152-4fe9-ae75-0c9ef53743fe {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-f822ffdd-30f9-4fc5-8584-7d77e9473da2 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-featured-collection-12b4c64d-d0be-4421-b42e-97ea4cdca59f {
/* ============================================================
THAT IS INTERESTING — Shop Page Stylesheet v3
Overrides Fourthwall's CSS custom properties at :root
so our values win over theme.scss without !important wars
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=IM+Fell+English:ital@0;1&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/* ── OVERRIDE FOURTHWALL'S OWN CSS VARIABLES ─────────────── */
/* These are the variables Fourthwall's theme.scss uses.
Overriding here cascades into all their component styles. */
:root {
/* Page & product image background */
--color-background: #e8dfc8 !important;
--color-on-background: #2c2416 !important;
--color-product-image-background: #d4c9aa !important;
--color-product-image-background-rgb: 212, 201, 170 !important;
/* Primary button (Add to Cart) */
--color-primary: #1e2a38 !important;
--color-primary-rgb: 30, 42, 56 !important;
--color-on-primary: #e8dfc8 !important;
/* Links & accents */
--color-secondary: #2a7a7a !important;
--color-on-secondary: #e8dfc8 !important;
/* Body font */
--font-family-base: 'Libre Baskerville', Georgia, serif !important;
--font-family-heading: 'Playfair Display', Georgia, serif !important;
/* Border/surface */
--color-border: #c8b890 !important;
--color-surface: #f4efe2 !important;
--color-on-surface: #2c2416 !important;
}
/* ── PRODUCT TILE CARD ───────────────────────────────────── */
.product-tile {
background-color: #f4efe2 !important;
border: 1px solid #c8b890 !important;
border-top: 3px solid #1e2a38 !important;
border-radius: 0 !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
position: relative !important;
}
.product-tile:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(30, 42, 56, 0.18) !important;
}
.product-tile::after {
content: '✦' !important;
position: absolute !important;
bottom: 0.5rem !important;
right: 0.65rem !important;
font-size: 0.4rem !important;
color: #8a7a5a !important;
opacity: 0.5 !important;
pointer-events: none !important;
}
/* ── IMAGE AREA ──────────────────────────────────────────── */
.tile_image,
.tile_image .image {
background-color: #d4c9aa !important;
border-radius: 0 !important;
}
/* Force all product images to same square size */
.tile_image {
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 1.5rem !important;
box-sizing: border-box !important;
}
.image_object img,
.tile_image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
position: relative !important;
}
/* ── COLLECTION HEADER ───────────────────────────────────── */
.collection_header {
position: relative !important;
padding: 2rem 0 1.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Horizontal rule behind the header */
.collection_header::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 50% !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, #8a7a5a 15%, #8a7a5a 85%, transparent) !important;
z-index: 0 !important;
}
/* "Featured Products" label sits on top of the rule */
.collection_header h2,
.collection_header [class*="heading"],
.collection_header [class*="title"] {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 0.58rem !important;
font-weight: 600 !important;
letter-spacing: 0.3em !important;
text-transform: uppercase !important;
color: #2c2416 !important;
background: #e8dfc8 !important;
padding: 0 1rem !important;
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
}
/* "View all" link */
.collection_header a {
font-family: 'Libre Baskerville', Georgia, serif !important;
font-size: 0.55rem !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #2a7a7a !important;
border: 1px solid #2a7a7a !important;
padding: 0.35rem 0.85rem !important;
background: #e8dfc8 !important;
text-decoration: none !important;
position: relative !important;
z-index: 1 !important;
transition: all 0.2s !important;
}
.collection_header a:hover {
background: #1e2a38 !important;
color: #e8dfc8 !important;
border-color: #1e2a38 !important;
}
/* ── PRODUCT NAME & PRICE ────────────────────────────────── */
.tile_description {
padding: 0.9rem 1rem 0.5rem !important;
border-top: 1px solid #c8b890 !important;
background: #f4efe2 !important;
}
/* Target any text inside tile_description */
.tile_description * {
font-family: 'Libre Baskerville', Georgia, serif !important;
color: #2c2416 !important;
}
/* First text element = product name */
.tile_description [class*="name"],
.tile_description [class*="title"],
.tile_description > p:first-child,
.tile_description > div:first-child,
.tile_description > a:first-child {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #2c2416 !important;
margin-bottom: 0.25rem !important;
}
/* Price */
.tile_description [class*="price"],
.tile_description [class*="cost"],
.tile_description [class*="amount"] {
font-size: 0.8rem !important;
color: #2a7a7a !important;
font-style: italic !important;
}
/* ── ADD TO CART BUTTON ──────────────────────────────────── */
.tile_options {
padding: 0 1rem 1rem !important;
background: #f4efe2 !important;
}
.tile_options button,
.tile_options [class*="btn"],
.tile_options [class*="button"],
.tile_options [class*="add-to-cart"] {
font-family: 'Libre Baskerville', Georgia, serif !important;
font-size: 0.55rem !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
background-color: #1e2a38 !important;
color: #e8dfc8 !important;
border: 1px solid #1e2a38 !important;
border-radius: 0 !important;
padding: 0.6rem 1rem !important;
width: 100% !important;
cursor: pointer !important;
transition: background-color 0.2s !important;
}
.tile_options button:hover {
background-color: #2a7a7a !important;
border-color: #2a7a7a !important;
}
/* ── GRID SPACING ────────────────────────────────────────── */
.col-grid.col-grid--product-gap {
gap: 1.5rem !important;
background: transparent !important;
}
/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #e8dfc8; }
::-webkit-scrollbar-thumb { background: #8a7a5a; border-radius: 3px; }
}
#fw-section-custom-html-970e81a7-6315-4fac-af07-2447328e7cb6 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-custom-html-31ed5ace-7e37-4227-82a5-13e6568caadd {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}
#fw-section-footer {
* { display: none !important; }
}
#fw-section-header {
* { display: none !important; }
}
#fw-section-custom-html-bd83d815-6164-4811-8c4b-7d515d4f8fe3 {
/* Remove gaps between TII custom HTML blocks */
[class*="CustomHTML"],
[class*="custom-html"],
[class*="customHtml"],
[class*="custom_html"] {
margin: 0 !important;
padding: 0 !important;
}
}