/*!
* True Makeup Theme — responsive.css
*
* Viewport-scoped overrides for every feature stylesheet. Organised
* by breakpoint in ascending width order:
*
* 1. Desktop base (min-width: 1024px)
* 2. Tablet / sm desktop (1024px – 1399px) nav compression
* 3. Mobile (any) (max-width: 1023px)
* 4. Mobile landscape (max-width: 1023px, landscape)
* 5. Mobile portrait (max-width: 1023px, portrait)
* 6. Extra small (max-width: 480px)
* 7. Responsive utility prefixes (sm / md / lg)
* 8. Admin-bar clearance
* 9. Mid-range tweaks (max-width: 768px)
* 10. Homepage 2026 mobile
* 11. Homepage 2026 xs (max-width: 480px)
*
* Rules inside each block are kept in the order the feature files
* expect them; property order inside rule bodies is normalised to
* positioning → box → display → visual → typography → animation.
*
* This file is the last CSS layer loaded; everything here wins.
*/
/* ── 1. DESKTOP (1024px+) ── */
@media (min-width: 1024px) {
/* Layout */
.tmt-page-margins { padding-left: 96px; padding-right: 96px; }
.tmt-max-width { max-width: 1700px; margin: 0 auto; }
.tmt-section-spacing { padding-top: 80px; padding-bottom: 80px; }
/* Header */
.tmt-nav-center img { height: 32px; }
#tmt-promo-bar span { font-size: 12px; }
#tmt-promo-bar { padding: 14px 0; }
.tmt-hamburger { display: none !important; }
.tmt-nav-link-wrap { display: block; }
.tmt-desktop-only { display: flex !important; }
/* Hero */
#hero-slideshow { height: 75vh; }
#hero-slideshow h1 { font-size: 48px; }
#hero-slideshow p { font-size: 16px; }
#hero-slideshow a { padding: 14px 36px; font-size: 12px; }
.hero-slide-content { padding: 40px; }
/* Desktop: show landscape media, hide portrait */
.hero-media-desktop { display: block !important; }
.hero-media-mobile { display: none !important; }
/* Section headings */
.tmt-section-label { font-size: 12px; letter-spacing: 0.2em; }
.tmt-section-heading { font-size: 40px; }
.tmt-section-heading-sm { font-size: 28px; }
/* Product grids */
.grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tmt-product-name { font-size: 16px; }
.tmt-card-logo { height: 16px; display: block; }
/* Brand grid */
.tmt-brand-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 24px; }
.brand-card { aspect-ratio: 1/1; }
.brand-logo-img { max-width: 90% !important; max-height: 90% !important; }
/* Collections */
.tmt-collections-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tmt-collection-card h3 { font-size: 30px; }
/* Split panels (skincare, nail care) */
.tmt-split-panel { grid-template-columns: 1fr 1fr; height: 65vh; min-height: 500px; }
.tmt-split-text { padding: 72px 64px; }
.tmt-split-text h2 { font-size: 48px; }
.tmt-split-text p { font-size: 16px; }
/* Quiz section */
.tmt-quiz-hero { height: 65vh; min-height: 500px; }
.tmt-quiz-hero h2 { font-size: 60px; }
.tmt-quiz-hero p { font-size: 20px; }
/* Reviews */
#review-carousel { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { padding: 40px 36px 36px; }
/* Newsletter */
.tmt-newsletter-inner { padding: 40px 64px; align-items: flex-start; text-align: left; }
.tmt-newsletter-inner h2 { font-size: 48px; }
.tmt-newsletter-inner form { flex-direction: row; max-width: 480px; }
/* Footer */
.tmt-footer-grid { grid-template-columns: 1fr 3fr; gap: 60px; }
.tmt-footer-nav { grid-template-columns: repeat(4, 1fr); gap: 40px; }
.tmt-footer-bottom { flex-direction: row; justify-content: space-between; }
/* Black bars */
.tmt-brands-bar-logos img { height: 64px; }
.tmt-social-icon svg { width: 27px; height: 27px; }
/* Shadows */
.tmt-product-card:hover .tmt-product-img { box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.tmt-collection-card { box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.tmt-collection-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.brand-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); }
nav#tmt-main-nav { box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
}
/* ── 1b. TABLET / SMALL DESKTOP (1024px – 1399px) — Nav links compress to fit without overflow ── */
@media (min-width: 1024px) and (max-width: 1399px) {
.tmt-nav-left { gap: 8px; }
.tmt-nav-link { font-size: 11px; padding: 6px 6px; letter-spacing: 0.08em; }
.tmt-nav-right { gap: 16px; }
.tmt-checkout-btn { padding: 10px 20px !important; font-size: 10px !important; }
.tmt-nav-center img { height: 28px; }
}
/* ── 2. SHARED MOBILE (both orientations, max-width: 1023px) ── */
@media (max-width: 1023px) {
/* Header — hamburger mode */
.tmt-hamburger.nav-toggle { display: flex !important; margin-right: 0; width: auto; min-width: auto; }
.tmt-nav-link-wrap { display: none !important; }
.tmt-nav-left { gap: 0; }
.tmt-nav-right { gap: 16px; }
.tmt-desktop-only { display: none !important; }
.tmt-nav-inner { padding: 18px 16px !important; }
.tmt-nav-center img { height: 26px !important; }
/* Full width enforcement */
html, body, .site-main, main, #page, .page-wrapper {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
.container, .wrapper, section {
width: 100% !important;
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
/* Inner containers inside sections that already have padding — no double padding */
div.mx-auto {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.px-8 { padding-left: 16px !important; padding-right: 16px !important; }
.md\:px-24 { padding-left: 16px !important; padding-right: 16px !important; }
/* Header — zero side padding on mobile */
header .px-8 { padding-left: 0 !important; padding-right: 0 !important; }
.tmt-nav-inner { max-width: 100% !important; }
nav#tmt-main-nav { width: 100% !important; }
#hero-slideshow { width: 100% !important; }
/* Hero */
#hero-slideshow { height: 60vh !important; }
#hero-slideshow span[style*="letter-spacing"] { font-size: 10px !important; margin-bottom: 16px !important; }
/* Mobile: show portrait media, hide landscape */
.hero-media-desktop { display: none !important; }
.hero-media-mobile { display: block !important; }
/* Product card SOINVOGUE logo */
.tmt-card-logo,
.tmt-product-img img[alt="SOINVOGUE"],
.tmt-product-card img[alt="SOINVOGUE"] { opacity: 0.2 !important; }
/* Limit product grids to 4 (not brand/collections) */
.grid.tmt-reveal-stagger:not(.tmt-brand-grid):not(.tmt-collections-grid) > *:nth-child(n+5) { display: none !important; }
/* Disable all drop shadows on mobile */
*, *::before, *::after {
box-shadow: none !important;
filter: none !important;
}
/* Restore essential filters */
.tmt-bar-icons img, .tmt-brands-bar-logos img { filter: brightness(0) invert(1) !important; opacity: 0.7 !important; }
.tmt-social-icon svg { filter: grayscale(1) brightness(0) !important; width: 20px !important; height: 20px !important; }
.tmt-social-icon { opacity: 0.6 !important; }
img[style*="mix-blend-mode"] { mix-blend-mode: multiply !important; }
/* Gradient lines — restore */
.tmt-gradient-top::before, .tmt-gradient-bottom::after {
background: linear-gradient(90deg, #554350, var(--ep-primary), var(--ep-secondary), var(--ep-blush-block), #FAE8DD, var(--ep-blush-block), var(--ep-secondary), var(--ep-primary), #554350) !important;
background-size: 200% 100% !important;
}
/* Black bars */
.tmt-brands-bar-logos { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tmt-brands-bar-logos::-webkit-scrollbar { display: none; }
.tmt-brands-bar-logos img { flex-shrink: 0; height: 36px !important; }
/* Reduce section spacing */
.py-20 { padding-top: 24px !important; padding-bottom: 24px !important; }
section + section { margin-top: 0 !important; }
/* Promo bar */
#tmt-promo-bar span { font-size: 9px !important; }
#tmt-promo-bar { padding: 10px 0 !important; }
/* Review cards — full width, single column */
#review-carousel { grid-template-columns: 1fr !important; gap: 12px !important; }
.review-card {
padding: 24px 20px 20px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.review-card span[style*="font-size:28px"] { font-size: 20px !important; }
.review-card p[style*="font-size:16px"] { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 16px !important; }
.review-card p[style*="letter-spacing:0.15em"] { font-size: 11px !important; }
.review-card p[style*="color:#2E7D32"] { font-size: 11px !important; }
/* Newsletter section */
.tmt-gradient-top[style*="height:65vh"] {
height: auto !important;
min-height: 350px !important;
}
.tmt-newsletter-inner {
align-items: center !important;
text-align: center !important;
padding: 32px 20px !important;
}
.tmt-newsletter-inner h2 { font-size: 24px !important; }
.tmt-newsletter-inner p { font-size: 14px !important; }
.tmt-newsletter-inner form { max-width: 100% !important; flex-direction: column !important; gap: 8px !important; }
.tmt-newsletter-inner input[type="email"] { border-right: 1px solid rgba(255,255,255,0.6) !important; border-bottom: 1px solid #000 !important; }
.tmt-newsletter-inner button { width: 100%; }
/* Social bar — stack & center */
.tmt-social-bar > div {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
text-align: center !important;
}
.tmt-social-bar > div > span {
text-align: center !important;
width: 100% !important;
}
.tmt-social-bar > div > div[style*="gap:32px"] {
justify-content: center !important;
width: 100% !important;
flex-wrap: wrap !important;
gap: 20px !important;
}
/* Split panels — stack vertically */
div[style*="grid-template-columns:1fr 1fr"][style*="height:65vh"] {
grid-template-columns: 1fr !important;
grid-template-rows: 1fr 1fr !important;
height: auto !important;
min-height: auto !important;
}
div[style*="grid-template-columns:1fr 1fr"][style*="height:65vh"] > div[style*="overflow:hidden"] {
min-height: 250px !important;
}
div[style*="grid-template-columns:1fr 1fr"][style*="height:65vh"] > div[style*="padding:72px"] {
padding: 40px 24px !important;
}
div[style*="grid-template-columns:1fr 1fr"][style*="height:65vh"] h2 {
font-size: 28px !important;
}
/* Class-based split panel — improved mobile stacking */
.tmt-split-panel {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
height: auto !important;
min-height: auto !important;
}
.tmt-split-panel > div[style*="overflow:hidden"] { min-height: 220px !important; height: 250px !important; }
.tmt-split-text {
padding: 32px 24px !important;
align-items: center !important;
text-align: center !important;
}
.tmt-split-text h2 { font-size: 28px !important; }
.tmt-split-text p { font-size: 14px !important; line-height: 1.65 !important; max-width: 100% !important; }
.tmt-split-text span[style*="letter-spacing"] { font-size: 10px !important; margin-bottom: 20px !important; }
.tmt-split-text a {
padding: 14px 28px !important;
font-size: 11px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
width: 100% !important;
max-width: 280px !important;
justify-content: center !important;
}
/* Footer — single column, fully centred */
footer div[style*="grid-template-columns:1fr 3fr"] {
grid-template-columns: 1fr !important;
gap: 32px !important;
text-align: center !important;
}
footer div[style*="grid-template-columns:repeat(4"] {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
text-align: center !important;
}
footer div[style*="grid-template-columns:repeat(4"] > div {
text-align: center !important;
}
footer div[style*="grid-template-columns:repeat(4"] h4 {
font-size: 16px !important;
margin-bottom: 12px !important;
text-align: center !important;
}
footer div[style*="grid-template-columns:repeat(4"] a {
display: block !important;
font-size: 14px !important;
padding: 4px 0 !important;
justify-content: center !important;
text-align: center !important;
}
footer div[style*="grid-template-columns:repeat(4"] nav {
font-size: 14px !important;
line-height: 2 !important;
text-align: center !important;
}
/* Footer logo + address — centre */
footer div[style*="grid-template-columns:1fr 3fr"] > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
footer div[style*="grid-template-columns:1fr 3fr"] > div:first-child img {
margin: 0 auto !important;
}
footer div[style*="grid-template-columns:1fr 3fr"] > div:first-child div {
text-align: center !important;
}
footer div[style*="grid-template-columns:1fr 3fr"] > div:first-child p {
text-align: center !important;
}
footer .tmt-gradient-top + div { text-align: center !important; }
.tmt-footer-grid { grid-template-columns: 1fr !important; text-align: center !important; }
.tmt-footer-nav { grid-template-columns: 1fr !important; text-align: center !important; }
.tmt-footer-bottom { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
/* Footer padding */
footer div[style*="padding-top:64px"] {
padding-top: 40px !important;
padding-bottom: 32px !important;
}
/* Footer copyright bar — stack & center */
footer + div div[style*="justify-content:space-between"],
.px-8 > div[style*="justify-content:space-between"] {
flex-direction: column !important;
gap: 12px !important;
text-align: center !important;
align-items: center !important;
padding: 16px 0 !important;
}
/* Copyright text */
footer + div p[style*="letter-spacing"],
div[style*="background:#F4F4F5"] p[style*="letter-spacing"] {
font-size: 9px !important;
letter-spacing: 0.1em !important;
white-space: normal !important;
text-align: center !important;
}
/* Privacy / Terms links — center */
footer + div div[style*="gap:16px"],
div[style*="background:#F4F4F5"] div[style*="gap:16px"] {
justify-content: center !important;
text-align: center !important;
}
/* Payment icons — center */
footer + div div[style*="gap:20px"],
div[style*="background:#F4F4F5"] div[style*="gap:20px"] {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
footer + div div[style*="gap:20px"] img,
div[style*="background:#F4F4F5"] div[style*="gap:20px"] img {
height: 18px !important;
}
/* Cookie banner — wrap text, stack buttons */
.cookie-banner div[style*="display:flex"][style*="gap:20px"],
#tmt-cookie-banner > div {
flex-direction: column !important;
gap: 12px !important;
padding: 16px !important;
align-items: stretch !important;
}
#tmt-cookie-banner p {
white-space: normal !important;
text-align: center !important;
font-size: 11px !important;
}
#tmt-cookie-banner div[style*="display:flex"][style*="gap:8px"] {
flex-direction: row !important;
gap: 8px !important;
width: 100% !important;
}
#tmt-cookie-banner button {
flex: 1 !important;
min-height: 44px !important;
padding: 12px 16px !important;
}
/* Quiz section — centred, compact */
.tmt-quiz-hero,
.tmt-gradient-top[style*="min-height:500px"] {
height: auto !important;
min-height: 320px !important;
}
.tmt-quiz-hero h2,
.tmt-gradient-top[style*="min-height:500px"] h2 {
font-size: 28px !important;
text-align: center !important;
}
.tmt-quiz-hero p,
.tmt-gradient-top[style*="min-height:500px"] p {
font-size: 14px !important;
text-align: center !important;
max-width: 100% !important;
}
.tmt-gradient-top[style*="min-height:500px"] > div[style*="padding:40px 64px"],
.tmt-gradient-top[style*="min-height:500px"] > div[style*="padding:40px"] {
padding: 24px 16px !important;
align-items: center !important;
text-align: center !important;
justify-content: center !important;
}
.tmt-gradient-top[style*="min-height:500px"] a {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
}
/* Section headings */
.tmt-reveal h2, .tmt-reveal-left h2, .tmt-reveal-right h2,
.tmt-reveal-scale h2 { font-size: 28px !important; }
/* Product grids — 2 columns */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
.tmt-product-name { font-size: 13px !important; }
/* View All buttons */
a[style*="letter-spacing:0.2em"][style*="uppercase"] { padding: 10px 20px !important; font-size: 10px !important; }
/* Section titles row — stack & center */
.tmt-section-header {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
gap: 20px !important;
}
.tmt-section-heading {
text-align: center !important;
font-size: 32px !important;
width: 100% !important;
}
/* Section CTA buttons — centered below heading */
.tmt-section-header > a {
align-self: center !important;
text-align: center !important;
}
/* Section label text — centered */
div[style*="margin-bottom:12px"] {
text-align: center !important;
}
div[style*="margin-bottom:12px"] span { font-size: 10px !important; }
/* Brand cards — tighter layout */
.tmt-brand-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.brand-card { aspect-ratio: 3/4 !important; }
/* Collection cards */
.tmt-collection-card h3 { font-size: 18px !important; }
/* Native Checkout */
#order_review {
padding: 20px !important;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
padding: 10px 14px !important;
}
/* Black bars — horizontal scroll (front-page.twig) */
.tmt-bar-icons > div:first-child {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tmt-bar-icons > div:first-child::-webkit-scrollbar { display: none; }
.tmt-bar-icons img { flex-shrink: 0; height: 32px !important; }
/* Social bar (front-page.twig) */
.tmt-social-bar > div { flex-wrap: wrap; gap: 16px !important; }
/* Categories bar — scroll */
div[style*="gap:48px"] { gap: 24px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
div[style*="gap:48px"]::-webkit-scrollbar { display: none; }
div[style*="gap:48px"] a { white-space: nowrap; font-size: 13px !important; }
/* Footer columns (grid backup) */
.grid-cols-2.md\:grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── 3. MOBILE LANDSCAPE (max-width: 1023px, landscape) ── */
@media (max-width: 1023px) and (orientation: landscape) {
/* Layout */
.tmt-page-margins { padding-left: 32px; padding-right: 32px; }
.tmt-section-spacing { padding-top: 32px; padding-bottom: 32px; }
/* Header */
.tmt-nav-center img { height: 24px !important; }
#tmt-promo-bar span { font-size: 10px !important; }
#tmt-promo-bar { padding: 8px 0 !important; }
/* Hero */
#hero-slideshow { height: 70vh !important; }
#hero-slideshow h1 { font-size: 22px !important; }
#hero-slideshow p { font-size: 11px !important; margin-bottom: 16px !important; }
#hero-slideshow a { padding: 10px 20px !important; font-size: 10px !important; }
/* Product grids — 4 columns in landscape */
.grid.grid-cols-2 { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.tmt-product-name { font-size: 13px !important; }
.tmt-card-logo,
.tmt-product-img img[alt="SOINVOGUE"],
.tmt-product-card img[alt="SOINVOGUE"] { height: 14px !important; opacity: 0.2 !important; }
/* Brand grid — 4 columns */
.tmt-brand-grid,
div.tmt-brand-grid,
div.tmt-brand-grid[style] { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.brand-card .brand-tagline { display: none !important; }
.brand-card:hover .brand-logo-img { transform: none !important; margin-top: 0 !important; }
/* Collections — 4 columns */
.tmt-collections-grid,
div.tmt-collections-grid,
.grid.tmt-collections-grid,
.grid.grid-cols-2.tmt-collections-grid,
div.tmt-collections-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.tmt-collection-card h3 { font-size: 16px !important; }
/* Split panels — 50/50 side by side */
.tmt-split-panel { height: 50vh !important; min-height: 300px !important; }
.tmt-split-text { padding: 24px 20px !important; }
.tmt-split-text h2 { font-size: 24px !important; }
.tmt-split-text p { font-size: 12px !important; }
.tmt-split-text a { padding: 10px 20px !important; font-size: 10px !important; }
/* Quiz */
.tmt-quiz-hero { height: 50vh !important; min-height: 300px !important; }
.tmt-quiz-hero h2 { font-size: 28px !important; }
.tmt-quiz-hero p { font-size: 12px !important; }
/* Reviews — 3 columns */
#review-carousel { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.review-card { padding: 16px 14px 14px !important; }
.review-card p[style*="font-size:16px"] { font-size: 12px !important; }
.review-card span[style*="font-size:28px"] { font-size: 16px !important; }
/* Newsletter — desktop-like */
.tmt-newsletter-inner { align-items: flex-start !important; text-align: left !important; padding: 32px 40px !important; }
.tmt-newsletter-inner h2 { font-size: 32px !important; }
.tmt-newsletter-inner form { flex-direction: row !important; }
.tmt-newsletter-inner input[type="email"] { border-right: none !important; }
/* Social bar — align right */
.tmt-social-bar > div > div[style*="gap:32px"] { justify-content: flex-end !important; width: auto !important; }
/* Section spacing */
.py-20 { padding-top: 28px !important; padding-bottom: 28px !important; }
}
/* ── 4. MOBILE PORTRAIT (max-width: 1023px, portrait) ── */
@media (max-width: 1023px) and (orientation: portrait) {
/* Layout */
.tmt-page-margins { padding-left: 16px; padding-right: 16px; }
.tmt-section-spacing { padding-top: 24px; padding-bottom: 24px; }
/* Header */
.tmt-nav-center img { height: 26px !important; }
#tmt-promo-bar span { font-size: 9px !important; }
#tmt-promo-bar { padding: 10px 0 !important; }
.tmt-mobile-br { display: block !important; }
/* Hero */
#hero-slideshow { height: 60vh !important; }
#hero-slideshow h1 { font-size: 26px !important; line-height: 1.2 !important; }
#hero-slideshow p { font-size: 13px !important; margin-bottom: 20px !important; max-width: 100% !important; }
#hero-slideshow a {
padding: 14px 28px !important;
font-size: 11px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero-slide-content { padding: 20px 16px !important; }
/* Product grids — 2 columns, max 4 items */
.grid.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.tmt-product-name { font-size: 12px !important; }
.tmt-card-logo,
.tmt-product-img img[alt="SOINVOGUE"],
.tmt-product-card img[alt="SOINVOGUE"] { height: 8px !important; opacity: 0.2 !important; }
/* Brand grid — 2 columns */
.tmt-brand-grid,
div.tmt-brand-grid,
div.tmt-brand-grid[style] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.brand-card { aspect-ratio: 3/4 !important; }
.brand-card .brand-logo-img { max-width: 90% !important; max-height: 90% !important; }
.brand-card .brand-tagline { display: none !important; }
.brand-card:hover .brand-logo-img { transform: none !important; margin-top: 0 !important; }
/* Collections — 2 columns */
.tmt-collections-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.tmt-collection-card h3 { font-size: 18px !important; }
/* Split panels — stack vertically */
.tmt-split-panel {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
height: auto !important; min-height: auto !important;
}
.tmt-split-panel > div[style*="overflow:hidden"] { min-height: 220px !important; height: 250px !important; }
.tmt-split-text {
padding: 32px 24px !important;
align-items: center !important;
text-align: center !important;
}
.tmt-split-text h2 { font-size: 28px !important; }
.tmt-split-text p { font-size: 14px !important; line-height: 1.65 !important; max-width: 100% !important; }
.tmt-split-text a {
padding: 14px 28px !important;
font-size: 11px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
width: 100% !important;
max-width: 280px !important;
justify-content: center !important;
}
/* Quiz */
.tmt-quiz-hero { height: auto !important; min-height: 320px !important; }
.tmt-quiz-hero h2 { font-size: 28px !important; text-align: center !important; }
.tmt-quiz-hero p { font-size: 14px !important; text-align: center !important; max-width: 100% !important; }
/* Reviews — 1 column */
#review-carousel { grid-template-columns: 1fr !important; gap: 16px !important; }
.review-card { padding: 24px 20px 20px !important; }
.review-card p[style*="font-size:16px"] { font-size: 13px !important; }
.review-card span[style*="font-size:28px"] { font-size: 20px !important; }
/* Newsletter — centred */
.tmt-newsletter-inner { align-items: center !important; text-align: center !important; padding: 32px 20px !important; }
.tmt-newsletter-inner h2 { font-size: 28px !important; }
.tmt-newsletter-inner form { flex-direction: column !important; gap: 8px !important; }
.tmt-newsletter-inner input[type="email"] { border-right: 1px solid rgba(255,255,255,0.6) !important; border-bottom: 1px solid #000 !important; }
.tmt-newsletter-inner button { width: 100%; }
/* Footer — single column, centred */
.tmt-footer-grid { grid-template-columns: 1fr !important; text-align: center !important; }
.tmt-footer-nav { grid-template-columns: 1fr !important; text-align: center !important; }
.tmt-footer-bottom { flex-direction: column !important; align-items: center !important; gap: 16px !important; }
/* Social bar — centred icons */
.tmt-social-bar > div > div[style*="gap:32px"] { justify-content: center !important; }
/* Section spacing */
.py-20 { padding-top: 24px !important; padding-bottom: 24px !important; }
/* View All buttons */
a[style*="letter-spacing:0.2em"][style*="uppercase"] { padding: 10px 20px !important; font-size: 10px !important; }
/* Section title rows — stack */
div[style*="justify-content:space-between"][style*="margin-bottom:32px"] {
flex-direction: column !important; align-items: flex-start !important; gap: 16px;
}
}
/* ── 5. EXTRA SMALL (max-width: 480px) ── */
@media (max-width: 480px) {
/* Single column products */
.grid-cols-2, .md\:grid-cols-4 { grid-template-columns: 1fr !important; }
/* Hero even smaller */
#hero-slideshow h1 { font-size: 24px !important; }
#hero-slideshow { height: 50vh !important; }
/* Section headings */
.tmt-reveal h2, .tmt-reveal-left h2, .tmt-reveal-right h2,
.tmt-reveal-scale h2 { font-size: 24px !important; }
/* Brand grid — 2 columns */
.brand-card { aspect-ratio: auto !important; min-height: 200px; }
}
/* ── EP RESPONSIVE PREFIX UTILITIES ── */
@media (min-width: 640px) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:hidden { display: none; }
.md\:inline-block { display: inline-block; }
.md\:flex-row { flex-direction: row; }
.md\:px-20 { padding-left: 5rem; padding-right: 5rem; }
.md\:px-24 { padding-left: 6rem; padding-right: 6rem; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:col-span-2 { grid-column: span 2 / span 2; }
.md\:row-span-2 { grid-row: span 2 / span 2; }
.md\:min-w-\[400px\] { min-width: 400px; }
.md\:w-1\/2 { width: 50%; }
.md\:aspect-auto { aspect-ratio: auto; }
.md\:h-\[90vh\] { height: 90vh; }
.md\:text-xs { font-size: 0.75rem; line-height: 1rem; }
.md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.md\:text-5xl { font-size: 3rem; line-height: 1; }
.md\:text-6xl { font-size: 3.75rem; line-height: 1; }
.md\:text-8xl { font-size: 6rem; line-height: 1; }
}
@media (min-width: 1024px) {
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Admin bar fix for mobile */
@media screen and (max-width: 782px) {
.admin-bar nav.fixed { top: 46px; }
}
/* Front-page 768px breakpoint (subset) */
@media (max-width: 768px) {
/* Hero */
#hero-slideshow { height: 60vh !important; }
#hero-slideshow h1 { font-size: 28px !important; }
#hero-slideshow p { font-size: 14px !important; max-width: 100% !important; }
#hero-slideshow a {
padding: 14px 28px !important;
font-size: 11px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero-slide-content { padding: 24px 16px !important; }
}
/* ── HOMEPAGE 2026 REDESIGN — MOBILE — All new editorial components redesigned April 2026. — Mobile breakpoint aligned with legacy system (1023px). ── */
@media (max-width: 1023px) {
/* Override forced section padding for edge-to-edge slideshow sections */
section.tmt-reveal-scale,
section.tmt-reveal-scale > div { padding-left: 0 !important; padding-right: 0 !important; }
/* Brand grid — 2 cols, mobile-optimised */
.tmt-brand-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.brand-card { aspect-ratio: 1/1 !important; }
.brand-logo-wrap { padding: 16px !important; opacity: 1 !important; }
.brand-logo-wrap img { max-width: 90% !important; max-height: 90% !important; }
/* Remove blur on B&W layer, ensure it stays within card bounds */
.brand-card .brand-bg-bw { filter: grayscale(100%) !important; transform: none !important; opacity: 0.15 !important; }
.brand-card { overflow: hidden !important; }
.brand-card .brand-bg-bw,
.brand-card img[class*="brand-bg"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Hide video/colour wipe layers on mobile — no hover on touch */
.brand-card .brand-bg-color,
.brand-card .brand-bg-video { display: none !important; }
/* Hide hover-only elements */
.brand-card .brand-overlay { display: none !important; }
.brand-card .brand-btn { display: none !important; }
/* Name bar — tighter padding, readable */
.brand-card div[style*="bottom:12px"] { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 8px 10px !important; }
.brand-card div[style*="bottom:12px"] span { font-size: 10px !important; letter-spacing: 0.08em !important; }
/* Collection grid — 2 cols, mobile-optimised */
.tmt-collections-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
/* Hide hover-only elements on touch */
.tmt-collection-card .tmt-collection-overlay { display: none !important; }
.tmt-collection-card .tmt-collection-btn { display: none !important; }
.tmt-collection-card .tmt-collection-video { display: none !important; }
/* Inset title bar — tighter on mobile */
.tmt-collection-card div[style*="bottom:12px"] { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 8px 10px !important; }
.tmt-collection-card div[style*="bottom:12px"] span { font-size: 10px !important; letter-spacing: 0.08em !important; }
/* Homepage product grids (trending / flash deals) — single column on mobile */
.tmt-product-grid-frame > div,
.tmt-product-grid-frame .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
/* Product Card Layout tweaks */
.tmt-card-tag { font-size: 9px !important; padding: 6px 8px !important; }
.tmt-product-bar { flex-direction: column !important; align-items: center !important; }
.tmt-product-name { padding: 8px 4px 0px 4px !important; text-align: center !important; font-size: 11px !important; flex: none !important; }
.tmt-product-price { padding: 4px 4px 8px 4px !important; text-align: center !important; }
/* 8px frames stay tight + clip overflow */
.tmt-brand-grid-frame,
.tmt-collections-grid-frame,
.tmt-product-grid-frame { padding: 8px !important; overflow: hidden !important; }
.tmt-brand-grid,
.tmt-collections-grid { overflow: hidden !important; }
/* Secondary pages — reduce gap + edge-to-edge hero on mobile */
.tmt-faq-section { padding-top: 16px !important; }
.tmt-faq-heading { margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; text-align: center !important; }
.tmt-account-section { padding-top: 16px !important; }
.tmt-account-heading { margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; text-align: center !important; }
/* Contact page */
.tmt-contact-form { width: 100% !important; padding: 0 16px !important; box-sizing: border-box !important; }
.tmt-contact-form h2 { font-size: 24px !important; text-align: center !important; }
.tmt-contact-form > div[style*="margin-bottom"] { text-align: center !important; }
.tmt-contact-form input[type="text"],
.tmt-contact-form input[type="email"],
.tmt-contact-form input[type="tel"],
.tmt-contact-form textarea,
.tmt-contact-form select { max-width: 100% !important; box-sizing: border-box !important; }
/* Security check + submit — centred */
.tmt-contact-form label { text-align: center !important; display: block !important; }
.tmt-contact-form input[type="submit"],
.tmt-contact-form .wpcf7-submit { display: block !important; margin: 0 auto !important; }
.tmt-contact-form .tmt-math-check,
.tmt-contact-form [style*="margin-top:24px"] { text-align: center !important; }
.tmt-contact-form .tmt-math-check input,
.tmt-contact-form [style*="margin-top:24px"] input,
.tmt-contact-form input#siv_math_answer,
.tmt-contact-form input[name="siv_math_answer"] { margin: 0 auto !important; display: block !important; width: 120px !important; text-align: center !important; }
/* Sidebar widgets — padded, centred */
.tmt-contact-widget { padding: 24px 16px !important; text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; }
.tmt-contact-widget h4 { font-size: 18px !important; text-align: center !important; }
.tmt-contact-widget p, .tmt-contact-widget div, .tmt-contact-widget a { text-align: center !important; }
/* Stack contact grid + reduce gap */
div[style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; gap: 24px !important; padding: 0 16px !important; box-sizing: border-box !important; }
/* All secondary page heading strips — edge-to-edge + reduced gap + centred */
section.px-8[style*="padding-top:70px"] { padding-top: 16px !important; }
section.px-8[style*="padding-top:70px"] header {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important;
text-align: center !important;
}
section.px-8[style*="padding-top:70px"] header h1 { font-size: 28px !important; text-align: center !important; }
section.px-8[style*="padding-top:70px"] header p { text-align: center !important; }
/* Brands page (/about-us/brands/) */
.tmt-brands-page { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-brands-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important; text-align: center !important;
}
.tmt-brands-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-brands-heading__desc { text-align: center !important; }
.tmt-brands-intro { margin-bottom: 32px !important; }
.tmt-brands-intro h2 { font-size: 24px !important; }
/* Brand detail cards — stack on mobile */
.tmt-brands-detail { grid-template-columns: 1fr !important; min-height: auto !important; }
.tmt-brands-detail--flip .tmt-brands-detail__img { order: 0 !important; }
.tmt-brands-detail--flip .tmt-brands-detail__text { order: 0 !important; }
.tmt-brands-detail__img { min-height: 200px !important; }
.tmt-brands-detail__text { padding: 32px 20px !important; text-align: center !important; }
.tmt-brands-h3 { font-size: 22px !important; }
.tmt-brands-link { justify-content: center !important; }
/* Brand row tiles — square, consistent 4px gaps everywhere */
.tmt-brands-page .tmt-brand-grid,
.tmt-brands-page-row .tmt-brand-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 4px !important;
}
.tmt-brands-page-row .brand-card,
.tmt-brands-page .brand-card {
aspect-ratio: 1/1 !important; min-height: 0 !important; height: auto !important;
margin: 0 !important; padding: 0 !important;
}
.tmt-brands-page-row .brand-logo-wrap,
.tmt-brands-page .brand-logo-wrap {
padding: 8px !important;
}
.tmt-brands-page-row .brand-logo-wrap img,
.tmt-brands-page .brand-logo-wrap img { max-width: 85% !important; max-height: 85% !important; }
.tmt-brands-page-row { margin-bottom: 24px !important; }
/* Remove any extra margins/padding on the grid wrapper */
.tmt-brands-page-row > div[style*="padding"] { padding: 0 !important; }
/* CTA */
.tmt-brands-cta { padding: 40px 20px !important; margin-top: 32px !important; }
.tmt-brands-cta h2 { font-size: 24px !important; }
/* Single blog post */
/* Hero — edge-to-edge, shorter */
section.px-8.bg-surface[style*="padding-top:50px"] { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
section.px-8.bg-surface[style*="padding-top:50px"] .mx-auto { max-width: 100% !important; }
section.px-8.bg-surface[style*="padding-top:50px"] .tmt-gradient-top { height: 35vh !important; min-height: 250px !important; }
section.px-8.bg-surface[style*="padding-top:50px"] .tmt-gradient-top h1 { font-size: 26px !important; }
section.px-8.bg-surface[style*="padding-top:50px"] .tmt-gradient-top div[style*="max-width:800px"] { padding: 20px 16px !important; max-width: 100% !important; }
/* Article content — tighter padding */
section.py-20.px-8.bg-surface { padding-top: 32px !important; padding-bottom: 40px !important; }
section.py-20.px-8.bg-surface .mx-auto[style*="max-width:800px"] { max-width: 100% !important; padding: 0 !important; }
.tmt-article-content { font-size: 15px !important; padding: 0 16px !important; }
.tmt-article-content h2, .tmt-article-content h1 { font-size: 22px !important; }
.tmt-article-content h3 { font-size: 18px !important; }
.tmt-article-content img { margin: 16px 0 !important; }
.tmt-article-content blockquote { padding: 16px 20px !important; margin: 24px 0 !important; }
/* Tags */
section.py-20.px-8.bg-surface div[style*="border-top:1px"] { text-align: center !important; }
/* Related posts — single column */
.tmt-related-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
section.py-20.px-8.bg-surface div[style*="text-align:center"] h2 { font-size: 24px !important; }
/* Mobile dropdown menu (replaces slide-in) */
.tmt-mobile-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: #fff !important;
z-index: 9999 !important;
border-top: 1px solid #e0e0e0 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
padding: 16px 0 !important;
}
.tmt-mobile-dropdown.is-open { display: block !important; }
.tmt-mobile-link {
display: block !important;
padding: 14px 24px !important;
font-family: var(--font-primary) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #000 !important;
text-decoration: none !important;
border-bottom: 1px solid #f0f0f0 !important;
transition: background 0.2s !important;
}
.tmt-mobile-link:last-child { border-bottom: none !important; }
.tmt-mobile-link:active { background: #F4F4F5 !important; }
.tmt-mobile-links-secondary {
display: flex !important;
gap: 0 !important;
padding: 12px 24px 0 !important;
margin-top: 8px !important;
border-top: 1px solid #e0e0e0 !important;
}
.tmt-mobile-links-secondary a {
flex: 1 !important;
text-align: center !important;
font-family: var(--font-primary) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: #000 !important;
opacity: 0.5 !important;
text-decoration: none !important;
padding: 8px 0 !important;
}
.tmt-mobile-links-secondary a:active { opacity: 1 !important; }
/* Hide the old slide-in nav on mobile */
.nav-responsive { display: none !important; }
.responsive-nav-wrapper { display: none !important; }
.page-overlay { display: none !important; }
/* Make header position relative for dropdown positioning */
header[role="banner"] .px-8 { position: relative !important; }
/* Search dropdown — full width fixed under header on mobile.
top tracks the live --tmt-nav-h set by base.twig so the dropdown
sits flush against the bottom of the masthead at every breakpoint
instead of a guessed 120px that left a visible gap on phones
where the real nav height is ~98px. 120px stays as a pre-JS
fallback for the first paint. */
#tmt-search-dropdown {
position: fixed !important;
/* Use --tmt-nav-bottom (viewport-coords bottom) here, not
--tmt-nav-h (height only). Fixed positioning is relative to
the viewport, so we need the nav's actual bottom edge
including any admin-bar offset. --tmt-nav-h would put the
dropdown 32px above the nav for logged-in admin users. */
top: var(--tmt-nav-bottom, var(--tmt-nav-h, 120px)) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid #e0e0e0 !important;
border-radius: 0 !important;
z-index: 99999 !important;
}
/* Zero out the inline `padding: 20px` on the outer wrapper so the
input "kisses" the bottom of the masthead. The input itself
carries its own `padding: 10px 14px` for legible touch-target
sizing, so nothing visually collapses by removing this. */
#tmt-search-dropdown > div[style*="padding"] {
padding: 0 !important;
}
#tmt-search-input-wrap {
margin: 0 !important;
}
/* The results list now contains card rows that own their own
padding — masthead.css zeros this element's padding so cards
go full-bleed in the dropdown. No mobile override needed. */
/* Single product page */
div.px-8[style*="padding-top:70px"]:has(.tmt-sp-layout) { padding-top: 35px !important; }
.tmt-sp-layout { margin-top: 0 !important; }
/* Zoom lightbox — mobile layout */
.tmt-zoom-layout {
flex-direction: column-reverse !important;
}
.tmt-zoom-thumbs {
width: 100% !important; flex-shrink: 0 !important;
flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important;
border-right: none !important; border-top: 1px solid #e0e0e0 !important;
padding: 8px !important; gap: 6px !important;
height: auto !important; max-height: none !important;
}
.tmt-zoom-thumbs img {
width: 56px !important; height: 56px !important; flex-shrink: 0 !important;
}
.tmt-zoom-main {
flex: 1 !important; padding: 16px !important;
}
.tmt-zoom-main img {
max-height: 60vh !important;
}
.tmt-zoom-close {
top: 8px !important; right: 8px !important;
}
.tmt-zoom-caption {
font-size: 12px !important; bottom: 8px !important;
}
/* Limit product images to 4 on mobile */
.tmt-sp-images > div:nth-child(n+5) { display: none !important; }
.tmt-sp-images > .tmt-sp-video { display: none !important; }
.tmt-sp-layout { grid-template-columns: 1fr !important; gap: 0 !important; }
.tmt-sp-images { grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
.tmt-sp-details { padding: 24px 0 !important; }
.tmt-sp-details h1, .tmt-sp-details .product_title { font-size: 24px !important; }
.tmt-sp-price { font-size: 18px !important; }
.tmt-sp-actions .cart { flex-wrap: wrap !important; }
.tmt-sp-actions .cart { flex-wrap: nowrap !important; }
.tmt-sp-actions .single_add_to_cart_button,
.tmt-sp-actions button[type="submit"],
.tmt-sp-actions button.single_add_to_cart_button.button.alt { width: auto !important; min-width: 0 !important; flex: 1 1 0% !important; }
.tmt-sp-summary { font-size: 13px !important; }
.tmt-sp-summary h2, .tmt-sp-summary h3 { font-size: 16px !important; }
/* Info accordions */
.tmt-sp-info-section h3 { font-size: 18px !important; }
/* Related products grid — 2 cols on mobile (3 rows × 2 = 6 items).
Single-class selector so the higher-specificity desktop rule in
woo-single.css wins outside this media block but this wins inside it. */
.tmt-shop-grid.tmt-sp-related-grid,
.tmt-sp-related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.tmt-sp-related-grid .tmt-product-name {
font-size: 12px !important; text-align: center !important; padding: 8px 12px 2px !important; width: 100% !important;
}
.tmt-sp-related-grid .tmt-product-card div[style*="padding:10px 12px"] {
padding: 2px 12px 8px !important; font-size: 12px !important; text-align: center !important; justify-content: center !important; width: 100% !important;
}
.tmt-sp-related-grid .tmt-product-card div[style*="bottom:12px"] {
bottom: 4px !important; left: 4px !important; right: 4px !important;
flex-direction: column !important; align-items: flex-start !important;
}
.tmt-sp-related-grid .tmt-product-img { position: relative !important; overflow: hidden !important; }
.tmt-sp-related-grid .tmt-product-card div[style*="top:12px"][style*="right:12px"] {
position: absolute !important; top: 8px !important; right: 8px !important;
padding: 6px 8px !important; font-size: 10px !important;
background: #fff !important; color: #C62828 !important; z-index: 4 !important;
}
/* Product Spotlight grid — 2 cols on mobile/tablet so each card is half-
width instead of full-width. The base `.tmt-shop-grid` mobile rule
lower in this file forces 1-column for every shop grid; this 2-class
selector beats it on specificity inside this media block, so the
spotlight row goes 2-up while everything else stays per its own rule.
Card-visual rules (image padding, image size, name-bar styling) live
in woo-single.css alongside the related-grid rules so both grids
render visually identical at every breakpoint — no override needed
here for the visual layer. */
.tmt-shop-grid.tmt-sp-spotlight-grid,
.tmt-sp-spotlight-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
/* Basket page */
.tmt-cart-section { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-cart-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important; text-align: center !important;
}
.tmt-cart-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-cart-heading__desc { text-align: center !important; }
/* Cart table — simplified for mobile.
Wrapper class is `.tmt-cart-page__woo` (set in views/woo/cart-page.twig).
The previous rules used `.tmt-cart-content` which doesn't exist
on this template, so they silently did nothing. */
.tmt-cart-page__woo .shop_table { border: none !important; }
/* Hide the per-item Price column on mobile so the Quantity input
and Subtotal columns get the breathing room they need. The
Subtotal column already shows "£X.XX (incl. VAT)" which is
what the customer cares about; per-item price is redundant
when there's only one of each line. Both the | header and
every | cell with the matching column class are hidden. */
.tmt-cart-page__woo .shop_table .product-price,
.tmt-cart-page__woo .shop_table th.product-price { display: none !important; }
.tmt-cart-page__woo .shop_table th { font-size: 10px !important; padding: 8px 4px !important; letter-spacing: 0.08em !important; }
.tmt-cart-page__woo .shop_table td { padding: 12px 4px !important; font-size: 12px !important; vertical-align: middle !important; }
.tmt-cart-page__woo .shop_table td.product-thumbnail img { max-width: 50px !important; height: auto !important; }
.tmt-cart-page__woo .shop_table td.product-name { font-size: 11px !important; font-weight: 700 !important; }
.tmt-cart-page__woo .shop_table td.product-name a { font-size: 11px !important; text-decoration: none !important; }
.tmt-cart-page__woo .shop_table .product-quantity input { width: 48px !important; padding: 6px !important; font-size: 12px !important; }
.tmt-cart-page__woo .shop_table td.product-remove a { width: 24px !important; height: 24px !important; font-size: 18px !important; }
/* Cart totals — full width */
.tmt-cart-page__woo .cart_totals { max-width: 100% !important; margin-left: 0 !important; }
/* Return to shop button — centred, full width */
.tmt-cart-page__woo .return-to-shop { text-align: center !important; }
.tmt-cart-page__woo .return-to-shop a { display: block !important; width: 100% !important; text-align: center !important; }
/* Coupon input */
.tmt-cart-page__woo .coupon { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.tmt-cart-page__woo .coupon input { width: 100% !important; }
.tmt-cart-page__woo .coupon button { width: 100% !important; }
/* Blog page */
.tmt-blog-section { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-blog-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important; text-align: center !important;
}
.tmt-blog-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-blog-heading__desc { text-align: center !important; }
/* Toolbar — stack search below filters */
.tmt-blog-toolbar { flex-wrap: wrap !important; gap: 6px !important; }
.tmt-blog-filter { font-size: 10px !important; padding: 6px 12px !important; }
.tmt-blog-search { width: 100% !important; margin-top: 4px !important; }
/* Blog grid — single column */
.tmt-blog-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.tmt-blog-grid-frame { padding: 4px !important; }
/* Blog cards — taller on mobile for readability */
.tmt-blog-card { aspect-ratio: 16/10 !important; }
/* Careers + Work With Us pages */
.tmt-careers-section, .tmt-wwu-section { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-careers-heading, .tmt-wwu-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important; text-align: center !important;
}
.tmt-careers-heading__title, .tmt-wwu-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-careers-heading__desc, .tmt-wwu-heading__desc { text-align: center !important; }
.tmt-careers-layout, .tmt-wwu-layout { gap: 24px !important; }
.tmt-careers-sidebar, .tmt-wwu-sidebar { padding: 24px !important; }
/* Individual brand pages (/brands/brushworks-beauty-accessories/) */
.tmt-brand-page { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-brand-page-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important; text-align: center !important;
}
.tmt-brand-page-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-brand-page-heading__desc { text-align: center !important; }
.tmt-brand-title-block { padding: 32px 20px !important; }
.tmt-brand-title-block h1 { font-size: 28px !important; }
.tmt-brand-block { grid-template-columns: 1fr !important; min-height: auto !important; }
.tmt-brand-block--flip .tmt-brand-block__img { order: 0 !important; }
.tmt-brand-block__img { min-height: 200px !important; }
.tmt-brand-block__text { padding: 32px 20px !important; text-align: center !important; }
.tmt-brand-block__text h2 { font-size: 24px !important; text-align: center !important; }
.tmt-brand-banner { height: 30vh !important; min-height: 180px !important; }
.tmt-brand-products-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.tmt-brand-general { padding: 32px 20px !important; text-align: center !important; }
.tmt-brand-general h2, .tmt-brand-general h3 { font-size: 22px !important; text-align: center !important; }
.tmt-brand-cta { padding: 40px 20px !important; }
.tmt-brand-cta h2 { font-size: 24px !important; }
/* Legal pages (Privacy Policy, Terms & Conditions) */
.tmt-legal { padding-top: 16px !important; padding-bottom: 40px !important; }
.tmt-legal-heading {
margin-left: -16px !important; margin-right: -16px !important;
width: calc(100% + 32px) !important; padding: 32px 20px !important;
text-align: center !important;
}
.tmt-legal-heading__title { font-size: 28px !important; text-align: center !important; }
.tmt-legal-heading__meta { flex-direction: column !important; align-items: center !important; gap: 4px !important; }
.tmt-legal-heading__desc { text-align: center !important; }
.tmt-legal-layout { gap: 24px !important; }
.tmt-legal-content { font-size: 14px !important; }
.tmt-legal-content h2, .tmt-legal-content h3 { font-size: 20px !important; }
.tmt-legal-sidebar { padding: 24px !important; }
/* Shop page — mobile responsive */
.tmt-shop { padding-top: 16px !important; padding-bottom: 16px !important; }
.tmt-shop-container { max-width: 100% !important; }
/* Hero strip — full width edge to edge, centred text */
.tmt-shop-heading { padding: 32px 16px !important; min-height: auto !important; margin-left: -16px !important; margin-right: -16px !important; width: calc(100% + 32px) !important; }
.tmt-shop-heading__inner { text-align: center !important; width: 100% !important; }
.tmt-shop-heading__title { font-size: 28px !important; text-align: center !important; width: 100% !important; }
.tmt-shop-heading__desc { font-size: 13px !important; text-align: center !important; width: 100% !important; }
/* Filter bar — hide accordion filters on mobile, show sort + count only */
.tmt-filter-bar {
flex-wrap: nowrap !important; gap: 8px !important;
padding-bottom: 0 !important; margin-bottom: 12px !important;
align-items: center !important;
}
tmt-filter-bar form { display: none !important; }
.tmt-mobile-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
margin-bottom: 12px;
border: 1px solid #111;
background: #111;
color: #fff;
text-transform: uppercase;
letter-spacing: .08em;
}
.tmt-filter-bar form {
display: none !important;
}
.tmt-filter-bar.is-mobile-filter-open form {
display: flex !important;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}
.tmt-mobile-filter-btn {
display: none;
}
.tmt-filter-bar .tmt-item-count {
font-size: 11px !important; white-space: nowrap !important;
flex: 1 !important; text-align: left !important;
}
.tmt-filter-bar .tmt-sort-wrap { flex-shrink: 0 !important; }
.tmt-filter-bar .tmt-sort-btn {
font-size: 10px !important; padding: 8px 14px !important; white-space: nowrap !important;
}
/* Sort dropdown panel */
.tmt-sort-panel { left: auto !important; right: 0 !important; }
/* Product grid — single column on mobile */
.tmt-shop-grid {
grid-template-columns: 1fr !important; gap: 8px !important;
}
/* Product image — maintain positioning context for tags */
.tmt-shop-grid .tmt-product-img { position: relative !important; overflow: hidden !important; }
/* Product card — name bar stays at bottom, tighter on mobile (all grids) */
.tmt-shop-grid .tmt-product-card div[style*="bottom:12px"],
.tmt-brand-products-grid .tmt-product-card div[style*="bottom:12px"] {
bottom: 4px !important; left: 4px !important; right: 4px !important;
flex-direction: column !important; align-items: flex-start !important;
}
.tmt-shop-grid .tmt-product-name,
.tmt-brand-products-grid .tmt-product-name {
font-size: 12px !important; letter-spacing: 0.08em !important;
padding: 8px 12px 2px !important; width: 100% !important; text-align: center !important;
margin: 0 !important;
}
.tmt-shop-grid .tmt-product-card div[style*="padding:10px 12px"],
.tmt-brand-products-grid .tmt-product-card div[style*="padding:10px 12px"] {
padding: 2px 12px 8px !important; font-size: 12px !important; width: 100% !important;
justify-content: center !important; text-align: center !important;
}
/* Product card tags — keep absolute inside product image on mobile (all grids) */
.tmt-shop-grid .tmt-product-card div[style*="top:12px"][style*="right:12px"],
.tmt-brand-products-grid .tmt-product-card div[style*="top:12px"][style*="right:12px"] {
position: absolute !important; top: 8px !important; right: 8px !important;
padding: 6px 8px !important; font-size: 10px !important;
background: #fff !important; color: #C62828 !important; z-index: 4 !important;
}
/* Product image container — maintain positioning for tags (all grids) */
.tmt-shop-grid .tmt-product-img,
.tmt-brand-products-grid .tmt-product-img { position: relative !important; overflow: hidden !important; }
/* Hide empty filter dropdowns (no label) */
.tmt-filter-bar .filter-dropdown-btn:empty,
.tmt-filter-bar button:empty { display: none !important; }
/* Brand tiles row — 2x4 grid on mobile, consistent square tiles */
.tmt-shop-brands-row .tmt-brand-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
.tmt-shop-brands-row .brand-card {
aspect-ratio: 1/1 !important; min-height: 0 !important; height: auto !important;
overflow: hidden !important; position: relative !important;
}
.tmt-shop-brands-row .brand-card img[class*="brand-bg"],
.tmt-shop-brands-row .brand-card img:first-child {
position: absolute !important; inset: 0 !important; width: 100% !important;
height: 100% !important; object-fit: cover !important; opacity: 0.5 !important;
}
.tmt-shop-brands-row .brand-logo-wrap {
position: relative !important; z-index: 1 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
width: 100% !important; height: 100% !important; padding: 12px !important;
}
.tmt-shop-brands-row .brand-logo-img {
max-width: 80% !important; max-height: 80% !important;
}
.tmt-shop-brands-row .brand-card h3 { font-size: 10px !important; }
.tmt-shop-brands-row .brand-btn { display: none !important; }
/* Force ALL multi-column grids to stack on mobile */
.tmt-shop-container [style*="grid-template-columns"],
.tmt-shop ~ * [style*="grid-template-columns"],
.tmt-gradient-top,
div[style*="display:grid"],
div[style*="display: grid"],
section[style*="display:grid"],
section[style*="display: grid"] {
grid-template-columns: 1fr !important;
}
.tmt-gradient-top > div,
.tmt-gradient-top > section {
min-height: auto !important;
}
/* Category description / ACF content panels — nuclear formatting on mobile */
.tmt-shop ~ section,
.tmt-shop ~ div,
.tmt-shop-container ~ *,
.woocommerce-products-header__description {
text-align: center !important;
}
.tmt-shop ~ section *,
.tmt-shop ~ div *,
.woocommerce-products-header__description *,
.woocommerce-products-header__description p,
.woocommerce-products-header__description span,
.woocommerce-products-header__description h2,
.woocommerce-products-header__description h3 {
font-family: var(--font-primary) !important;
text-align: center !important;
}
.woocommerce-products-header__description h2,
.woocommerce-products-header__description h3 {
font-family: var(--font-secondary) !important;
font-size: 28px !important;
line-height: 1.3 !important;
}
.woocommerce-products-header__description p {
font-size: 14px !important;
line-height: 1.6 !important;
}
/* Strip empty paragraphs and excessive spacing from ACF content */
.woocommerce-products-header__description p:empty { display: none !important; }
.woocommerce-products-header__description [style*="font-family"] { font-family: var(--font-primary) !important; }
.woocommerce-products-header__description [style*="font-size"] { font-size: 14px !important; }
.woocommerce-products-header__description [style*="text-align: center"],
.woocommerce-products-header__description [style*="text-align:center"] { text-align: center !important; }
/* ACF split panels / promo sections below products */
.tmt-split-panel { text-align: center !important; }
.tmt-split-text { text-align: center !important; align-items: center !important; }
.tmt-split-text h2, .tmt-split-text h3 { text-align: center !important; }
.tmt-split-text p { text-align: center !important; }
/* Load more button — tighter spacing */
.button--load-more { font-size: 11px !important; padding: 12px 24px !important; margin-top: 8px !important; margin-bottom: 8px !important; }
/* Quiz slideshow — stack columns vertically */
.tmt-quiz-slideshow { position: relative !important; height: auto !important; min-height: 0 !important; }
.tmt-quiz-slide {
position: relative !important;
inset: auto !important;
display: none !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 8px !important;
transition: none !important;
}
.tmt-quiz-slide.is-active { display: grid !important; opacity: 1 !important; }
.tmt-quiz-slide[data-flip="true"] .tmt-quiz-image,
.tmt-quiz-slide[data-flip="true"] .tmt-quiz-magazine { order: unset !important; }
.tmt-quiz-image { aspect-ratio: 4/3 !important; clip-path: none !important; transition: none !important; }
.tmt-quiz-magazine { clip-path: none !important; padding: 32px 16px !important; transition: none !important; min-height: 0 !important; }
.tmt-quiz-card { padding: 32px 24px !important; max-width: 100% !important; }
.tmt-quiz-card > div:first-child { margin-bottom: 24px !important; }
.tmt-quiz-card > div:first-child + div { margin-bottom: 24px !important; }
.tmt-quiz-card h2 { font-size: 30px !important; margin-bottom: 16px !important; line-height: 1.15 !important; }
.tmt-quiz-card p { font-size: 14px !important; margin-bottom: 28px !important; line-height: 1.6 !important; max-width: 100% !important; }
.tmt-quiz-card a[style*="background:#000"] {
padding: 14px 22px !important;
font-size: 11px !important;
letter-spacing: 0.15em !important;
width: 100%;
justify-content: center !important;
}
/* Newsletter slideshow — same stacking behavior */
.tmt-newsletter-slideshow { position: relative !important; height: auto !important; min-height: 0 !important; }
.tmt-newsletter-slide {
position: relative !important;
inset: auto !important;
display: none !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
gap: 8px !important;
transition: none !important;
}
.tmt-newsletter-slide.is-active { display: grid !important; opacity: 1 !important; }
.tmt-newsletter-slide[data-flip="true"] .tmt-newsletter-image,
.tmt-newsletter-slide[data-flip="true"] .tmt-newsletter-panel { order: unset !important; }
.tmt-newsletter-image { aspect-ratio: 4/3 !important; clip-path: none !important; transition: none !important; }
.tmt-newsletter-panel { clip-path: none !important; padding: 32px 16px !important; transition: none !important; }
.tmt-newsletter-card { padding: 32px 24px !important; max-width: 100% !important; }
.tmt-newsletter-card h2 { font-size: 28px !important; margin-bottom: 16px !important; line-height: 1.15 !important; }
.tmt-newsletter-card p { font-size: 14px !important; margin-bottom: 24px !important; line-height: 1.6 !important; }
.tmt-newsletter-card form { flex-direction: column !important; max-width: 100% !important; gap: 8px !important; }
.tmt-newsletter-card input[type="email"] { border-right: 1px solid #000 !important; border-bottom: 1px solid #000 !important; width: 100%; }
.tmt-newsletter-card button { width: 100% !important; padding: 14px 24px !important; }
/* Review carousel (Our Community) — 1 col, mobile-friendly card layout */
#review-carousel { grid-template-columns: 1fr !important; gap: 8px !important; }
.review-col { min-height: 320px !important; }
.review-card { min-height: 320px !important; padding: 28px 24px !important; }
/* Stars */
.review-card span[style*="font-size:28px"] { font-size: 22px !important; letter-spacing: 3px !important; }
/* Quote text */
.review-card p[style*="font-size:18px"] { font-size: 16px !important; line-height: 1.55 !important; }
/* Platform logo in card footer */
.review-card img[style*="height:72px"] { height: 48px !important; }
/* View Review link */
.review-card a[style*="letter-spacing:0.12em"] { font-size: 11px !important; letter-spacing: 0.08em !important; }
/* Hide 2nd and 3rd review columns — show only 1 column on mobile */
#review-carousel .review-col:nth-child(n+2) { display: none !important; }
/* Reviews platform logos strip — center on mobile */
section[class*="tmt-reveal"] > div > div[style*="display:flex"][style*="border-bottom"] {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px 20px !important;
padding-bottom: 16px !important;
margin-bottom: 20px !important;
}
/* Platform logo images in strip — smaller on mobile */
section[class*="tmt-reveal"] > div > div[style*="border-bottom"] img[style*="height:72px"] {
height: 48px !important;
}
/* "As reviewed on" label — full width, centered */
section[class*="tmt-reveal"] > div > div[style*="border-bottom"] span[style*="opacity:0.5"] {
width: 100% !important;
margin-bottom: 4px !important;
text-align: center !important;
}
/* Section headings — scale down & center */
.tmt-section-label { font-size: 11px !important; letter-spacing: 0.15em !important; text-align: center !important; }
.tmt-section-heading { font-size: 28px !important; line-height: 1.15 !important; text-align: center !important; }
h2[style*="font-size:40px"] { font-size: 28px !important; text-align: center !important; }
h2[style*="font-size:48px"] { font-size: 28px !important; text-align: center !important; }
/* Word carousel — reduce padding */
.tmt-word-carousel { padding: 18px 0 22px !important; }
/* Social bar */
.tmt-social-bar { padding: 16px 0 !important; height: auto !important; }
/* Our Community section padding */
section[class*="tmt-reveal"][style*="reviews"] { padding-top: 48px !important; padding-bottom: 48px !important; }
}
/* ── HOMEPAGE 2026 REDESIGN — EXTRA SMALL (≤480px) ── */
@media (max-width: 480px) {
/* Tighter card labels */
.brand-card [class*="name-bar"] span,
.tmt-collection-card span[style*="letter-spacing:0.12em"],
.tmt-product-card .tmt-product-name { font-size: 10px !important; letter-spacing: 0.08em !important; }
/* Quiz + newsletter heading tighter */
.tmt-quiz-card h2 { font-size: 26px !important; }
.tmt-newsletter-card h2 { font-size: 24px !important; }
/* Explore button tighter */
.tmt-collection-btn span,
.brand-btn span { padding: 10px 20px !important; font-size: 10px !important; letter-spacing: 0.12em !important; }
}
/* ── PDP "You May Also Like" + "Product Spotlight" — phone-only
single-column override.
The 2-col rule inside the @media (max-width:1023px) block above
stays in force for tablets (641-1023px). On phones both grids
collapse to one card per row.
Both grids are constrained to the same max-width (300px) and
centred so each card renders at exactly the same physical size
regardless of any container-width difference between the two
sections (spotlight sits in the full PDP wrapper, related sits
inside the product summary column — naturally the same on mobile
but this guarantees parity even if upstream wrappers shift). */
@media (max-width: 640px) {
.tmt-shop-grid.tmt-sp-related-grid,
.tmt-sp-related-grid,
.tmt-shop-grid.tmt-sp-spotlight-grid,
.tmt-sp-spotlight-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
max-width: 380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 1023px) {
.tmt-mobile-filter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
margin-bottom: 12px;
border: 1px solid #111;
background: #111;
color: #fff;
text-transform: uppercase;
letter-spacing: .08em;
}
.tmt-filter-bar form {
position: fixed !important;
top: 150px !important;
left: 0 !important;
z-index: 2147483647 !important;
width: 85% !important;
max-width: 360px !important;
height: calc(100dvh - 150px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 24px 24px 120px !important;
background: #fff !important;
box-sizing: border-box;
transform: translateX(-100%);
transition: transform .3s ease;
display: block !important;
}
.tmt-filter-bar.is-mobile-filter-open form {
transform: translateX(0);
}
body.tmt-mobile-filter-open::before {
content: "";
position: fixed;
top: 150px;
left: 85%;
right: 0;
bottom: 0;
background: rgba(0,0,0,.45);
z-index: 2147483646;
pointer-events: none;
}
} |