/* Homepage collection only; the existing full Shop and product modal are reused. */
#homepage-collection[hidden], #shop-listing[hidden], #homepage-products-status[hidden], #homepage-products-retry[hidden] { display: none; }
#collection > .container > .section-header { text-align: left; margin-bottom: 24px; }
#collection > .container > .section-header .section-title { font: 600 clamp(30px, 3.4vw, 44px)/1.2 var(--font-serif); letter-spacing: -.025em; margin-bottom: 8px; }
#collection > .container > .section-header .section-subtitle { max-width: none; margin: 0; font-size: 16px; line-height: 1.6; }
.homepage-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.homepage-product-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 9px; background: #fdf8f0; box-shadow: 0 3px 14px #49312608; cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; }
.homepage-product-card > img { width: 100%; aspect-ratio: 1.25; height: auto; object-fit: contain; background: #eddfcd; padding: 12px; }
.homepage-product-content { display: flex; flex: 1; flex-direction: column; padding: 14px; gap: 8px; }
.homepage-product-content h3 { font: 500 14px/1.5 var(--font-sans); margin: 0; color: var(--deco-brown); overflow-wrap: anywhere; }
.homepage-product-price { font-size: 13px; line-height: 1.5; color: var(--deco-brown); margin: 0 0 2px; }
.homepage-product-details { display: block; min-height: 40px; width: 100%; padding: 10px 12px; margin-top: auto; border: 0; border-radius: 999px; background: #edddc5; color: var(--deco-brown); font: 500 12px/1.4 var(--font-sans); }
.homepage-product-details::after { content: ''; position: absolute; inset: 0; border-radius: 9px; }
.homepage-product-details:focus-visible { outline: 2px solid var(--deco-brown); outline-offset: 3px; }
.homepage-product-card:focus-within { outline: 2px solid var(--deco-brown); outline-offset: 3px; }
.homepage-view-all { display: flex; justify-content: center; padding-top: 32px; }
#view-all-products { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 54px; padding: 14px 30px; border: 0; border-radius: 999px; background: var(--deco-brown); color: var(--deco-beige); font: 500 14px/1.5 var(--font-sans); }
#view-all-products:disabled { opacity: .55; cursor: not-allowed; }
#view-all-products:focus-visible { outline: 2px solid var(--deco-brown); outline-offset: 4px; }
#homepage-products-status { padding: 24px 0; line-height: 1.8; color: var(--deco-brown-muted); }
.shop-listing-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.shop-listing-heading h3 { font: 500 28px/1.3 var(--font-serif); }
@media (hover: hover) { .homepage-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #49312616; } .homepage-product-card:hover .homepage-product-details { background: #e5ceb0; } }
@media (max-width: 850px) { .homepage-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } }
@media (max-width: 480px) { #collection > .container { padding-inline: 16px; } #collection > .container > .section-header .section-subtitle { font-size: 13px; } .homepage-products { gap: 16px 12px; } .homepage-product-content { padding: 11px 10px; gap: 7px; } .homepage-product-content h3 { font-size: 12px; } .homepage-product-price { font-size: 12px; } .homepage-product-details { font-size: 11px; min-height: 44px; padding-inline: 8px; } .homepage-product-card > img { padding: 9px; } }
@media (max-width: 319px) { .homepage-products { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .homepage-product-card { transition: none; transform: none !important; } }