next to .page-title inside .woocommerce-page-header. We hid the
title but left the description visible above the listing header
(it sat alone in the wrapper, creating a 500px+ floating gap).
Hide both elements AND the empty container that holds them. */
body.woocommerce .woocommerce-page-header .term-description,
body.woocommerce .woocommerce-page-header .woocommerce-products-header__title,
body.woocommerce .woocommerce-page-header .woocommerce-products-header__title.page-title {
display: none !important;
}
/* The second .container child of woocommerce-page-header is the
one holding title + description (first child is breadcrumb).
Collapse it so the wrapper takes no extra space. */
body.woocommerce .woocommerce-page-header > .container + .container,
body.archive .woocommerce-page-header > .container + .container,
body.tax-product_cat .woocommerce-page-header > .container + .container,
body.woocommerce-shop .woocommerce-page-header > .container + .container {
display: none !important;
}
/* Tighten the breadcrumb wrapper too */
body.woocommerce .woocommerce-page-header {
padding: 12px 0 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* Kill Botiga's hover dropdown chevron — our ::after caret is the
only one we want. Botiga uses
with an inline SVG inside; hide the whole span. */
.bhfb .main-navigation .botiga-dropdown-li > .dropdown-symbol,
.bhfb .main-navigation .botiga-dropdown-li > span.dropdown-symbol,
.bhfb .main-navigation .botiga-dropdown-li > i.dropdown-symbol {
display: none !important;
}
/* ----- Product card refinements ----- */
/* Botiga wraps the image + add-to-cart in a .loop-image-wrap div
inside the link. Make it actually fill the link so the image
shows over the soft sand-grey background instead of leaving
the card empty. */
ul.products li.product .loop-image-wrap {
width: 100% !important;
height: 100% !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
}
ul.products li.product .loop-image-wrap > img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Hide Botiga's in-card Add to Bag button + the extra empty
loop-button-wrap rows + the unstyled Quick View text link (we
will re-introduce a styled + icon in a later commit). */
ul.products li.product .loop-image-wrap > .loop-button-wrap,
ul.products li.product > .loop-button-wrap,
ul.products li.product > a.yith-wcqv-button:not(.vastori-card-plus),
ul.products li.product .add_to_cart_button {
display: none !important;
}
/* v0.9.100 — Card fav heart: the position + circle live in ONE block
below (top-right, stacked under the "+"). The old bottom-right block and
its hover rule that filled the ENTIRE circle green are removed — the
circle stays white at all times; only the heart GLYPH changes (outline →
forest) on hover/saved, via the ::before rules. */
ul.products li.product .tinv-wraper .tinv-wishlist-clear {
display: none !important;
}
ul.products li.product .tinvwl_add_to_wishlist_button {
text-decoration: none !important;
font-size: 0 !important; /* swallow the visible text spans */
line-height: 1 !important;
transition: none !important;
}
/* The text spans — hidden, screen-reader still picks them up via
the anchor's aria-label */
ul.products li.product .tinvwl_add_to_wishlist_button > span.tinvwl_add_to_wishlist-text,
ul.products li.product .tinvwl_add_to_wishlist_button > span.tinvwl_remove_from_wishlist-text {
display: none !important;
}
/* v0.9.84 — Two-state SVG heart so the fav clearly reads saved vs not.
Default = OUTLINE heart (forest stroke). Saved (TI sets
data-tinv-wl-action="remove") = FILLED forest heart. Hover on an
unsaved heart previews the filled state. (Switched from the mask
approach to background-image so outline vs fill is possible.) */
ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before {
content: "" !important;
width: 17px !important;
height: 17px !important;
/* v0.9.89 — absolutely centre the heart in its circle (optical nudge
1px up so the heart's point doesn't read as low). Flex centring left
it sitting slightly low. */
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, calc(-50% - 0.5px)) !important;
margin: 0 !important;
font-size: 0 !important;
line-height: 1 !important;
-webkit-mask: none !important;
mask: none !important;
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A3D27' stroke-width='1.7'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Hover preview on an unsaved heart — hint that clicking will fill it. */
ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:hover::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A3D27'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
opacity: 0.55 !important;
}
/* SAVED state — solid forest fill (this is the "it worked" feedback). */
ul.products li.product .tinvwl_add_to_wishlist_button.tinvwl-icon-heart[data-tinv-wl-action="remove"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A3D27'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") !important;
opacity: 1 !important;
}
/* Same mask for the class-stripped variant (defensive). */
ul.products li.product .tinvwl_add_to_wishlist_button::before {
content: "" !important;
width: 17px !important;
height: 17px !important;
display: inline-block !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat !important;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* Kill the plugin's font-glyph ::after if it draws on top */
ul.products li.product .tinvwl_add_to_wishlist_button::after {
content: none !important;
display: none !important;
}
/* ============================================================
v0.9.34 — Card hover image swap + "+" quick view button +
"View Full Product" link inside the YITH quick view modal.
The PHP that renders these is in inc/product-loop.php.
============================================================ */
/* Hover image overlay — second gallery image, faded in on hover.
The PHP injects a inside the link wrapper, before
the primary image. CSS positions it absolutely over the .loop-
image-wrap so it covers the primary thumb. */
ul.products li.product .vastori-card-hover {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
opacity: 0;
transition: opacity 0.45s var(--vastori-ease);
z-index: 3;
pointer-events: none;
}
ul.products li.product:hover .vastori-card-hover {
opacity: 1;
}
/* "+" quick view button — top-right of the image card. Outside
the link wrapper so the click doesn't navigate; carries the
yith-wcqv-button class so YITH binds the modal open. */
ul.products li.product .vastori-card-plus {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 36px !important;
height: 36px !important;
background: rgba(255, 255, 255, 0.85) !important;
border: 0 !important;
border-radius: 50% !important;
color: var(--vastori-ink) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
z-index: 6 !important;
cursor: pointer;
transition: background 0.2s var(--vastori-ease), color 0.2s var(--vastori-ease), transform 0.2s var(--vastori-ease);
opacity: 0.92;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
ul.products li.product .vastori-card-plus:hover {
background: var(--vastori-ink) !important;
color: #FFFFFF !important;
transform: scale(1.06);
opacity: 1;
}
ul.products li.product .vastori-card-plus__icon {
display: inline-block;
font-family: var(--vastori-font-sans);
font-size: 22px;
font-weight: 300;
line-height: 1;
margin-top: -2px;
color: inherit;
}
/* "View Full Product" link inside the YITH quick view modal.
Rendered by the product-loop PHP only in YITH AJAX context, so
no leakage to the regular single product page. */
#yith-quick-view-modal .vastori-qv-fullview {
display: inline-block;
margin-top: 20px;
padding-bottom: 4px;
font-family: var(--vastori-font-sans) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--vastori-ink) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
transition: color 0.18s var(--vastori-ease);
}
#yith-quick-view-modal .vastori-qv-fullview:hover {
color: var(--vastori-ink-soft) !important;
}
body.single-product .vastori-reviews__empty {
padding: 24px 0;
color: var(--vastori-muted);
font-size: 14px;
line-height: 1.6;
}
body.single-product .vastori-reviews__write {
display: inline-block;
margin-top: 12px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--vastori-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
body.single-product .vastori-reviews__list {
list-style: none;
margin: 0;
padding: 0;
}
body.single-product .vastori-reviews__item {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 32px;
padding: 32px 0;
border-top: 0.5px solid var(--vastori-hairline);
list-style: none;
}
body.single-product .vastori-reviews__item:first-child {
border-top: 0;
}
body.single-product .vastori-reviews__meta {
display: flex;
flex-direction: column;
gap: 6px;
}
body.single-product .vastori-reviews__item-title {
font-size: 14px;
font-weight: 600;
color: var(--vastori-ink);
margin: 0 0 6px;
line-height: 1.3;
}
body.single-product .vastori-reviews__author {
font-size: 13px;
color: var(--vastori-ink);
margin: 0;
}
body.single-product .vastori-reviews__date {
font-size: 12px;
color: var(--vastori-muted);
margin: 0;
}
body.single-product .vastori-reviews__rating {
font-size: 14px;
margin: 4px 0 0;
line-height: 1;
display: inline-flex;
gap: 1px;
}
body.single-product .vastori-reviews__body {
font-size: 14px;
line-height: 1.7;
color: var(--vastori-ink);
}
body.single-product .vastori-reviews__body p {
margin: 0 0 12px;
}
body.single-product .vastori-reviews__body p:last-child {
margin-bottom: 0;
}
body.single-product .vastori-reviews__verdict {
font-size: 13px;
color: var(--vastori-ink);
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
body.single-product .vastori-reviews__verdict-label,
body.single-product .vastori-reviews__verdict-yes,
body.single-product .vastori-reviews__verdict-no {
font-weight: 500;
}
body.single-product .vastori-reviews__verdict-no {
color: var(--vastori-muted);
}
/* Fabric care guide */
body.single-product .vastori-care__title {
font-family: var(--vastori-font-serif);
font-size: clamp(26px, 3vw, 36px);
font-weight: 400;
color: var(--vastori-ink);
margin: 0 0 20px;
line-height: 1.2;
}
body.single-product .vastori-care__intro {
font-size: 14px;
line-height: 1.8;
color: var(--vastori-ink-soft);
margin: 0 0 24px;
max-width: 760px;
}
body.single-product .vastori-care__list {
list-style: disc;
padding: 0 0 0 22px;
margin: 0;
max-width: 760px;
}
body.single-product .vastori-care__list li {
font-size: 14px;
line-height: 1.8;
color: var(--vastori-ink);
margin: 0 0 8px;
}
body.single-product .vastori-care__list li::marker {
color: var(--vastori-ink);
}
/* "Pieces You May Like" (related products) heading polish */
body.single-product .related.products > h2,
body.single-product section.related > h2 {
font-family: var(--vastori-font-serif) !important;
font-size: clamp(26px, 3vw, 36px) !important;
font-weight: 400 !important;
color: var(--vastori-ink) !important;
margin: 40px auto 24px !important; /* v0.9.29: tighter — was 64px / 32px */
max-width: 1280px;
padding: 40px 24px 0;
border-top: 0.5px solid var(--vastori-hairline);
text-align: left !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* v0.9.28 — Pieces You May Like product grid (toa.st-style).
3-column on desktop, image-first cards on a soft sand background
container, title + price below in quiet sans + serif, no
in-grid Add-to-Bag button. */
body.single-product section.related,
body.single-product .related.products {
max-width: 1280px !important;
margin: 0 auto !important;
padding: 0 24px 80px !important;
background: transparent !important;
}
body.single-product section.related ul.products,
body.single-product .related.products ul.products,
body.single-product section.related > ul.products,
body.single-product section.related .products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
}
body.single-product section.related ul.products li.product,
body.single-product section.related .products .product {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
float: none !important;
text-align: left !important;
border: 0 !important;
box-shadow: none !important;
}
/* Image — light tinted studio container */
body.single-product section.related .products .product a.woocommerce-LoopProduct-link,
body.single-product section.related .products .product a.woocommerce-loop-product__link {
display: block !important;
text-decoration: none !important;
background: #F3F1ED !important; /* light sand-grey card background */
overflow: hidden !important;
aspect-ratio: 3 / 4 !important;
position: relative !important;
}
body.single-product section.related .products .product img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transition: transform 0.6s var(--vastori-ease);
}
body.single-product section.related .products .product:hover img {
transform: scale(1.03);
}
/* Title + price — below the card, quiet typography */
body.single-product section.related .products .product .woocommerce-loop-product__title,
body.single-product section.related .products .product h2.woocommerce-loop-product__title,
body.single-product section.related .products .product h3.woocommerce-loop-product__title {
font-family: var(--vastori-font-serif) !important;
font-size: 15px !important;
font-weight: 400 !important;
color: var(--vastori-ink) !important;
text-align: left !important;
margin: 18px 0 4px !important;
padding: 0 !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.single-product section.related .products .product .price,
body.single-product section.related .products .product span.price {
font-family: var(--vastori-font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--vastori-ink) !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
background: transparent !important;
display: block !important;
}
body.single-product section.related .products .product .price .amount,
body.single-product section.related .products .product .price .woocommerce-Price-amount {
color: var(--vastori-ink) !important;
font-weight: 400 !important;
}
/* Hide noisy WC bits inside the grid card */
body.single-product section.related .products .product .button,
body.single-product section.related .products .product .add_to_cart_button,
body.single-product section.related .products .product .ajax_add_to_cart,
body.single-product section.related .products .product .added_to_cart,
body.single-product section.related .products .product .star-rating,
body.single-product section.related .products .product .onsale,
body.single-product section.related .products .product .botiga-product-add-to-cart-link,
body.single-product section.related .products .product .botiga-quick-view {
display: none !important;
}
/* Keep the TI Wishlist heart toggle visible but quietly placed in
the top-right of the image card (toa.st-style) */
body.single-product section.related .products .product .tinv-wraper,
body.single-product section.related .products .product .tinv-wishlist {
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 2 !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
body.single-product section.related .products .product .tinvwl_add_to_wishlist_button {
background: rgba(255,255,255,0.85) !important;
border: 0 !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--vastori-ink) !important;
}
/* Mobile: 2-col grid then 1-col below 480px */
@media (max-width: 900px) {
body.single-product section.related ul.products,
body.single-product section.related .products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
}
@media (max-width: 480px) {
body.single-product section.related ul.products,
body.single-product section.related .products {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
}
/* ============================================================
v0.9.30 — Hover-revealed primary nav dropdown (toa.st-style).
Botiga emits .botiga-dropdown-li > .sub-menu for child items.
We restyle that as a clean white panel that fades in on hover.
============================================================ */
.bhfb .main-navigation .botiga-dropdown-li {
position: relative;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu,
.bhfb .main-navigation .botiga-dropdown-ul ul.sub-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: var(--vastori-surface) !important;
border: 0 !important;
box-shadow: 0 12px 28px rgba(0,0,0,0.06) !important;
padding: 24px 32px !important;
min-width: 240px !important;
list-style: none !important;
margin: 0 !important;
border-radius: 0 !important;
opacity: 0;
visibility: hidden;
transform: translateY(2px);
transition: opacity 0.18s var(--vastori-ease), transform 0.18s var(--vastori-ease), visibility 0s linear 0.18s;
z-index: 9100 !important;
}
.bhfb .main-navigation .botiga-dropdown-li:hover > .sub-menu,
.bhfb .main-navigation .botiga-dropdown-li:focus-within > .sub-menu,
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
/* Bridge gap between top-level item and the dropdown so the hover
doesn't break when the cursor crosses the empty pixel between them */
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background: transparent;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li {
list-style: none !important;
margin: 0 0 14px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li:last-child {
margin-bottom: 0 !important;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li a,
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li a.botiga-dropdown-link {
display: block !important;
padding: 0 !important;
background: transparent !important;
color: var(--vastori-ink) !important;
font-family: var(--vastori-font-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
line-height: 1.5 !important;
transition: color 0.18s var(--vastori-ease);
white-space: nowrap !important;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li a:hover,
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu li a:focus {
color: var(--vastori-ink-soft) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* Subtle caret on top-level items that have children */
.bhfb .main-navigation .menu-item-has-children > a::after,
.bhfb .main-navigation .botiga-dropdown-li.menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.18s var(--vastori-ease);
opacity: 0.6;
}
.bhfb .main-navigation .menu-item-has-children:hover > a::after {
transform: translateY(0) rotate(225deg);
opacity: 1;
}
/* Hide Botiga's own dropdown chevron icon if present so it doesn't
collide with our caret */
.bhfb .main-navigation .botiga-dropdown-li > a > .botiga-dropdown-icon,
.bhfb .main-navigation .botiga-dropdown-li > a > svg.botiga-dropdown-arrow {
display: none !important;
}
/* Mobile: dropdown becomes inline expansion rather than absolute popover */
@media (max-width: 991px) {
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
padding: 8px 0 8px 16px !important;
min-width: 0 !important;
}
.bhfb .main-navigation .botiga-dropdown-li > .sub-menu::before {
display: none !important;
}
}
/* ============================================================
v0.9.31 — Product listing page (shop / category / tag /
search archives). Top header + filter bar + sort dropdown +
toa.st-style centered product card grid.
============================================================ */
/* ----- Listing header ----- */
.vastori-listing-header {
max-width: 900px;
margin: 40px auto 32px;
padding: 0 24px;
text-align: center;
}
.vastori-listing-header__title {
font-family: var(--vastori-font-serif);
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
color: var(--vastori-ink);
margin: 0 0 16px;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
}
.vastori-listing-header__desc {
font-family: var(--vastori-font-sans);
font-size: 15px;
line-height: 1.75;
color: var(--vastori-ink-soft);
max-width: 640px;
margin: 0 auto;
}
.vastori-listing-header__desc p {
margin: 0;
}
/* v0.9.35 — Sub-category navigation row (above the filter bar).
Centered horizontal row of underlined sans links pointing at the
current category's children. Hidden when the category has no
children. */
.vastori-subcat-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px 40px;
max-width: 1280px;
margin: 0 auto 32px;
padding: 0 24px;
font-family: var(--vastori-font-sans);
}
.vastori-subcat-nav__link {
font-size: 14px;
font-weight: 400;
color: var(--vastori-ink);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
line-height: 1.4;
transition: color 0.18s var(--vastori-ease), text-underline-offset 0.18s var(--vastori-ease);
}
.vastori-subcat-nav__link:hover,
.vastori-subcat-nav__link:focus {
color: var(--vastori-ink-soft);
text-underline-offset: 6px;
}
@media (max-width: 768px) {
.vastori-subcat-nav {
gap: 12px 24px;
padding: 0 20px;
}
.vastori-subcat-nav__link {
font-size: 13px;
}
}
/* v0.9.36 — Sub-category IMAGE TILES (toa.st Women / Men / Home
pattern). Used when one or more children resolve to a thumbnail.
Falls back to plain .vastori-subcat-nav when none do. */
.vastori-subcat-tiles {
/* v0.9.40 — tighter, centered, capped at 5-up so we don't
inflate to 426px/tile when only 3 children exist. */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
justify-content: center;
gap: 16px 12px;
max-width: 1100px;
margin: 0 auto 24px;
padding: 0 24px;
}
.vastori-subcat-tiles__item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--vastori-ink);
transition: opacity 0.2s var(--vastori-ease);
}
.vastori-subcat-tiles__item:hover {
opacity: 0.88;
}
.vastori-subcat-tiles__img {
display: block;
width: 100%;
/* v0.9.40 — square aspect (was 3/4 — too tall). */
aspect-ratio: 1 / 1;
background-color: #F3F1ED;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 8px;
transition: transform 0.5s var(--vastori-ease);
}
.vastori-subcat-tiles__item:hover .vastori-subcat-tiles__img {
transform: scale(1.02);
}
.vastori-subcat-tiles__img--placeholder {
background-color: #F3F1ED;
}
.vastori-subcat-tiles__name {
font-family: var(--vastori-font-serif);
font-size: 14px; /* v0.9.40 — was 16px */
font-weight: 400;
color: var(--vastori-ink);
text-align: center;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
}
/* v0.9.40 — Compress the listing-header section so the product
grid opens visibly near the top of the viewport instead of
500-700px below. */
body.woocommerce .vastori-listing-header,
body.archive .vastori-listing-header,
body.tax-product_cat .vastori-listing-header {
margin-top: 24px;
margin-bottom: 16px;
}
body.woocommerce .vastori-listing-header__title,
body.archive .vastori-listing-header__title,
body.tax-product_cat .vastori-listing-header__title {
margin-bottom: 10px;
}
/* v0.9.37 — Suppress WC's default "Added to bag" success message
site-wide (the drawer is the new feedback). Keep error notices
visible so failed validation still surfaces. */
body .woocommerce-message,
body div.woocommerce-message,
body .woocommerce-notices-wrapper > .woocommerce-message {
display: none !important;
}
/* v0.9.44 — Numbered pagination hidden; replaced by Load More.
(Kept the chip styling below in case we ever re-enable it.) */
body.woocommerce nav.woocommerce-pagination {
display: none !important;
}
/* v0.9.44 — Load More button + status */
.vastori-loadmore-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 24px auto 80px;
padding: 0 24px;
max-width: 1280px;
}
.vastori-loadmore-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 220px;
padding: 16px 36px;
background: transparent;
color: var(--vastori-ink);
border: 1px solid var(--vastori-ink);
border-radius: 0;
font-family: var(--vastori-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.24em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: background 0.25s var(--vastori-ease), color 0.25s var(--vastori-ease);
}
.vastori-loadmore-btn:hover {
background: var(--vastori-ink);
color: #FFFFFF;
}
.vastori-loadmore-btn.is-loading {
opacity: 0.7;
cursor: wait;
}
.vastori-loadmore-btn__spinner {
display: none;
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: vastori-spin 0.7s linear infinite;
}
.vastori-loadmore-btn.is-loading .vastori-loadmore-btn__spinner {
display: inline-block;
}
@keyframes vastori-spin { to { transform: rotate(360deg); } }
.vastori-loadmore-status {
font-family: var(--vastori-font-sans);
font-size: 12px;
color: var(--vastori-muted);
margin: 0;
letter-spacing: 0.04em;
}
/* v0.9.44 — NEW / SALE / LIMITED card badge (top-left of image) */
ul.products li.product .vastori-card-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
display: inline-block;
padding: 6px 12px;
font-family: var(--vastori-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
background: var(--vastori-surface);
color: var(--vastori-ink);
border: 0;
}
ul.products li.product .vastori-card-badge--sale {
background: var(--vastori-ink);
color: #FFFFFF;
}
ul.products li.product .vastori-card-badge--limited {
background: var(--vastori-cocoa);
color: #FFFFFF;
}
ul.products li.product .vastori-card-badge--new {
/* v0.9.85 — was white-on-white (invisible over pale image areas).
Give it a hairline + subtle tint so it always reads, while staying
lighter than the filled SALE/LIMITED badges. */
background: rgba(255, 255, 255, 0.92);
color: var(--vastori-ink);
border: 0.5px solid var(--vastori-line);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* (retained, unused) old pagination chip styling for reference */
body.woocommerce nav.woocommerce-pagination--disabled,
body.archive nav.woocommerce-pagination--disabled,
body.tax-product_cat nav.woocommerce-pagination--disabled,
body.woocommerce-shop nav.woocommerce-pagination--disabled {
display: flex !important;
justify-content: center !important;
margin: 16px auto 80px !important;
padding: 0 24px !important;
max-width: 1280px !important;
text-align: center !important;
border: 0 !important;
background: transparent !important;
}
body.woocommerce nav.woocommerce-pagination ul,
body.woocommerce nav.woocommerce-pagination ul.page-numbers {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body.woocommerce nav.woocommerce-pagination ul li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
body.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
body.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 12px !important;
margin: 0 !important;
border: 1px solid var(--vastori-line) !important;
background: var(--vastori-surface) !important;
color: var(--vastori-ink) !important;
font-family: var(--vastori-font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-decoration: none !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: background 0.2s var(--vastori-ease), color 0.2s var(--vastori-ease), border-color 0.2s var(--vastori-ease);
}
body.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover {
border-color: var(--vastori-ink) !important;
color: var(--vastori-ink) !important;
}
body.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
background: var(--vastori-ink) !important;
color: #FFFFFF !important;
border-color: var(--vastori-ink) !important;
font-weight: 500 !important;
}
body.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
border: 0 !important;
background: transparent !important;
color: var(--vastori-muted) !important;
min-width: 24px !important;
}
body.woocommerce nav.woocommerce-pagination ul li a.next,
body.woocommerce nav.woocommerce-pagination ul li a.prev {
/* arrow chips — same as numbered ones */
font-size: 16px !important;
}
@media (max-width: 480px) {
body.woocommerce nav.woocommerce-pagination {
margin: 8px auto 56px !important;
}
body.woocommerce nav.woocommerce-pagination ul.page-numbers {
gap: 4px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
body.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
body.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
min-width: 32px !important;
height: 32px !important;
padding: 0 8px !important;
font-size: 12px !important;
}
}
@media (max-width: 600px) {
.vastori-subcat-tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 8px;
max-width: 480px;
margin-bottom: 16px;
}
.vastori-subcat-tiles__name {
font-size: 12.5px;
}
}
/* ----- Filter / sort bar ----- */
.vastori-listing-bar {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
max-width: 1280px;
margin: 0 auto 40px;
padding: 16px 24px;
border-top: 0.5px solid var(--vastori-hairline);
border-bottom: 0.5px solid var(--vastori-hairline);
font-family: var(--vastori-font-sans);
}
.vastori-listing-bar__count {
font-size: 13px;
color: var(--vastori-ink);
letter-spacing: 0;
}
.vastori-listing-bar__filters {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
}
.vastori-listing-bar__sort {
justify-self: end;
}
/* ----- Filter dropdown button ----- */
.vastori-filter-dropdown {
position: relative;
}
.vastori-filter-dropdown__btn,
.vastori-sort-dropdown__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 0;
padding: 8px 0;
font-family: var(--vastori-font-sans);
font-size: 14px;
font-weight: 500;
color: var(--vastori-ink);
cursor: pointer;
line-height: 1;
}
.vastori-filter-dropdown__btn.is-active {
color: var(--vastori-ink);
}
.vastori-filter-dropdown__count {
color: var(--vastori-muted);
font-weight: 400;
font-size: 13px;
}
.vastori-filter-dropdown__chev {
width: 8px;
height: 8px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.18s var(--vastori-ease);
margin-left: 4px;
opacity: 0.7;
}
.vastori-filter-dropdown__btn[aria-expanded="true"] .vastori-filter-dropdown__chev,
.vastori-sort-dropdown__btn[aria-expanded="true"] .vastori-filter-dropdown__chev {
transform: translateY(2px) rotate(225deg);
opacity: 1;
}
/* ----- Filter dropdown panel ----- */
.vastori-filter-dropdown__panel {
position: absolute;
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%);
background: var(--vastori-surface);
box-shadow: 0 16px 36px rgba(0,0,0,0.08);
padding: 32px 32px 24px;
min-width: 640px;
max-width: 720px;
z-index: 200;
}
.vastori-filter-dropdown__panel[hidden] {
display: none;
}
.vastori-filter-dropdown__list {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 32px;
}
.vastori-filter-dropdown__item {
margin: 0;
padding: 0;
list-style: none;
}
.vastori-filter-dropdown__item label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--vastori-font-sans);
font-size: 14px;
color: var(--vastori-ink);
}
.vastori-filter-dropdown__item input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--vastori-ink);
}
.vastori-filter-dropdown__termcount {
color: var(--vastori-muted);
font-size: 13px;
margin-left: 4px;
}
.vastori-filter-dropdown__actions {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-top: 16px;
}
.vastori-filter-dropdown__apply {
background: var(--vastori-ink);
color: #FFFFFF;
border: 0;
padding: 12px 32px;
font-family: var(--vastori-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
transition: background 0.2s var(--vastori-ease);
}
.vastori-filter-dropdown__apply:hover {
background: var(--vastori-ink-soft);
}
.vastori-filter-dropdown__clear {
font-family: var(--vastori-font-sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--vastori-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ----- Sort dropdown ----- */
.vastori-sort-dropdown {
position: relative;
}
.vastori-sort-dropdown__value {
color: var(--vastori-muted);
font-weight: 400;
font-size: 13px;
}
.vastori-sort-dropdown__panel {
position: absolute;
top: calc(100% + 16px);
right: 0;
background: var(--vastori-surface);
box-shadow: 0 16px 36px rgba(0,0,0,0.08);
padding: 16px 0;
min-width: 240px;
z-index: 200;
}
.vastori-sort-dropdown__panel[hidden] {
display: none;
}
.vastori-sort-dropdown__list {
list-style: none;
margin: 0;
padding: 0;
}
.vastori-sort-dropdown__item {
margin: 0;
padding: 0;
list-style: none;
}
.vastori-sort-dropdown__item a {
display: block;
padding: 10px 24px;
font-family: var(--vastori-font-sans);
font-size: 14px;
color: var(--vastori-ink);
text-decoration: none;
line-height: 1.4;
background: transparent;
}
.vastori-sort-dropdown__item a:hover {
background: var(--vastori-sand-soft);
}
.vastori-sort-dropdown__item.is-active a {
background: var(--vastori-ink);
color: #FFFFFF;
}
/* Mobile: bar collapses to a stack */
@media (max-width: 768px) {
.vastori-listing-bar {
grid-template-columns: 1fr;
text-align: center;
}
.vastori-listing-bar__count {
order: 1;
}
.vastori-listing-bar__filters {
order: 2;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.vastori-listing-bar__sort {
order: 3;
justify-self: center;
}
.vastori-filter-dropdown__panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 0;
width: calc(100vw - 32px);
max-width: 360px;
max-height: 80vh;
overflow-y: auto;
}
.vastori-filter-dropdown__list {
grid-template-columns: 1fr;
}
}
/* ============================================================
v0.9.31 — Toa.st-style product card grid for all WC product
loops: shop archive, category/tag archives, search results,
AND the related products grid we styled earlier in v0.9.28.
Centered title, centered price, no card chrome.
============================================================ */
ul.products,
body.woocommerce-shop ul.products,
body.archive.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search-results ul.products {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 48px 32px !important;
margin: 0 auto !important;
padding: 0 24px 80px !important;
max-width: 1280px !important;
list-style: none !important;
background: transparent !important;
}
ul.products li.product,
body.woocommerce-shop ul.products li.product,
body.archive.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
float: none !important;
text-align: center !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
}
/* Image card — soft sand-grey container.
v0.9.58: only the product link that actually CONTAINS the ![]()
becomes the 3/4 crop box. Botiga also emits a second, empty
`woocommerce-LoopProduct-link` (badge only, no image) as a direct
child — without the :has(img) guard that empty link inherited
the aspect-ratio box and reserved a tall BLANK panel above the real
image ("blank image then the image" on every card, home + archives). */
ul.products li.product a.woocommerce-LoopProduct-link:has(img),
ul.products li.product a.woocommerce-loop-product__link:has(img) {
display: block !important;
text-decoration: none !important;
background: #F3F1ED !important;
overflow: hidden !important;
aspect-ratio: 3 / 4 !important;
position: relative !important;
margin-bottom: 18px !important;
}
/* Stray empty product link (no ![]()
) — collapse it so it stops
reserving blank space; the badge inside is absolutely positioned. */
ul.products li.product a.woocommerce-LoopProduct-link:not(:has(img)),
ul.products li.product a.woocommerce-loop-product__link:not(:has(img)) {
display: block !important;
aspect-ratio: auto !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
background: transparent !important;
overflow: visible !important;
}
/* Botiga wraps the thumbnail in `.loop-image-wrap{height:100%}`; with
`grid-auto-rows:minmax(0,auto)` that let the image's intrinsic height
inflate every grid-row track (cards ballooned to 700–990px). Pin the
wrap to its content height so the track sizes to the 3/4 crop box. */
ul.products li.product .loop-image-wrap {
height: auto !important;
}
ul.products li.product img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transition: transform 0.6s var(--vastori-ease);
}
ul.products li.product:hover img {
transform: scale(1.03);
}
/* Title — centered serif */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product h3.woocommerce-loop-product__title {
font-family: var(--vastori-font-serif) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: var(--vastori-ink) !important;
text-align: center !important;
margin: 0 0 6px !important;
padding: 0 !important;
line-height: 1.3 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Price — centered sans, ink */
ul.products li.product .price,
ul.products li.product span.price {
font-family: var(--vastori-font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--vastori-ink) !important;
text-align: center !important;
margin: 0 0 6px !important;
padding: 0 !important;
line-height: 1.4 !important;
background: transparent !important;
display: block !important;
}
ul.products li.product .price .amount,
ul.products li.product .price .woocommerce-Price-amount {
color: var(--vastori-ink) !important;
font-weight: 400 !important;
}
/* Star rating — small + centered */
ul.products li.product .star-rating {
display: inline-block !important;
margin: 0 auto !important;
font-size: 11px !important;
}
/* Hide noisy WC chrome in the card */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
ul.products li.product .added_to_cart,
ul.products li.product .onsale,
ul.products li.product .botiga-product-add-to-cart-link,
ul.products li.product .botiga-quick-view {
display: none !important;
}
/* TI Wishlist (fav heart) — top-right, stacked under the quick-view "+"
with a clear gap (was a broken calc() that overlapped the "+"). */
ul.products li.product .tinv-wraper,
ul.products li.product .tinv-wishlist {
position: absolute !important;
top: 58px !important;
bottom: auto !important;
right: 12px !important;
z-index: 6 !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
}
ul.products li.product .tinvwl_add_to_wishlist_button {
background: rgba(255,255,255,0.85) !important;
border: 0 !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--vastori-ink) !important;
}
/* Responsive grid */
@media (max-width: 900px) {
ul.products,
body.woocommerce-shop ul.products,
body.archive.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px 24px !important;
}
}
@media (max-width: 480px) {
ul.products,
body.woocommerce-shop ul.products,
body.archive.post-type-archive-product ul.products,
body.tax-product_cat ul.products {
grid-template-columns: 1fr !important;
gap: 32px !important;
padding: 0 16px 60px !important;
}
}
/* Mobile breakpoints */
@media (max-width: 768px) {
body.single-product .vastori-reviews,
body.single-product .vastori-care {
padding: 40px 20px;
margin-top: 32px;
}
body.single-product .vastori-reviews__head {
grid-template-columns: 1fr;
}
body.single-product .vastori-reviews__sort {
justify-self: start;
}
body.single-product .vastori-reviews__item {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 0;
}
body.single-product .vastori-reviews__verdict {
padding-top: 8px;
border-top: 0.5px solid var(--vastori-hairline);
}
}
/* ============================================================
v0.9.45 — Mobile hardening pass
Targets overflow-prone areas on phones (≤600px) across all the
custom components added in v0.9.x. No desktop impact.
============================================================ */
/* Global: never allow horizontal scroll on phones */
@media (max-width: 600px) {
html, body { max-width: 100%; overflow-x: hidden; }
/* --- Mobile header: keep it to one tidy row ---
hamburger | logo | search-icon + BAG. SAVED + ACCOUNT text
labels are reachable from the off-canvas menu + account icon,
so we drop them on small phones to stop the header wrapping
into two cramped lines. BAG stays (with its count). */
body .bhfb-mobile .vastori-h-link--saved,
body .bhfb-mobile .vastori-h-link--account {
display: none !important;
}
body .bhfb-mobile .vastori-h-link--bag {
font-size: 10px !important;
padding: 0 4px !important;
}
body .bhfb-mobile .bhfb-component-woo_icons,
body .bhfb-mobile .bhfb-column-3 {
gap: 8px !important;
flex-wrap: nowrap !important;
}
/* --- Listing bar: stack cleanly, no overflow --- */
.vastori-listing-bar {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 14px 16px !important;
text-align: center !important;
}
.vastori-listing-bar__filters {
flex-wrap: wrap !important;
gap: 14px 18px !important;
justify-content: center !important;
}
.vastori-listing-bar__sort { justify-self: center !important; }
.vastori-filter-dropdown__btn,
.vastori-sort-dropdown__btn { font-size: 13px !important; }
/* Sort panel: anchor centered like the filter panels */
.vastori-sort-dropdown__panel {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
transform: translate(-50%, -50%) !important;
width: calc(100vw - 48px) !important;
max-width: 320px !important;
z-index: 9300 !important;
}
/* --- Listing header: tighter on phones --- */
.vastori-listing-header { padding: 0 16px !important; }
.vastori-listing-header__title { font-size: clamp(26px, 8vw, 34px) !important; }
.vastori-listing-header__desc { font-size: 14px !important; }
/* --- Product card: ensure tap targets + badge fit --- */
ul.products li.product .vastori-card-plus,
ul.products li.product .tinvwl_add_to_wishlist_button {
width: 40px !important;
height: 40px !important;
}
ul.products li.product .vastori-card-badge {
top: 8px !important;
left: 8px !important;
font-size: 9px !important;
padding: 5px 9px !important;
}
/* --- Single product: gallery + summary full width, no clipping --- */
body.single-product div.product {
display: block !important;
}
body.single-product .woocommerce-product-gallery,
body.single-product .summary.entry-summary {
width: 100% !important;
float: none !important;
margin: 0 0 24px !important;
}
body.single-product .vastori-pp-cols {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* --- Size pills + qty controls: comfortable tap size --- */
form.cart ul.variable-items-wrapper li.variable-item.button-variable-item {
min-width: 48px !important;
height: 48px !important;
}
.vastori-qty-controls a.botiga-quantity-minus,
.vastori-qty-controls a.botiga-quantity-plus {
width: 44px !important;
height: 48px !important;
}
.vastori-qty-controls input.qty,
.vastori-qty-controls input[type="number"] {
height: 48px !important;
line-height: 48px !important;
}
/* --- Footer: single column, centered --- */
body .vastori-footer-cols,
body .site-footer .vastori-footer-cols {
grid-template-columns: 1fr !important;
gap: 28px !important;
text-align: center !important;
}
/* --- Search panel: full-width, no side clip --- */
.vastori-search-panel__inner { padding-left: 16px !important; padding-right: 16px !important; }
/* --- Reviews form fields: full width --- */
body.single-product .vastori-reviews__form { padding-left: 0 !important; padding-right: 0 !important; }
/* --- Sub-cat tiles: 2-up reads better than 3 on small phones --- */
.vastori-subcat-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
max-width: 360px !important;
}
}
/* Tablet (601–900px): listing grid 2-up already; keep filter panel
from overflowing the viewport. */
@media (min-width: 601px) and (max-width: 900px) {
.vastori-filter-dropdown__panel {
min-width: 0 !important;
width: calc(100vw - 64px) !important;
max-width: 560px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
/* ============================================================
v0.9.46 — Dynamic homepage sections
============================================================ */
.vastori-home-section {
max-width: 1280px;
margin: 0 auto;
padding: 64px 24px;
border-top: 0.5px solid var(--vastori-hairline);
text-align: center;
}
.vastori-home-section__title {
font-family: var(--vastori-font-serif);
font-size: clamp(28px, 3.4vw, 40px);
font-weight: 400;
color: var(--vastori-ink);
margin: 0 0 10px;
line-height: 1.15;
}
.vastori-home-section__sub {
font-family: var(--vastori-font-sans);
font-size: 15px;
color: var(--vastori-ink-soft);
margin: 0 0 40px;
}
.vastori-home-section__cta {
margin: 36px 0 0;
}
.vastori-home-section__cta a {
font-family: var(--vastori-font-sans);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--vastori-ink);
text-decoration: underline;
text-underline-offset: 5px;
}
.vastori-home-section__cta a:hover { color: var(--vastori-ink-soft); }
/* Category tiles row */
.vastori-home-cats__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.vastori-home-cat {
display: block;
text-decoration: none;
color: var(--vastori-ink);
position: relative;
}
.vastori-home-cat__img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
background-color: #F3F1ED;
background-size: cover;
background-position: center;
margin-bottom: 16px;
transition: transform 0.5s var(--vastori-ease);
}
.vastori-home-cat:hover .vastori-home-cat__img { transform: scale(1.02); }
.vastori-home-cat__name {
display: block;
font-family: var(--vastori-font-serif);
font-size: 20px;
color: var(--vastori-ink);
line-height: 1.2;
}
.vastori-home-cat__count {
display: block;
font-family: var(--vastori-font-sans);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--vastori-muted);
margin-top: 4px;
}
/* Home product grids reuse ul.products card styling, but center the
shortcode output and constrain to 4-up. */
.vastori-home-section ul.products {
padding: 0 !important;
margin: 0 auto !important;
}
.vastori-home-section ul.products,
.vastori-home-new ul.products,
.vastori-home-sale ul.products {
grid-template-columns: repeat(4, 1fr) !important;
gap: 28px 20px !important;
}
@media (max-width: 900px) {
.vastori-home-section ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
.vastori-home-cats__grid { gap: 14px; }
.vastori-home-cat__name { font-size: 17px; }
}
@media (max-width: 600px) {
.vastori-home-section { padding: 40px 16px; }
.vastori-home-cats__grid { grid-template-columns: 1fr; gap: 20px; max-width: 360px; margin: 0 auto; }
.vastori-home-section ul.products { grid-template-columns: 1fr !important; }
}
/* ============================================================
v0.9.48 — Clean product cards: hide ALL in-card button chrome
so each card is image + title + price only (with the + and heart
as icon overlays). Removes the stacked "Add to bag / Quick View /
Add to Wishlist" text rows that read as a duplicate entry below
each product. Descendant selectors (not >) so it catches YITH's
button + Botiga's loop-button-wrap wherever they sit. */
ul.products li.product .loop-button-wrap,
ul.products li.product .add_to_cart_button,
ul.products li.product .added_to_cart,
ul.products li.product a.button.product_type_simple,
ul.products li.product a.button.product_type_variable,
ul.products li.product a.yith-wcqv-button:not(.vastori-card-plus),
ul.products li.product .yith-wcqv-button:not(.vastori-card-plus),
ul.products li.product .botiga-quick-view,
ul.products li.product .botiga-product-add-to-cart-link {
display: none !important;
}
/* The TI wishlist text spans must never show as text in the card */
ul.products li.product .tinvwl_add_to_wishlist-text,
ul.products li.product .tinvwl_remove_from_wishlist-text,
ul.products li.product .tinvwl-tooltip {
position: absolute !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
}
/* ============================================================
v0.9.52 — Homepage dedup + block-cart/checkout brand styling
============================================================ */
/* Homepage: hide the two STATIC sections whose concept is now
covered by the live dynamic sections (Shop by Category replaces
"Edits", New Arrivals replaces the static "Just landed"). Keeps
the unique editorial sections (story, instagram, trust badges). */
body.home .vastori-featured-collections,
body.home .vastori-featured-products {
display: none !important;
}
/* ---- WooCommerce BLOCK Cart + Checkout brand styling ---- */
/* Primary buttons (Proceed to Checkout / Place Order) → forest green */
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container a,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wc-block-checkout__actions_row .wc-block-components-button.contained,
.wc-block-components-button.wc-block-components-button.contained {
background-color: var(--vastori-ink) !important;
background: var(--vastori-ink) !important;
color: #FFFFFF !important;
border: 1px solid var(--vastori-ink) !important;
border-radius: 0 !important;
font-family: var(--vastori-font-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
box-shadow: none !important;
transition: background 0.25s var(--vastori-ease), color 0.25s var(--vastori-ease) !important;
}
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover {
background-color: var(--vastori-ink-soft) !important;
background: var(--vastori-ink-soft) !important;
color: #FFFFFF !important;
}
.wc-block-components-button.contained .wc-block-components-button__text {
color: #FFFFFF !important;
}
/* Quantity selector → clean outlined unit (was grey filled) */
.wc-block-components-quantity-selector {
border: 1px solid var(--vastori-line) !important;
border-radius: 0 !important;
background: var(--vastori-surface) !important;
max-width: 120px !important;
}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__button--minus,
.wc-block-components-quantity-selector__button--plus,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
background: transparent !important;
background-color: transparent !important;
color: var(--vastori-ink) !important;
fill: var(--vastori-ink) !important;
border: 0 !important;
font-size: 16px !important;
line-height: 1 !important;
transition: background 0.15s var(--vastori-ease) !important;
}
.wc-block-components-quantity-selector__button svg,
.wc-block-components-quantity-selector__button path {
fill: var(--vastori-ink) !important;
color: var(--vastori-ink) !important;
}
.wc-block-components-quantity-selector__button:hover {
background: var(--vastori-sand-soft) !important;
background-color: var(--vastori-sand-soft) !important;
color: var(--vastori-ink) !important;
}
.wc-block-components-quantity-selector__input {
background: transparent !important;
color: var(--vastori-ink) !important;
font-family: var(--vastori-font-sans) !important;
font-size: 13px !important;
}
/* Cart/checkout headings + totals in brand type */
.wp-block-woocommerce-cart .wc-block-cart-items__header,
.wp-block-woocommerce-checkout .wc-block-components-title,
.wc-block-components-order-summary__title {
font-family: var(--vastori-font-sans) !important;
letter-spacing: 0.06em !important;
color: var(--vastori-ink) !important;
}
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label {
font-family: var(--vastori-font-sans) !important;
color: var(--vastori-ink) !important;
}
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value {
color: var(--vastori-ink) !important;
}
/* Product titles in cart/checkout → serif */
.wc-block-cart-item__product-name,
.wc-block-components-product-name,
.wc-block-cart-items__row .wc-block-components-product-name {
font-family: var(--vastori-font-serif) !important;
font-size: 16px !important;
color: var(--vastori-ink) !important;
}
/* Remove-item link */
.wc-block-cart-item__remove-link {
color: var(--vastori-muted) !important;
text-underline-offset: 3px !important;
}
/* Coupon + form inputs */
.wp-block-woocommerce-cart input.wc-block-components-text-input__input,
.wp-block-woocommerce-checkout input.wc-block-components-text-input__input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wc-block-components-text-input input {
border-radius: 0 !important;
border-color: var(--vastori-line) !important;
}
/* Order summary card border */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
border-radius: 0 !important;
}
/* v0.9.54 — Colour filter swatch dot */
.vastori-filter-dropdown__swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid var(--vastori-line);
margin-right: 8px;
vertical-align: middle;
flex-shrink: 0;
}
.vastori-filter-dropdown__item label {
align-items: center;
}
/* v0.9.55 — Single product page colour row (toa.st-style) */
body.single-product .vastori-colour-row {
margin: 18px 0 4px;
font-family: var(--vastori-font-sans);
}
body.single-product .vastori-colour-row__label {
display: block;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--vastori-muted);
margin-bottom: 10px;
}
body.single-product .vastori-colour-row__name {
color: var(--vastori-ink);
font-weight: 500;
}
body.single-product .vastori-colour-row__swatches {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
}
body.single-product .vastori-colour-swatch {
display: inline-block;
width: 34px;
height: 34px;
border-radius: 0;
border: 1px solid var(--vastori-line) !important;
box-shadow: inset 0 0 0 2px #fff;
cursor: pointer;
/* button reset — these are