) para não afetar o , que o WordPress também marca com a classe "page". */ main.page { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); } /* ── Hero (com estilo próprio nesta página, como em Envios) ── */ .hero { position: relative; z-index: 1; padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); margin-bottom: 0; border-bottom: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; height: 100%; } .hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .hero-eyebrow-line { width: 36px; height: 1px; background: var(--ink-soft); } .hero-eyebrow span { font-family: var(--font-body); font-size: 10.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } /* ── Filter bar ── */ .filter-bar { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: 3rem; margin-bottom: calc(var(--gap) * 2); } .filter-label { font-family: var(--font-body); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: black; margin-right: .4rem; } .filter-btn { font-family: var(--font-display); font-size: .95rem; font-weight: 400; font-style: italic; padding: .3rem .9rem; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: black; cursor: pointer; transition: all .25s ease; } .filter-btn:hover { border-color: #f180b4; color: #44c2cc; } .filter-btn.active { background: pink; color: var(--bg); border: 3px dashed #f180b4; font-style: normal; font-family: var(--font-body); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } /* ── Product grid ── */ .shop-scroll-wrap { height: 600px; overflow-y: auto; padding-right: .5rem; scrollbar-width: thick; scrollbar-color: #f180b4 transparent; } .shop-scroll-wrap::-webkit-scrollbar { width: 18px; } .shop-scroll-wrap::-webkit-scrollbar-track { background: transparent; } .shop-scroll-wrap::-webkit-scrollbar-thumb { background: #f180b4; border-radius: 100px; } .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: start; } @media (max-width: 980px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr; } } /* ── Product card ── */ .product-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); gap: .75rem; overflow: hidden; display: flex; flex-direction: column; align-self: start; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .25s ease; opacity: 0; transform: translateY(20px); animation: fadeUp .55s cubic-bezier(.22,1,.36,1) forwards; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(80,50,30,.1); border-color: var(--border-mid); } .product-card:nth-child(1) { animation-delay: .06s; } .product-card:nth-child(2) { animation-delay: .12s; } .product-card:nth-child(3) { animation-delay: .18s; } .product-card:nth-child(4) { animation-delay: .24s; } .product-card:nth-child(5) { animation-delay: .30s; } .product-card:nth-child(6) { animation-delay: .36s; } .product-card.hidden { display: none; } /* ── Product image ── */ .product-img { width: 100%; height: auto; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: transform .6s cubic-bezier(.22,1,.36,1); } .product-card:hover .product-img img { transform: scale(1.05); } .product-img img { width: 100%; height: auto; max-height: 450px; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); } /* ── Product body ── */ .product-body { padding: 0 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; } .product-info { align-items: center; padding: 10px 10px 10px 10px; } .product-name { font-family: 'Caracolina', serif; font-size: 30px; font-weight: 400; color: black; line-height: 1.2; padding: 0px 20px 0px 0px; } /* ── Product footer ── */ .product-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .product-price { font-family: 'Caracolina', serif; font-size: 25px; color: black; letter-spacing: .02em; padding: 0px 0px 0px 10px; } .product-btns { display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; } .btn-detalhes { font-family: var(--font-body); font-size: .6rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color .2s; } .btn-detalhes:hover { color: var(--c-clay); } .btn-cart { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .14rem; text-transform: uppercase; background: none; color: black; padding: .5rem 1rem .5rem .5rem; border-radius: 100px; cursor: pointer; transition: background .2s ease, transform .2s ease; white-space: nowrap; border-style: dashed; border-color: #F180B4; } .btn-cart:hover { background: pink; transform: scale(1.04); } .btn-cart img { width: 20px; height: 20px; object-fit: contain; } /* ── ajuste específico desta página ao CTA partilhado ── */ .cta-section { margin-top: 5rem; }