/* =====================================================
HOSANNA HAIR — SHOP ARCHIVE
===================================================== */
/* ---------- HERO BANNER (hh-shop-hero) ---------- */
.hh-shop-hero {
background-color: #EDE5D8 !important;
padding: 100px 80px !important;
}
@media (max-width: 1024px) {
.hh-shop-hero { padding: 80px 32px !important; }
}
/* Eyebrow line + label */
.hh-shop-eyebrow {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 16px !important;
}
.hh-shop-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 32px !important;
height: 1px !important;
background-color: #B8924A !important;
}
.hh-shop-eyebrow,
.hh-shop-eyebrow * {
font-family: 'Jost', sans-serif !important;
font-size: 9.6px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.3em !important;
color: #B8924A !important;
}
/* Hero heading */
.hh-shop-title,
.hh-shop-title * {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(48px, 5vw, 88px) !important;
font-weight: 300 !important;
line-height: 1.1 !important;
color: #2C2218 !important;
margin: 16px 0 !important;
}
/* Gold accent word inside heading — wrap in */
.hh-shop-title em {
font-style: normal !important;
color: #B8924A !important;
}
/* Hero paragraph */
.hh-shop-intro,
.hh-shop-intro * {
font-family: 'Jost', sans-serif !important;
font-size: 14.4px !important;
font-weight: 300 !important;
line-height: 1.7 !important;
color: #7A6A5A !important;
max-width: 560px !important;
}
/* ---------- PRODUCT GRID WRAPPER (hh-product-grid) ---------- */
.hh-product-grid {
background-color: #FFFDF9 !important;
padding: 80px !important;
}
@media (max-width: 1024px) {
.hh-product-grid { padding: 60px 32px !important; }
}
/* WooCommerce products grid */
.hh-product-grid ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 1024px) {
.hh-product-grid ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
.hh-product-grid ul.products { grid-template-columns: 1fr !important; }
}
/* ---------- PRODUCT CARD ---------- */
.hh-product-grid ul.products li.product {
background-color: #FFFDF9 !important;
border: 1px solid #F8F3EC !important;
padding: 32px 32px 24px !important;
margin: 0 !important;
list-style: none !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.hh-product-grid ul.products li.product:hover {
transform: translateY(-6px) !important;
box-shadow: 0 10px 30px rgba(44, 34, 24, 0.08) !important;
}
/* Product link wrapper */
.hh-product-grid ul.products li.product a {
text-decoration: none !important;
color: inherit !important;
display: block !important;
}
/* Product image */
.hh-product-grid ul.products li.product img {
width: 100% !important;
height: auto !important;
margin: 0 0 16px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Category label above title (if theme / plugin adds it) */
.hh-product-grid ul.products li.product .product-category,
.hh-product-grid ul.products li.product .hh-product-cat {
font-family: 'Jost', sans-serif !important;
font-size: 9.6px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: #7A6A5A !important;
margin-bottom: 8px !important;
display: block !important;
}
/* Product title */
.hh-product-grid ul.products li.product .woocommerce-loop-product__title,
.hh-product-grid ul.products li.product h2,
.hh-product-grid ul.products li.product h3 {
font-family: 'Cormorant Garamond', serif !important;
font-size: 19.2px !important;
font-weight: 400 !important;
line-height: 1.3 !important;
color: #2C2218 !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
/* Price */
.hh-product-grid ul.products li.product .price,
.hh-product-grid ul.products li.product .price * {
font-family: 'Jost', sans-serif !important;
font-size: 12.8px !important;
font-weight: 300 !important;
color: #B8924A !important;
}
.hh-product-grid ul.products li.product .price del {
opacity: 0.4 !important;
}
.hh-product-grid ul.products li.product .price ins {
text-decoration: none !important;
}
/* Hide default "Add to cart" button on loop (card is fully clickable) */
.hh-product-grid ul.products li.product .button,
.hh-product-grid ul.products li.product .add_to_cart_button {
display: none !important;
}
/* Sale badge */
.hh-product-grid ul.products li.product .onsale {
background-color: #B8924A !important;
color: #2C2218 !important;
font-family: 'Jost', sans-serif !important;
font-size: 9.6px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
padding: 6px 12px !important;
border-radius: 0 !important;
top: 16px !important;
right: 16px !important;
left: auto !important;
min-width: 0 !important;
min-height: 0 !important;
line-height: 1 !important;
}
/* ---------- GIFT CARD CARD (hh-giftcard) ---------- */
.hh-giftcard {
background: linear-gradient(135deg, #3D2F24 0%, #2A1E14 100%) !important;
padding: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
text-decoration: none !important;
}
.hh-giftcard:hover {
transform: translateY(-6px) !important;
box-shadow: 0 10px 30px rgba(44, 34, 24, 0.15) !important;
}
.hh-giftcard-eyebrow {
font-family: 'Jost', sans-serif !important;
font-size: 9.6px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: #B8924A !important;
margin-bottom: 8px !important;
}
.hh-giftcard-title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 22.4px !important;
color: #FFFDF9 !important;
margin-bottom: 8px !important;
}
.hh-giftcard-variants {
font-family: 'Jost', sans-serif !important;
font-size: 12.8px !important;
font-weight: 300 !important;
color: #B8924A !important;
}
/* ---------- FREE SHIPPING BANNER (hh-shipping-banner) ---------- */
.hh-shipping-banner {
background-color: #B8924A !important;
padding: 24px 80px !important;
text-align: center !important;
}
.hh-shipping-banner,
.hh-shipping-banner p,
.hh-shipping-banner * {
font-family: 'Jost', sans-serif !important;
font-size: 11.2px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.3em !important;
color: #2C2218 !important;
margin: 0 !important;
}
/* ---------- PAGINATION (bottom of archive) ---------- */
.hh-product-grid .woocommerce-pagination {
margin-top: 64px !important;
text-align: center !important;
}
.hh-product-grid .woocommerce-pagination ul {
display: inline-flex !important;
gap: 8px !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.hh-product-grid .woocommerce-pagination ul li {
border: none !important;
margin: 0 !important;
}
.hh-product-grid .woocommerce-pagination ul li a,
.hh-product-grid .woocommerce-pagination ul li span {
font-family: 'Jost', sans-serif !important;
font-size: 11.2px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: rgba(44, 34, 24, 0.6) !important;
background: transparent !important;
padding: 8px 14px !important;
border: 1px solid rgba(184, 146, 74, 0.2) !important;
border-radius: 0 !important;
transition: all 0.3s ease !important;
}
.hh-product-grid .woocommerce-pagination ul li a:hover,
.hh-product-grid .woocommerce-pagination ul li span.current {
background: #B8924A !important;
color: #2C2218 !important;
border-color: #B8924A !important;
}
Skip to the content
