/* ===== OLAware taxonomy tiles: [olaware_need_tiles] / [olaware_cat_tiles] ===== */
.ola-tiles { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.ola-tiles .ola-tile { display: flex; flex-direction: column; text-decoration: none;
	color: var(--fl-global-charcoal); transition: transform .2s; }
.ola-tiles .ola-tile:hover, .ola-tiles .ola-tile:focus-visible { transform: translateY(-4px); color: var(--fl-global-charcoal); }
.ola-tiles .ola-tile:focus-visible { outline: 2px solid var(--fl-global-terracotta); outline-offset: 4px; }
.ola-tile__icon { display: flex; align-items: center; justify-content: center;
	color: var(--fl-global-deep-olive); font-size: 30px; }
.ola-tile__icon i, .ola-tile__icon svg { color: inherit; fill: currentColor; }
.ola-tile__body { display: flex; flex-direction: column; }
.ola-tile__title { display: block; font-weight: 600; line-height: 1.3; }
.ola-tile__desc { display: block; font-size: 13px; line-height: 1.45; color: #807b72; margin-top: 3px; }

/* tints (match the page-level ola-tN palette) */
.ola-t1 .ola-tile__icon { background: #EFDCCE; }  .ola-t2 .ola-tile__icon { background: #E8E4D2; }
.ola-t3 .ola-tile__icon { background: #F4E3C8; }  .ola-t4 .ola-tile__icon { background: var(--fl-global-clay); }
.ola-t5 .ola-tile__icon { background: #EDE7DA; }  .ola-t6 .ola-tile__icon { background: #F0DBC9; }
.ola-t7 .ola-tile__icon { background: #E9E0CB; }  .ola-t8 .ola-tile__icon { background: #EFDCCE; }
.ola-t9 .ola-tile__icon { background: #E8E4D2; }  .ola-t10 .ola-tile__icon { background: #F4E3C8; }
.ola-t11 .ola-tile__icon { background: var(--fl-global-clay); } .ola-t12 .ola-tile__icon { background: #EDE7DA; }
.ola-t13 .ola-tile__icon { background: #F0DBC9; } .ola-t14 .ola-tile__icon { background: #E9E0CB; }
.ola-tile--more .ola-tile__icon { background: var(--fl-global-olive); color: #fff; }

/* --- Shop by Need: card tiles, 4 across --- */
.ola-tiles--need .ola-tile { flex: 0 0 calc(25% - 16.5px); background: #fff; border-radius: 18px;
	overflow: hidden; box-shadow: 0 2px 14px rgba(44,44,44,.06); }
.ola-tiles--need .ola-tile__icon { height: 120px; margin: 0 0 14px; }
.ola-tiles--need .ola-tile__body { padding: 0 18px 20px; }
.ola-tiles--need .ola-tile__title { font-size: 16.5px; }
@media (max-width: 992px) { .ola-tiles--need .ola-tile { flex-basis: calc(50% - 11px); } }
@media (max-width: 480px) { .ola-tiles--need .ola-tile { flex-basis: 100%; } }

/* --- Shop by Product: circle tiles, 6 across --- */
.ola-tiles--cat { gap: 26px 18px; }
.ola-tiles--cat .ola-tile { flex: 0 0 calc(16.666% - 15px); align-items: center; text-align: center; }
.ola-tiles--cat .ola-tile:hover { transform: scale(1.05); }
.ola-tiles--cat .ola-tile__icon { width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 14px; }
.ola-tiles--cat .ola-tile__title { font-size: 15px; }
.ola-tiles--cat .ola-tile__desc { font-size: 12.5px; }
@media (max-width: 1100px) { .ola-tiles--cat .ola-tile { flex-basis: calc(25% - 13.5px); } }
@media (max-width: 768px) { .ola-tiles--cat .ola-tile { flex-basis: calc(33.333% - 12px); }
	.ola-tiles--cat .ola-tile__icon { width: 96px; height: 96px; font-size: 26px; } }
@media (max-width: 480px) { .ola-tiles--cat .ola-tile { flex-basis: calc(50% - 9px); } }

/* --- Brands we love: [olaware_brand_tiles] pills (moved here from the home page CSS so they style on any page) --- */
.ola-brands { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.ola-brands a { flex: 0 1 210px; min-width: 150px; height: 74px; background: #fff;
	border-radius: 12px; display: flex; align-items: center; justify-content: center;
	font-size: 13px; letter-spacing: 2px; font-weight: 600; text-transform: uppercase;
	color: var(--fl-global-deep-olive); text-align: center; padding: 0 12px;
	box-shadow: 0 2px 10px rgba(44,44,44,.05); transition: transform .2s; text-decoration: none; }
.ola-brands a:hover, .ola-brands a:focus-visible { transform: translateY(-3px); color: var(--fl-global-terracotta); }
.ola-brands a:focus-visible { outline: 2px solid var(--fl-global-terracotta); outline-offset: 4px; }
