/* ========================================================================== Generic Medicine Online – redesign.css (September 2026) The pista-green redesign. Loaded last, after components.css and woocommerce.css, so it wins over both. Everything is plain CSS on the tokens in variables.css: hsl(var(--primary)) deep green #21884E buttons, links hsl(var(--secondary)) dark green #0F3D2B dark text accents (top bar, title bands and footer use --primary since 13 Sep 2026) hsl(var(--accent)) pista #93C572 badges, highlights hsl(var(--muted)) pista tint #EEF6E8 section backgrounds hsl(var(--border)) soft pista #D5E5CC every border Client rules baked in here: no shadows (borders only), every button 40-42 px, section headings 32 px (24 px on phones), the same space between all sections, 4 products per row. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Global rules -------------------------------------------------------------------------- */ /* the precompiled .container had no side padding, so content touched the screen edge */ .container { padding-left: 1rem; padding-right: 1rem } @media (min-width: 1024px) { .container { padding-left: 1.5rem; padding-right: 1.5rem } } .text-32 { font-size: 32px; line-height: 1.2 } @media (max-width: 767px) { .text-32 { font-size: 24px } } /* no shadows anywhere; the product-card hover lift in components.css is the one exception */ .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-md:hover, .hover\:shadow-lg:hover, [role="menu"], [role="dialog"], [data-toast-list] li { box-shadow: none !important } /* one button height for the whole site */ .btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .wp-element-button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout #payment #place_order, .single_add_to_cart_button, .h-42, .h-44 { height: var(--btn-h) !important } /* "View All" and other quiet buttons: pista background, green text */ .btn--pista { background-color: hsl(var(--accent) / .28); border: 1px solid hsl(var(--accent)); color: hsl(var(--primary)); font-weight: 600 } .btn--pista:hover { background-color: hsl(var(--accent) / .5); color: hsl(var(--secondary)) } .btn--white { background-color: #fff; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)) } .btn--white:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)) } .btn--outline-primary { border-color: hsl(var(--primary) / .5) } /* cart badge was emerald - now the brand green */ [data-cart-badge], .hdr__badge { background-color: hsl(var(--primary)) !important } /* sections: one rhythm everywhere */ .section { padding-top: var(--section-y); padding-bottom: var(--section-y) } .section--muted { background-color: hsl(var(--muted) / .55) } .section--tint { background-color: hsl(var(--muted)) } .section--line { border-top: 1px solid hsl(var(--border)) } .section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem } .section__head--center { flex-direction: column; text-align: center; gap: .25rem } .section__title { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)); margin: 0 } .section__sub { margin: .5rem auto 0; max-width: 42rem; color: hsl(var(--muted-foreground)); font-size: .9375rem } @media (max-width: 767px) { .section { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile) } .section__title { font-size: 24px } .section__head { margin-bottom: 1rem } .section__sub { font-size: .875rem } } /* a grid that is always 4 across on desktop */ .grid-4 { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)) } @media (min-width: 768px) { .grid-4 { gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 1024px) { .grid-4 { gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)) } } .product-card__media { background-color: #fff } .product-card__form { background-color: hsl(var(--accent) / .3); color: hsl(var(--primary)) } /* wishlist plugin button drawn like the design's heart. The plugin's own CSS (.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt) forces an 18px box with a 20px glyph shifted out of it, so the rules below are as specific and use !important. */ .product-card .tinv-wraper { position: absolute; right: .5rem; top: .5rem; z-index: 10; margin: 0; width: auto; line-height: 1 } .tinv-wraper .tinv-wishlist-clear, .tinv-wraper .tinvwl-tooltip { display: none !important } .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt, .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button { position: relative; display: flex !important; width: 2.25rem !important; height: 2.25rem !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #fff !important; color: hsl(var(--muted-foreground)) !important; font-size: 0; line-height: 1; vertical-align: top !important; transition: color .15s, border-color .15s, background-color .15s; } .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt::before, .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button::before, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt::before, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button::before { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; font-size: 16px !important; line-height: 1 !important; vertical-align: top !important; } .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button:hover, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button:hover { border-color: hsl(var(--primary) / .6); color: hsl(var(--primary)) !important; background: hsl(var(--muted)) !important } .product-card .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list, .pdp .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-product-in-list { border-color: hsl(var(--destructive) / .5); color: hsl(var(--destructive)) !important } .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text { display: none } /* -------------------------------------------------------------------------- 2. Header -------------------------------------------------------------------------- */ .hdr { position: sticky; top: -40px; z-index: 50; width: 100%; background: #fff; border-bottom: 1px solid hsl(var(--border)) } .topbar { background-color: hsl(var(--secondary)); color: #fff } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; font-size: .8125rem } .topbar__promos { display: none; align-items: center; gap: .875rem } .topbar__promo { display: flex; align-items: center; gap: .5rem; white-space: nowrap; color: rgba(255, 255, 255, .9) } .topbar__promo svg { width: 16px; height: 16px; color: hsl(var(--accent)) } .topbar__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .25) } .topbar__contact { display: flex; align-items: center; gap: 1rem; margin-left: auto } .topbar__contact a { display: flex; align-items: center; gap: .4rem; color: #fff; text-decoration: none; white-space: nowrap } .topbar__contact a:hover { color: hsl(var(--accent)) } .topbar__contact svg { width: 15px; height: 15px; color: hsl(var(--accent)) } .topbar__mobile { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; color: rgba(255, 255, 255, .9) } .topbar__mobile svg { width: 15px; height: 15px; color: hsl(var(--accent)) } @media (min-width: 768px) { .topbar__promos { display: flex } .topbar__mobile { display: none } } @media (max-width: 767px) { .topbar__contact { display: none } } .hdr__row { display: flex; align-items: center; gap: .5rem; padding: .625rem 0 } .hdr__burger { display: flex; width: 42px; height: 42px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid hsl(var(--border)); background: #fff; color: hsl(var(--foreground)); cursor: pointer } .hdr__burger svg { width: 22px; height: 22px } .hdr__logo { display: flex; flex-shrink: 0; align-items: center } .hdr__logo img { height: 40px; width: auto; max-width: 150px; object-fit: contain } .hdr__search { position: relative; display: none; flex: 1 1 auto; min-width: 0; max-width: 700px; margin: 0 auto } .hdr__search--mobile { display: block; max-width: none } .search { display: flex; width: 100%; align-items: stretch; height: var(--btn-h); border: 1px solid hsl(var(--border)); border-radius: .5rem; overflow: hidden; background: #fff } .search:focus-within { border-color: hsl(var(--primary)) } .search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0 .875rem; font: inherit; font-size: .875rem; color: hsl(var(--foreground)); outline: none } .search__input::placeholder { color: hsl(var(--muted-foreground)) } .search__btn { display: flex; width: 48px; flex-shrink: 0; align-items: center; justify-content: center; border: 0; background: hsl(var(--primary)); color: #fff; cursor: pointer } .search__btn:hover { background: hsl(var(--primary) / .9) } .search__btn svg { width: 18px; height: 18px } [data-mobile-search] { padding: 0 } [data-mobile-search].mt-2 { padding-bottom: .5rem } .hdr__icons { display: none; align-items: center; gap: .125rem; margin-left: auto; flex-shrink: 0 } .hdr__icon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; height: 50px; padding: 0 .5rem; border-radius: .5rem; color: hsl(var(--foreground)); text-decoration: none; font-size: 11px; font-weight: 500; line-height: 1 } .hdr__icon svg { width: 22px; height: 22px } .hdr__icon:hover { background: hsl(var(--muted)); color: hsl(var(--primary)) } .hdr__badge { position: absolute; top: 1px; right: 8px; display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: 9999px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1 } .hdr__mobile { display: flex; align-items: center; gap: .125rem; margin-left: auto; flex-shrink: 0 } .hdr__mbtn { position: relative; display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 0; border-radius: .5rem; background: transparent; color: hsl(var(--foreground)); cursor: pointer; text-decoration: none } .hdr__mbtn svg { width: 22px; height: 22px } .hdr__mbtn .hdr__badge { top: 2px; right: 0 } @media (min-width: 768px) { .hdr__row { gap: 1.5rem; padding: .875rem 0 } .hdr__burger { display: none } .hdr__logo img { height: 48px; max-width: none } .hdr__search { display: block } .hdr__mbtn--search { display: none } } @media (min-width: 1024px) { .hdr__icons { display: flex } .hdr__mobile { display: none } } /* menu row */ .nav { display: none; border-top: 1px solid hsl(var(--border)) } .nav__list { display: flex; align-items: center; justify-content: center; gap: .125rem; list-style: none; margin: 0; padding: 0 } .nav__item { display: flex; align-items: center } .nav__link { display: inline-flex; align-items: center; gap: .375rem; padding: .8125rem .875rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; color: hsl(var(--foreground)); text-decoration: none; transition: color .15s, background-color .15s } .nav__link:hover { color: hsl(var(--primary)); background: hsl(var(--muted)) } .nav__link.is-active, .nav__link[aria-current="page"] { color: hsl(var(--primary)) } /* no underline bar */ .nav__dd { display: inline-flex; width: 28px; height: 28px; margin-left: -.5rem; align-items: center; justify-content: center; border: 0; border-radius: .375rem; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer } .nav__dd:hover, .nav__dd[aria-expanded="true"] { color: hsl(var(--primary)); background: hsl(var(--muted)) } .nav__dd svg { width: 16px; height: 16px; transition: transform .2s } .nav__dd[aria-expanded="true"] svg { transform: rotate(180deg) } @media (min-width: 768px) { .nav { display: block } } /* categories drop-down: two columns, no scrollbar */ .cat-menu { width: min(560px, calc(100vw - 16px)) !important; padding: .75rem !important; overflow: hidden !important; border-color: hsl(var(--border)) !important } .cat-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem .5rem } .cat-menu__item { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: .5rem; font-size: .875rem; color: hsl(var(--foreground)); text-decoration: none; outline: none; cursor: pointer } .cat-menu__item:hover, .cat-menu__item:focus { background: hsl(var(--muted)); color: hsl(var(--primary)) } .cat-menu__icon { display: flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .5rem; background: hsl(var(--muted)) } .cat-menu__icon > * { width: 18px; height: 18px } .cat-menu__name { flex: 1; min-width: 0 } .cat-menu__count { margin-left: auto; font-size: .75rem; color: hsl(var(--muted-foreground)) } .cat-menu__all { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .5rem; padding: .625rem; border-top: 1px solid hsl(var(--border)); font-size: .875rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: none } .cat-menu__all:hover { text-decoration: underline } /* mobile drawer content */ .drawer__nav { display: flex; flex-direction: column; gap: .125rem; margin-top: 1.5rem } .drawer__link { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .5rem; font-weight: 500; color: hsl(var(--foreground)); text-decoration: none; background: transparent; border: 0; text-align: left; font: inherit; cursor: pointer } .drawer__link:hover { background: hsl(var(--muted)); color: hsl(var(--primary)) } .drawer__link svg { width: 18px; height: 18px; color: hsl(var(--primary)); flex-shrink: 0 } .drawer__cats { border: 0; margin-top: .25rem } .drawer__cats summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: .625rem .75rem; border-radius: .5rem; font-weight: 500; cursor: pointer } .drawer__cats summary::-webkit-details-marker { display: none } .drawer__cats summary::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: .25rem } .drawer__cats[open] summary::after { transform: rotate(-135deg) } .drawer__cats a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem .5rem 1.25rem; font-size: .875rem; color: hsl(var(--foreground)); text-decoration: none; border-radius: .5rem } .drawer__cats a:hover { background: hsl(var(--muted)) } .drawer__cats a span:last-child { font-size: .75rem; color: hsl(var(--muted-foreground)) } .drawer__title { padding: 1rem .75rem .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)) } .drawer__contact { margin-top: .75rem; border-top: 1px solid hsl(var(--border)); padding-top: .75rem; display: flex; flex-direction: column; gap: .125rem } /* live search suggestions */ .search-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: .375rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; overflow: hidden } .search-box__item { display: flex; width: 100%; align-items: center; gap: .75rem; padding: .625rem .875rem; border: 0; border-bottom: 1px solid hsl(var(--border)); background: #fff; text-align: left; font: inherit; cursor: pointer } .search-box__item:last-child { border-bottom: 0 } .search-box__item:hover, .search-box__item.is-active { background: hsl(var(--muted)) } .search-box__img { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid hsl(var(--border)); border-radius: .5rem; object-fit: contain; background: #fff } .search-box__name { font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)) } .search-box__price { margin-left: auto; font-size: .875rem; font-weight: 600; color: hsl(var(--primary)); white-space: nowrap } .search-box__empty { padding: 1rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)) } /* -------------------------------------------------------------------------- 3. Home page -------------------------------------------------------------------------- */ .hero-banner { display: block; line-height: 0; background: hsl(var(--muted)) } .hero-banner__link { display: block } .hero-banner__img { display: block; width: 100%; height: auto } .cat-grid { display: grid; gap: .625rem; grid-template-columns: repeat(3, minmax(0, 1fr)) } @media (min-width: 640px) { .cat-grid { gap: .875rem; grid-template-columns: repeat(4, minmax(0, 1fr)) } } @media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) } } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; text-align: center; text-decoration: none; color: hsl(var(--foreground)); transition: border-color .15s, background-color .15s } .cat-tile:hover { border-color: hsl(var(--primary)); background: hsl(var(--muted) / .6) } .cat-tile__icon { display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 1rem; background: hsl(var(--muted)) } .cat-tile__icon > * { width: 34px; height: 34px } .cat-tile__name { font-size: .75rem; font-weight: 600; line-height: 1.3 } .cat-tile__more { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 500; color: hsl(var(--primary)) } .cat-tile__more svg { width: 12px; height: 12px } @media (min-width: 640px) { .cat-tile__name { font-size: .8125rem } } .why-grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr } @media (min-width: 768px) { .why-grid { gap: 1.25rem; grid-template-columns: repeat(3, 1fr) } } @media (min-width: 1280px) { .why-grid { grid-template-columns: repeat(6, 1fr) } } .why-card { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1.25rem 1rem; text-align: center } .why-card__icon { margin: 0 auto 1rem; display: flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--muted)) } .why-card__icon svg { width: 32px; height: 32px } .why-card__title { font-size: .9375rem; font-weight: 700; color: hsl(var(--foreground)) } .why-card__text { margin-top: .5rem; font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)) } .review-summary { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1rem; font-size: .9375rem } .review-summary .stars { display: inline-flex; gap: 2px } .review-card { display: flex; flex-direction: column; height: 100%; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1.25rem } .review-card__stars { display: flex; gap: 2px } .review-card__text { margin: .75rem 0 0; flex: 1; font-size: .875rem; line-height: 1.55; color: hsl(var(--foreground)) } .review-card__foot { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; border-top: 1px solid hsl(var(--border)); padding-top: .875rem } .review-card__avatar { display: flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--secondary)); color: #fff; font-weight: 700 } .review-card__name { display: block; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)) } .review-card__meta { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)) } .review-card__meta a { color: inherit } .review-card__verified { margin-left: auto; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--primary)) } .review-empty { max-width: 40rem; margin: 0 auto; border: 1px dashed hsl(var(--border)); border-radius: .75rem; padding: 2rem 1.25rem; text-align: center; color: hsl(var(--muted-foreground)); font-size: .9375rem } .review-cta { margin-top: 2rem; text-align: center } .review-cta p { margin-bottom: 1rem; color: hsl(var(--muted-foreground)) } .post-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s } .post-card:hover { border-color: hsl(var(--primary)) } .post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: hsl(var(--muted)) } .post-card__media img { width: 100%; height: 100%; object-fit: cover } .post-card__body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem } .post-card__cat { display: inline-flex; width: fit-content; border-radius: 9999px; background: hsl(var(--accent) / .3); padding: .125rem .625rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--primary)) } .post-card__title { margin: 0; font-size: .9375rem; font-weight: 700; line-height: 1.35; color: hsl(var(--foreground)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .post-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; color: hsl(var(--primary)) } .post-card__more svg { width: 14px; height: 14px } /* -------------------------------------------------------------------------- 4. FAQ accordion (home, category, product, FAQs page) -------------------------------------------------------------------------- */ .faq { display: grid; gap: .625rem; max-width: 56rem; margin: 0 auto } .faq__item { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; overflow: hidden } .faq__item[open] { border-color: hsl(var(--primary) / .6) } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1.125rem; cursor: pointer; list-style: none; font-size: .9375rem; font-weight: 600; color: hsl(var(--foreground)) } .faq__q::-webkit-details-marker { display: none } .faq__q::after { content: ""; flex-shrink: 0; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 2px solid hsl(var(--primary)); border-bottom: 2px solid hsl(var(--primary)); transform: rotate(45deg); transition: transform .2s } .faq__item[open] .faq__q::after { transform: rotate(-135deg) } .faq__a { padding: 0 1.125rem 1rem; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)) } .faq__a p { margin: 0 0 .5rem } /* -------------------------------------------------------------------------- 5. Shop / category pages -------------------------------------------------------------------------- */ .cat-banner { display: grid; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--pista-tint)) 100%); padding: 1.5rem } .cat-banner__title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)) } .cat-banner__text { margin: .75rem 0 0; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)) } .cat-banner__more { display: inline-flex; margin-top: .75rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 3px } .cat-banner__media { display: flex; align-items: center; justify-content: center } .cat-banner__media img { max-height: 150px; width: auto; object-fit: contain } .cat-banner__icon { position: relative; display: flex; width: 120px; height: 120px; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #fff } .cat-banner__icon::before, .cat-banner__icon::after { content: ""; position: absolute; border-radius: 9999px; pointer-events: none } .cat-banner__icon::before { inset: -11px; border: 2px dashed hsl(var(--primary) / .35) } .cat-banner__icon::after { inset: -22px; border: 1px solid hsl(var(--border)) } .cat-banner__icon > * { width: 64px; height: 64px } @media (max-width: 767px) { .cat-banner__media { order: -1 } } @media (min-width: 768px) { .cat-banner { grid-template-columns: 1.4fr 1fr; gap: 2rem; padding: 2rem 2.5rem } .cat-banner__title { font-size: 2.25rem } .cat-banner__media img { max-height: 240px } .cat-banner__icon { width: 160px; height: 160px } .cat-banner__icon::before { inset: -13px } .cat-banner__icon::after { inset: -26px } .cat-banner__icon > * { width: 88px; height: 88px } } .shop-layout { display: grid; gap: 1.5rem } .shop-sidebar { display: none } .shop-sidebar__box { position: sticky; top: 120px; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1rem } .shop-sidebar__title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 700; color: hsl(var(--foreground)) } .shop-sidebar__list { display: grid; gap: .125rem; list-style: none; margin: 0; padding: 0 } .shop-sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .625rem; border-radius: .5rem; font-size: .875rem; color: hsl(var(--foreground)); text-decoration: none } .shop-sidebar__link:hover { background: hsl(var(--muted)) } .shop-sidebar__link.is-active { background: hsl(var(--primary)); color: #fff } .shop-sidebar__link.is-active .shop-sidebar__count { color: rgba(255, 255, 255, .8) } .shop-sidebar__name { display: flex; min-width: 0; align-items: center; gap: .5rem } .shop-sidebar__name > :first-child { width: 18px; height: 18px; flex-shrink: 0 } .shop-sidebar__link.is-active .shop-sidebar__name > :first-child { background: #fff; border-radius: 4px; padding: 2px; box-sizing: border-box } /* a white chip: the icons are pictures, so no colour filter */ .shop-sidebar__count { font-size: .75rem; color: hsl(var(--muted-foreground)) } .shop-sidebar__child .shop-sidebar__link { padding-left: 1.75rem } .shop-sidebar__child .shop-sidebar__link::before { content: ""; position: absolute; } @media (min-width: 1024px) { .shop-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 2rem } .shop-sidebar { display: block } } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem } .shop-toolbar__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: hsl(var(--foreground)) } .shop-toolbar__count { display: block; margin-top: .125rem; font-size: .8125rem; color: hsl(var(--muted-foreground)) } .shop-toolbar select { height: var(--btn-h); min-width: 150px; appearance: none; -webkit-appearance: none; border: 1px solid hsl(var(--border)); border-radius: .5rem; padding: 0 2rem 0 .75rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B6357' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .625rem center; background-size: 12px; font: inherit; font-size: .875rem; color: hsl(var(--foreground)) } ul.products.product-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0 } @media (min-width: 768px) { ul.products.product-grid { gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media (min-width: 1280px) { ul.products.product-grid { gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)) } } .shop-empty { border: 1px dashed hsl(var(--border)); border-radius: .75rem; padding: 2rem; text-align: center; color: hsl(var(--muted-foreground)) } .shop-count { margin: 1.5rem 0 .75rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)) } .shop-desc { border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5) } .shop-desc__body { max-width: 64rem; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)) } .shop-desc__body h2, .shop-desc__body h3, .shop-desc__body h4 { margin: 1.25rem 0 .5rem; color: hsl(var(--foreground)); font-weight: 700 } .shop-desc__body h2 { font-size: 1.375rem } .shop-desc__body h3 { font-size: 1.125rem } .shop-desc__body p { margin: 0 0 .875rem } .shop-desc__body ul, .shop-desc__body ol { margin: 0 0 .875rem; padding-left: 1.25rem } /* -------------------------------------------------------------------------- 6. Product page -------------------------------------------------------------------------- */ .pdp { display: grid; gap: 1.5rem } @media (min-width: 1024px) { .pdp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start } } .pdp__gallery { min-width: 0 } .pdp__main { display: flex; aspect-ratio: 1 / 1; max-height: 520px; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1rem } .pdp__main img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain } .pdp__thumbs { display: flex; gap: .75rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem } .pdp__thumb { display: flex; flex: 0 0 80px; width: 80px; height: 80px; align-items: center; justify-content: center; border: 2px solid hsl(var(--border)); border-radius: .625rem; background: #fff; padding: .375rem; cursor: pointer } .pdp__thumb img { max-width: 100%; max-height: 100%; object-fit: contain } .pdp__thumb.is-active { border-color: hsl(var(--primary)) } .pdp__buy { min-width: 0 } .pdp__title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: hsl(var(--foreground)) } .pdp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem } .pdp__rating { margin-top: .5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: hsl(var(--primary)); text-decoration: none } .pdp__rating .stars { display: inline-flex; gap: 1px } .pdp__rating:hover span:last-child { text-decoration: underline } .pdp__short { margin: .875rem 0 0; font-size: .9375rem; line-height: 1.6; color: hsl(var(--muted-foreground)) } .pdp__meta { margin: .5rem 0 0; font-size: .8125rem; color: hsl(var(--muted-foreground)) } .pdp__meta b { font-weight: 600; color: hsl(var(--foreground)) } .dosage { margin-top: 1.25rem } .dosage__label { margin-bottom: .5rem; font-size: .9375rem; font-weight: 600; color: hsl(var(--foreground)) } .dosage__list { display: flex; flex-wrap: wrap; gap: .5rem } .dosage__btn { display: inline-flex; height: 40px; align-items: center; justify-content: center; padding: 0 1rem; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: hsl(var(--muted)); font-size: .875rem; font-weight: 600; color: hsl(var(--primary)); text-decoration: none } .dosage__btn:hover { border-color: hsl(var(--primary)) } .dosage__btn.is-active { border: 2px solid hsl(var(--primary)); background: #fff; color: hsl(var(--secondary)) } .pack-table { width: 100%; margin-top: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .9375rem } .pack-table th { padding: .75rem .875rem; background: hsl(var(--muted)); font-size: .8125rem; font-weight: 600; text-align: left; color: hsl(var(--foreground)) } .pack-table td { padding: .75rem .875rem; border-top: 1px solid hsl(var(--border)); vertical-align: middle } .pack-table__row.is-best td { background: hsl(var(--accent) / .18) } .pack-table__size { font-weight: 600; white-space: nowrap } .pack-table__best { display: inline-block; margin-left: .5rem; border-radius: 9999px; background: hsl(var(--primary)); padding: .125rem .5rem; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; vertical-align: middle } .pack-table__select { height: 36px; border: 1px solid hsl(var(--border)); border-radius: .375rem; padding: 0 .5rem; background: #fff; font: inherit; font-size: .875rem } .pack-table__price { font-weight: 700; white-space: nowrap } .pack-table__price del { margin-right: .25rem; font-weight: 400; color: hsl(var(--muted-foreground)) } .pack-table__unit { white-space: nowrap; color: hsl(var(--muted-foreground)) } .pack-table__add { height: 40px !important; padding: 0 1rem; white-space: nowrap } .pack-table__add.is-added { background-color: hsl(var(--secondary)) } .pack-table__oos { font-size: .8125rem; font-weight: 600; color: hsl(var(--destructive)) } @media (max-width: 639px) { .pack-table th:nth-child(5), .pack-table td:nth-child(5) { display: none } .pack-table th, .pack-table td { padding: .625rem .5rem } .pack-table__add { padding: 0 .75rem; font-size: .8125rem } .pack-table__best { display: block; margin: .25rem 0 0; width: fit-content } } .pdp__note { margin-top: .875rem; display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; color: hsl(var(--primary)) } .pdp__note svg { width: 18px; height: 18px; flex-shrink: 0 } .pdp__stock { margin-top: .75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .875rem; color: hsl(var(--muted-foreground)) } .pdp__stock b { color: hsl(var(--foreground)) } .pdp__stock .in { font-weight: 700; color: hsl(var(--primary)) } .pdp__stock .out { font-weight: 700; color: hsl(var(--destructive)) } .pdp-help { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--muted) / .6); padding: 1rem } .pdp-help__icon { display: flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #fff; color: hsl(var(--primary)) } .pdp-help__icon svg { width: 22px; height: 22px } .pdp-help__text { font-size: .875rem; color: hsl(var(--muted-foreground)) } .pdp-help__title { font-size: .9375rem; font-weight: 700; color: hsl(var(--foreground)) } .pdp-help__text { font-size: .875rem; color: hsl(var(--muted-foreground)) } .pdp-help__text a { font-weight: 600; color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px } .how-order { margin-top: var(--section-y); border: 1px solid hsl(var(--border)); border-radius: 1rem; background: hsl(var(--muted)); padding: 1.25rem } .how-order__title { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 700; color: hsl(var(--foreground)) } .how-order__grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr } .how-order__step { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1rem } .how-order__num { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--primary)); color: #fff; font-size: .9375rem; font-weight: 700 } .how-order__step h3 { margin: .625rem 0 .25rem; font-size: .9375rem; font-weight: 700; color: hsl(var(--foreground)) } .how-order__step p { margin: 0; font-size: .8125rem; line-height: 1.5; color: hsl(var(--muted-foreground)) } @media (min-width: 768px) { .how-order { padding: 2rem } .how-order__title { font-size: 1.5rem } } @media (min-width: 1024px) { .how-order__grid { gap: 1.25rem; grid-template-columns: repeat(4, 1fr) } } .pdp-section { margin-top: var(--section-y) } .pdp-section__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)) } @media (min-width: 768px) { .pdp-section__title { font-size: 1.75rem } } .pdp-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem } .pdp-chip { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: #fff; padding: .375rem .75rem; font-size: .8125rem; color: hsl(var(--foreground)); text-decoration: none } .pdp-chip b { font-weight: 600; color: hsl(var(--primary)) } .pdp-fold { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1.25rem } .pdp-fold + .pdp-fold { margin-top: 1rem } .pdp-fold > h4 { display: flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 700; color: hsl(var(--primary)) } .pdp-fold > h4::before { content: ""; width: 5px; height: 22px; flex-shrink: 0; border-radius: 9999px; background: hsl(var(--primary)) } .pdp-fold__body { font-size: .9375rem; line-height: 1.65; color: hsl(var(--muted-foreground)) } .pdp-fold__body p { margin: 0 0 .75rem } .pdp-fold__body ul, .pdp-fold__body ol { margin: 0 0 .75rem; padding-left: 1.25rem } .pdp-fold__body h5 { margin: .75rem 0 .25rem; font-weight: 700; color: hsl(var(--foreground)) } .pdp-reviewer { display: flex; align-items: center; gap: 1rem } .pdp-reviewer__avatar { display: flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--primary)); color: #fff; font-size: 1.125rem; font-weight: 700 } .pdp-disclaimer { margin-top: var(--section-y); border: 1px solid hsl(var(--warning) / .5); border-left: 4px solid hsl(var(--warning)); border-radius: .75rem; background: hsl(var(--warning) / .08); padding: 1.25rem; font-size: .875rem; line-height: 1.6; color: hsl(var(--muted-foreground)) } .pdp-disclaimer h3 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: hsl(var(--foreground)) } .pdp-disclaimer p { margin: 0 0 .5rem } .pdp-disclaimer a { font-weight: 600; color: hsl(var(--primary)) } .reviews-grid { display: grid; gap: 1rem } @media (min-width: 640px) { .reviews-grid { grid-template-columns: 1fr 1fr } } @media (min-width: 1280px) { .reviews-grid { grid-template-columns: repeat(4, 1fr) } } #review_form_wrapper { margin-top: 1.5rem; max-width: 40rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1.25rem } .pdp-buybar { border-top: 1px solid hsl(var(--border)) } /* -------------------------------------------------------------------------- 7. Cart, checkout, account -------------------------------------------------------------------------- */ @media (min-width: 900px) { .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) } } .woocommerce table.shop_table { border-radius: .75rem } .woocommerce .cart-collaterals .cart_totals { position: sticky; top: 120px; border-radius: .75rem } .cart-coupon { display: flex; gap: .5rem; margin: .25rem 0 1rem } .cart-coupon .input-text { flex: 1; min-width: 0; height: var(--btn-h) } .cart-coupon .button { flex-shrink: 0 } .woocommerce table.shop_table td.actions > .button { float: none; margin-left: auto; display: inline-flex } .woocommerce table.shop_table td.actions { text-align: right } .checkout-grid { display: grid; gap: 1.5rem } .checkout-grid__side { position: relative } .woocommerce-checkout .col2-set { grid-template-columns: 1fr } .woocommerce-checkout #order_review_heading { margin-top: 0 } .woocommerce-checkout #order_review, .woocommerce-checkout #payment { border-radius: .75rem } @media (min-width: 1024px) { .checkout-grid { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 2.5rem; align-items: start } .checkout-grid__side { position: sticky; top: 120px } } /* -------------------------------------------------------------------------- 8. Footer -------------------------------------------------------------------------- */ .footer { background-color: hsl(var(--secondary)); color: rgba(255, 255, 255, .82) } .footer__grid { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 2.25rem } .footer__logo { display: inline-flex; border-radius: .5rem; background: #fff; padding: .5rem .75rem } .footer__logo img { height: 44px; width: auto; max-width: 160px; object-fit: contain } .footer__blurb { margin: 1rem 0 0; font-size: .875rem; line-height: 1.6; opacity: .85 } .footer__social { display: flex; gap: .625rem; margin-top: 1rem } .footer__social a { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 9999px; color: rgba(255, 255, 255, .8); transition: color .15s, border-color .15s } .footer__social a:hover { border-color: hsl(var(--accent)); color: hsl(var(--accent)) } .footer__social svg { width: 18px; height: 18px } .footer__title { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: hsl(var(--accent)) } .footer ul { list-style: none; margin: 0; padding: 0 } .footer__links li + li { margin-top: .125rem } .footer__links a, .footer-link { display: inline-block; padding: .25rem 0; font-size: .875rem; color: rgba(255, 255, 255, .82); text-decoration: none } .footer__links a:hover, .footer-link:hover { color: #fff } .footer__links svg, .footer__links img { width: 16px; height: 16px; vertical-align: -3px; margin-right: .375rem; filter: brightness(0) invert(1); opacity: .7 } .footer__contact li { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: .75rem; font-size: .875rem } .footer__contact svg { width: 18px; height: 18px; flex-shrink: 0; color: hsl(var(--accent)) } .footer__contact a { color: rgba(255, 255, 255, .9); text-decoration: none } .footer__contact a:hover { color: #fff } .footer__cta { margin-top: .75rem } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12) } .footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: .8125rem } .footer__copy { margin: 0; opacity: .7 } .footer__ships { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem } .footer__ships-label { opacity: .7 } .footer__ships-item { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap } .footer__ships .fi { width: 20px; height: 15px; border-radius: 2px; background-size: cover } .footer__order { display: flex; align-items: center; gap: .5rem } .footer__order-label { opacity: .7 } .footer__order a, .footer__order button { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: .375rem; background: transparent; padding: .375rem .625rem; font: inherit; font-size: .75rem; font-weight: 500; color: rgba(255, 255, 255, .9); text-decoration: none; cursor: pointer } .footer__order a:hover, .footer__order button:hover { border-color: hsl(var(--accent)); color: #fff } .footer__order svg { width: 14px; height: 14px } @media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr 1.25fr; gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 2.5rem } } /* -------------------------------------------------------------------------- 9. Content pages (About, Contact, FAQs, policies) -------------------------------------------------------------------------- */ .page-hero { background-color: hsl(var(--secondary)); color: #fff } .stats-band { max-width: 1024px; margin: 0 auto; border: 1px solid hsl(var(--border)); border-radius: 1rem; background: #fff } .stats-band__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 140px } .stats-band__item { display: flex; align-items: center; justify-content: center; gap: .875rem; padding: 1.25rem 1rem; border-bottom: 1px solid hsl(var(--border)) } .stats-band__item:nth-child(odd) { border-right: 1px solid hsl(var(--border)) } .stats-band__icon { display: flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--muted)); color: hsl(var(--primary)) } .stats-band__icon svg { width: 24px; height: 24px } .stats-band__num { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: hsl(var(--foreground)) } .stats-band__label { display: block; margin-top: .125rem; font-size: .8125rem; color: hsl(var(--muted-foreground)) } @media (min-width: 768px) { .stats-band__grid { grid-template-columns: repeat(4, 1fr) } .stats-band__item { border-bottom: 0; border-right: 1px solid hsl(var(--border)); padding: 1.75rem 1rem } .stats-band__item:last-child { border-right: 0 } .stats-band__num { font-size: 1.75rem } } .contact-grid { display: grid; gap: 1.5rem } @media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem } } .contact-card { display: flex; gap: 1rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1rem } .contact-card + .contact-card { margin-top: .75rem } .contact-card__icon { display: flex; width: 48px; height: 48px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: .75rem; background: hsl(var(--muted)); color: hsl(var(--primary)) } .contact-card__icon svg { width: 22px; height: 22px } .contact-card h3 { margin: 0; font-size: .9375rem; font-weight: 700; color: hsl(var(--foreground)) } .contact-card p { margin: .25rem 0 0; font-size: .875rem; color: hsl(var(--muted-foreground)); word-break: break-word } .contact-card a { color: hsl(var(--primary)); text-decoration: none } .contact-form { border: 1px solid hsl(var(--border)); border-radius: .75rem; background: #fff; padding: 1.25rem } .contact-form h2 { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 700 } .contact-form .field { margin-bottom: 1rem } .contact-form label { display: block; margin-bottom: .375rem; font-size: .875rem; font-weight: 500 } .contact-form input, .contact-form textarea, .contact-form select { display: block; width: 100%; border: 1px solid hsl(var(--border)); border-radius: .5rem; background: #fff; padding: 0 .75rem; height: var(--btn-h); font: inherit; font-size: .875rem } .contact-form textarea { height: auto; min-height: 120px; padding: .625rem .75rem } .contact-form__row { display: grid; gap: 1rem } @media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr } .contact-form { padding: 1.5rem } } .legal { max-width: 56rem; font-size: .9375rem; line-height: 1.7; color: hsl(var(--muted-foreground)) } .legal h2 { margin: 1.5rem 0 .5rem; font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)) } .legal p { margin: 0 0 .875rem } .legal ul { margin: 0 0 .875rem; padding-left: 1.25rem } /* -------------------------------------------------------------------------- 10. Small extras -------------------------------------------------------------------------- */ .shop-wrap { padding-top: 1.5rem; padding-bottom: var(--section-y) } .pdp__rating--none { color: hsl(var(--muted-foreground)) } .pdp__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain } .cat-banner__img { max-height: 240px; width: auto; border-radius: .75rem; object-fit: contain } @media (max-width: 767px) { .cat-banner__img { max-height: 150px } } /* footer: solid pista button so it reads on dark green */ .footer .btn--pista { background-color: hsl(var(--accent)); border-color: hsl(var(--accent)); color: hsl(var(--secondary)) } .footer .btn--pista:hover { background-color: #fff; border-color: #fff } /* -------------------------------------------------------------------------- Category icons are pictures now (Products > Categories > Image); a letter stands in when a category has none. Why-choose-us cards may use a picture. -------------------------------------------------------------------------- */ .cat-icon { display: block; object-fit: contain } .cat-letter { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: hsl(var(--pista-tint)); color: hsl(var(--primary)); font-weight: 700; font-size: 12px; line-height: 1 } .cat-tile__icon .cat-letter { font-size: 18px } .cat-banner__icon .cat-letter { font-size: 36px } .why-card__icon img { width: 32px; height: 32px; object-fit: contain } /* --------------------------------------------------------------------------- Pages built in the block editor (policies, legal, anything the client adds) and the two small pieces the Contact form needs. The editor writes plain

,

,