/* Shop Page Styles */
.bg-beige {
background: #F6F4ED;
}
.shop-page {
padding: 60px 0;
}
.shop-hero {
position: relative;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
}
.shop-navigation {
position: sticky;
top: 10px;
z-index: 999;
transition: .25s;
background: #fff;
}
.shop-hero-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 40px;
border-radius: 8px;
}
.shop-hero-container {
padding: 0 40px;
}
.shop-hero-container p {
margin: 0;
}
.shop-hero-title {
color: var(--Soft-Black, #2E2C2B);
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: 46px;
margin-bottom: 45px;
}
.shop-hero-text {
font-family: "lora-regular";
line-height: 1.8;
font-size: 19px;
}
.shop-title {
font-size: 3rem;
text-align: center;
margin-bottom: 2rem;
font-family: 'Canela Light', serif;
}
.shop-text {
font-size: 1.25rem;
text-align: center;
max-width: 600px;
margin: 0 auto 3rem;
color: #666;
}
/* Shop Grid */
.shop-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
margin-bottom: 3rem;
grid-auto-rows: min-content;
grid-auto-flow: dense;
}
/* Dimension-based grid spans */
.dimensions-1-1 {
grid-column: span 1;
grid-row: span 1;
}
.dimensions-2-1 {
grid-column: span 2;
grid-row: span 1;
}
.dimensions-2-2 {
grid-column: span 2;
grid-row: span 2;
}
.dimensions-4-1 {
grid-column: span 4;
grid-row: span 1;
}
.dimensions-1-2 {
grid-column: span 1;
grid-row: span 2;
}
.shop-item-image-container {
width: 100%;
overflow: hidden;
background: #F6F4ED;
aspect-ratio: 312 / 427;
margin-bottom: 17px;
}
/* Icon badge inside image container */
.shop-item-image-container .shop-item-badge {
position: absolute;
right: 14px;
bottom: 14px;
width: 58px;
height: 58px;
pointer-events: none;
}
/* Hover image behavior */
.shop-item-image-container .shop-item-image {
transition: opacity 200ms ease;
display: block;
}
.shop-item-image-container .shop-item-image.shop-item-image--hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
align-self: center;
justify-self: center;
}
.shop-item-image-container.has-hover:hover .shop-item-image.shop-item-image--hover {
opacity: 1;
}
.shop-item-image-container.has-hover:hover .shop-item-image:not(.shop-item-image--hover) {
opacity: 0;
}
/* PNG mode: center the image at its intrinsic size */
.shop-item-image-container.is-png {
display: flex;
align-items: center;
justify-content: center;
}
/* Aspect ratios per dimension (responsive) */
.dimensions-1-1 .shop-item-image-container {
aspect-ratio: 310 / 427;
/* ~0.726 */
}
.dimensions-2-1 .shop-item-image-container {
aspect-ratio: 643 / 427;
/* 2x1: displayed 643x427 */
}
.dimensions-4-1 .shop-item-image-container {
aspect-ratio: 2614 / 854;
/* 4x1: displayed 2614x854 */
}
.dimensions-2-2 .shop-item-image-container {
aspect-ratio: 646 / 942;
}
.dimensions-1-2 .shop-item-image-container {
aspect-ratio: 310 / 942;
}
.shop-item-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* For PNG images, display at natural/intrinsic size */
.shop-item-image--png {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.shop-item-price {
color: #888;
font-size: 0.9rem;
font-weight: 500;
}
.shop-item-link {
text-decoration: none;
color: inherit;
}
.shop-item-link:hover {
text-decoration: none;
color: inherit;
}
/* Pagination */
.shop-pagination {
display: none;
}
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.pagination .page-item {
margin: 0 0.25rem;
}
.pagination .page-link {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
color: #666;
border: 1px solid #dee2e6;
border-radius: 4px;
transition: all 0.3s ease;
}
.pagination .page-link:hover {
background: #f8f9fa;
color: #333;
}
.pagination .page-item.active .page-link {
background: #333;
color: white;
border-color: #333;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.shop-hero-title {
font-size: 2rem;
}
.shop-hero-text {
font-size: 1rem;
}
.shop-title {
font-size: 2rem;
}
.shop-text {
font-size: 1rem;
margin-bottom: 2rem;
}
.shop-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
padding: 0 25px;
}
/* Mobile dimension adjustments */
.dimensions-1-1 {
grid-column: span 1;
grid-row: span 1;
}
.dimensions-2-1 {
grid-column: span 2;
grid-row: span 1;
}
.dimensions-2-2 {
grid-column: span 2;
grid-row: span 2;
}
.dimensions-4-1 {
grid-column: span 2;
grid-row: span 1;
}
.dimensions-1-2 {
grid-column: span 1;
grid-row: span 2;
}
/* Aspect ratios already make images responsive; no fixed heights needed */
.shop-item-content {
padding: 1rem;
}
.shop-item-title {
font-size: 1rem;
}
.dimensions-2-1 .shop-item-title,
.dimensions-4-1 .shop-item-title {
font-size: 1.125rem;
}
.dimensions-2-2 .shop-item-title,
.dimensions-1-2 .shop-item-title {
font-size: 1.25rem;
}
.shop-item-image-container .shop-item-badge {
position: absolute;
right: 10px;
bottom: 10px;
width: 40px;
height: 40px;
pointer-events: none;
}
.shop-navigation {
position: relative;
}
}
@media (max-width: 480px) {
.shop-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
/* Small mobile dimension adjustments */
.dimensions-1-1 {
grid-column: span 1;
grid-row: span 1;
}
.dimensions-2-1 {
grid-column: span 2;
grid-row: span 1;
}
.dimensions-2-2 {
grid-column: span 2;
grid-row: span 2;
}
.dimensions-4-1 {
grid-column: span 2;
grid-row: span 1;
}
.dimensions-1-2 {
grid-column: span 1;
grid-row: span 2;
}
/* Aspect ratios already make images responsive; no fixed heights needed */
.shop-item-content {
padding: 0.75rem;
}
}
/* Loading State */
.shop-loading {
text-align: center;
padding: 3rem;
color: #666;
}
/* Empty State */
.shop-empty {
text-align: center;
padding: 3rem;
color: #666;
}
.shop-empty h3 {
margin-bottom: 1rem;
color: #333;
}
/* Shop Navigation */
.shop-navigation {
padding: 40px 0;
}
.shop-nav-container {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 48px;
}
.shop-nav-links {
display: flex;
gap: 48px;
align-items: baseline;
}
.shop-nav-item {
position: relative;
}
.shop-nav-item.has-children > .shop-nav-link,
.shop-nav-item.has-no-children > .shop-nav-link {
font-family: "Romie Pro";
font-size: 22px;
font-weight: 400;
line-height: 34px;
text-transform: none;
}
.shop-nav-link {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
white-space: nowrap;
}
.shop-nav-link:hover {
color: var(--Soft-Black, #2E2C2B);
text-decoration: none;
}
.shop-nav-link.active {
color: var(--Soft-Black, #2E2C2B);
font-weight: 600;
}
.shop-nav-chevron {
width: 8px;
height: 6px;
transition: transform 0.2s ease;
flex-shrink: 0;
position: relative;
top: -2px;
}
.shop-nav-item.has-children:hover .shop-nav-chevron {
transform: rotate(180deg);
}
.shop-nav-link.parent-of-active {
color: var(--Soft-Black, #2E2C2B);
font-weight: 600;
}
/* Desktop subcategory dropdown */
.shop-nav-subcats {
position: absolute;
top: 0;
left: 0;
min-width: 180px;
background: #fff;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
border: 1px solid #eee;
margin-top: 8px;
}
.shop-nav-subcats::before {
content: '';
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
}
.shop-nav-item.has-children:hover .shop-nav-subcats {
opacity: 1;
visibility: visible;
}
.shop-nav-sublink {
font-size: 13px !important;
text-transform: uppercase;
white-space: nowrap;
}
.shop-nav-sublink.active {
font-weight: 600;
}
.shop-item-title {
color: var(--Soft-Black, #2E2C2B);
font-family: Outfit;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
}
.shop-item-excerpt {
color: var(--Soft-Black, #2E2C2B);
font-family: Outfit;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* Mobile responsive navigation */
@media (max-width: 768px) {
.page-template-page-shop .shop-navigation {
margin-bottom: 30px;
}
.shop-navigation {
padding: 0;
}
.shop-nav-desktop {
display: none;
}
.shop-nav-container {
position: relative;
}
.shop-nav-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
}
.shop-nav-dropdown-content {
position: static;
background: transparent;
padding: 0;
box-shadow: none;
}
.shop-nav-dropdown-arrow { display: none; }
.shop-nav-links-mobile {
display: flex;
flex-direction: row;
gap: 13px;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.shop-nav-item-mobile {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.shop-nav-item-mobile > .shop-nav-link {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-family: "Romie Pro";
font-size: 20px;
font-weight: 400;
line-height: 1.3;
text-transform: none;
cursor: pointer;
}
.shop-nav-item-mobile .shop-nav-chevron {
width: 8px;
height: 6px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.shop-nav-parent-mobile.active .shop-nav-chevron,
.shop-nav-parent-mobile.parent-of-active .shop-nav-chevron {
transform: rotate(180deg);
}
.shop-nav-container {
justify-content: center;
}
.shop-nav-subcats-mobile {
display: none;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 0 10px 15px 10px;
width: 100%;
text-align: center;
}
.shop-nav-subcats-mobile .shop-nav-sublink {
font-size: 12px !important;
}
.shop-nav-link {
font-size: 14px;
padding: 7px 0;
}
.shop-nav-container {
gap: 20px;
}
.shop-item-image-container {
margin-bottom: 0;
}
}
.ehd-shop-menu {
z-index: 0 !important;
}
.shop-navigation .shop-nav-chevron {
display: none !important;
}
.ehd-shop-menu summary {
list-style: none;
}
.ehd-shop-menu summary::-webkit-details-marker {
display: none;
}
/* Desktop styles - hide mobile elements and show desktop layout */
@media (min-width: 769px) {
.shop-nav-mobile-header {
display: none;
}
.shop-nav-dropdown {
display: none;
}
.shop-nav-desktop {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.shop-nav-links {
display: flex;
gap: 48px;
align-items: baseline;
}
.shop-nav-item {
position: relative;
padding-bottom: 8px;
}
.shop-nav-item.has-children > .shop-nav-link {
font-family: "Romie Pro";
font-size: 22px;
font-weight: 400;
line-height: 34px;
text-transform: none;
}
.shop-nav-link {
font-family: Outfit;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
white-space: nowrap;
padding: 0;
border-bottom: none;
}
.shop-nav-link:hover {
color: var(--Soft-Black, #2E2C2B);
text-decoration: none;
}
.shop-nav-link.active {
color: var(--Soft-Black, #2E2C2B);
font-weight: 600;
}
.shop-nav-link.parent-of-active {
color: var(--Soft-Black, #2E2C2B);
font-weight: 600;
}
.shop-nav-subcats {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: #fff;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
border: 1px solid #eee;
}
.shop-nav-subcats::before {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
}
.shop-nav-item.has-children:hover .shop-nav-subcats {
opacity: 1;
visibility: visible;
}
.shop-nav-mobile-expand {
display: none;
}
}
/* Category Filter (if added later) */
.shop-filters {
display: flex;
justify-content: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.shop-filter-btn {
padding: 0.5rem 1rem;
border: 1px solid #ddd;
background: white;
color: #666;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.shop-filter-btn:hover,
.shop-filter-btn.active {
background: #333;
color: white;
border-color: #333;
text-decoration: none;
}