/* Shop POS theme: everything but the shop pages (those are in shop.css).
   Colours, fonts and corners come from the chosen style as CSS variables (see inc/styles.php). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
	margin: 0; background: var(--c-bg); color: var(--c-ink);
	font-family: var(--f-body); font-size: 16px; line-height: 1.55;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--c-accent-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track);
	line-height: 1.15; margin: 0 0 .5em; color: var(--c-ink); text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: clamp(23px, 2.8vw, 32px); }
h3 { font-size: clamp(19px, 2vw, 23px); }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 32px 0; }
::selection { background: var(--c-soft); color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-accent-text); outline-offset: 3px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--c-surface); color: var(--c-ink); border-radius: 10px; }
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px); }
.wrap-narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px); }
.page-pad { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(40px, 6vw, 72px); }
.center { text-align: center; }

/* ---------- Buttons and fields ---------- */
.btn, .button, button.button, input[type="submit"], input[type="button"], .wp-element-button, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-btn);
	background: var(--c-accent); color: var(--c-on-accent); font-family: var(--f-body); font-size: 16px; font-weight: 600;
	line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter .15s, transform .1s;
}
.btn:hover, .button:hover, input[type="submit"]:hover, .wp-element-button:hover, .wp-block-button__link:hover { filter: brightness(.94); color: var(--c-on-accent); }
.btn:active, .button:active { transform: translateY(1px); }
.btn.is-ghost, .is-style-outline .wp-block-button__link { background: transparent; color: var(--c-accent-text); box-shadow: inset 0 0 0 1.5px currentColor; }
.icon-btn {
	display: inline-grid; place-items: center; position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px;
	background: transparent; color: var(--c-ink); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--c-soft); }
.icon-btn .count, .tab-icon .count {
	position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--c-accent); color: var(--c-on-accent); font: 700 11px/18px var(--f-body); text-align: center;
}
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
	width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--c-line); border-radius: min(var(--r-btn), 14px);
	background: var(--c-surface); color: var(--c-ink); font: 16px/1.4 var(--f-body); -webkit-appearance: none; appearance: none;
}
textarea { min-height: 120px; }
select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-accent-text); outline-offset: 0; border-color: transparent; }
label { font-weight: 600; font-size: 14px; }

/* ---------- The style's icon (a paw, a flower...) ---------- */
.motif, .has-motif .block-head h2::before, .has-motif .spos-h__head h2::before, .has-motif .announce::before, .has-motif .page-head .page-title::after {
	content: ""; display: inline-block; width: .82em; height: .82em; background: var(--c-accent-text);
	-webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat;
}
.has-motif .block-head h2::before, .has-motif .spos-h__head h2::before { margin-right: .38em; vertical-align: -.06em; }
.has-motif .announce::before { background: currentColor; margin-right: 8px; vertical-align: -2px; width: 15px; height: 15px; }
.has-motif .page-head .page-title::after { width: .55em; height: .55em; margin-left: .3em; vertical-align: .1em; opacity: .9; }
.spos-icon { flex: none; }

/* ---------- Top line ---------- */
.announce { background: var(--c-accent); color: var(--c-on-accent); text-align: center; font-size: 13px; font-weight: 600; padding: 8px 16px; }
.announce a { color: inherit; text-decoration: none; }
.announce a:hover { text-decoration: underline; }
.style-clothing .announce { background: var(--c-ink); color: var(--c-surface); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header.is-tall { position: relative; } /* a menu of several rows would cover the page if it stayed stuck to the top */
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(20, 30, 40, .06); }
.header-inner { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.header-start, .header-end { display: flex; align-items: center; gap: 2px; }
.header-start { flex: 1; min-width: 0; }
.header-end { margin-left: auto; flex: none; } /* the icons (search, account, cart) keep their room: a long menu wraps instead of pushing them off the screen */
.brand { min-width: 0; }
.brand .custom-logo { width: auto; max-height: 48px; }
.brand:has(.logo-name) { display: flex; align-items: center; gap: 10px; }
.site-name.logo-name { white-space: normal; font-size: 18px; }
.site-name.has-icon { display: flex; align-items: center; gap: 10px; }
.site-name .site-icon-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; }
.site-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.site-name {
	display: block; font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track);
	font-size: 22px; line-height: 1.1; color: var(--c-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-start .brand { margin-left: 4px; }
.logo-center .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.logo-center .brand-center { text-align: center; }
.logo-center .brand-center .custom-logo { margin: 0 auto; }
.logo-center .header-nav { display: none !important; }
.style-clothing .site-name { font-size: 26px; letter-spacing: .02em; }
.style-flowers .site-name { font-style: italic; font-size: 26px; }

.header-nav { display: none; }
@media (min-width: 1024px) {
	.header-nav { display: block; margin-left: 24px; flex: 1 1 0; min-width: 0; }
	body:not(.logo-center) .menu-toggle { display: none; }
	.header-start { flex: 0 1 auto; }
}
.nav-list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; }
.nav-list a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav-list a:hover, .nav-list .current-menu-item > a, .nav-list .current-menu-ancestor > a { background: var(--c-soft); }
.nav-list .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; margin: 0; padding: 8px; list-style: none;
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 30, 40, .12);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav-list .sub-menu a { font-weight: 500; }

/* With the tab bar at the bottom, phones don't need the account icon at the top. */
@media (max-width: 1023px) { .has-tabbar .header-account { display: none; } }

/* ---------- Search sheet ---------- */
.search-sheet { position: sticky; top: 64px; z-index: 45; background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: 12px 0; }
.search-form, .woocommerce-product-search { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-form .search-field, .woocommerce-product-search .search-field { flex: 1; }
.woocommerce-product-search button, .search-submit { flex: none; }

/* ---------- Phone menu ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer-scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(15, 20, 24, .45); opacity: 0; transition: opacity .2s; }
.drawer-panel {
	position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; width: min(86vw, 380px); overflow-y: auto; overscroll-behavior: contain;
	background: var(--c-surface); padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); transform: translateX(-100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
	display: flex; flex-direction: column; gap: 8px;
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 52px; margin-bottom: 4px; }
.drawer-list, .drawer-list ul { margin: 0; padding: 0; list-style: none; }
.drawer-list li { position: relative; }
/* Top level: full-width rows with a hairline between, like a settings list. */
.drawer-list > li { border-bottom: 1px solid var(--c-line); }
.drawer-list > li > a { display: flex; align-items: center; min-height: 54px; padding: 0 52px 0 8px; color: var(--c-ink); text-decoration: none; font-weight: 500; font-size: 16px; border-radius: 0; }
.drawer-list a:hover, .drawer-list .current-menu-item > a { background: var(--c-soft); }
.drawer-list .sub-toggle { position: absolute; top: 5px; right: 0; width: 44px; height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--c-sub); cursor: pointer; display: grid; place-items: center; }
.drawer-list .sub-toggle svg { transition: transform .2s; }
.drawer-list .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Opened: a soft panel with the categories inside. */
.drawer-list > li > .sub-menu { background: var(--c-bg); background: color-mix(in srgb, var(--c-ink) 5%, var(--c-surface)); margin: 0 -16px; padding: 6px 16px 12px; }
.drawer-list .sub-menu a { display: block; padding: 9px 8px 9px 20px; min-height: 0; color: var(--c-ink); text-decoration: none; font-weight: 400; font-size: 15px; line-height: 1.35; border-radius: 10px; }
/* A category that has its own sub-categories becomes a bold heading, its children listed under it. */
.drawer-list .sub-menu > li.menu-item-has-children { margin-top: 6px; }
.drawer-list .sub-menu > li.menu-item-has-children > a { font-weight: 700; font-size: 14px; padding-top: 10px; }
.drawer-list .sub-menu .sub-menu { padding: 0 0 4px; }
.drawer-list .sub-menu .sub-menu a { padding-left: 34px; color: var(--c-sub); }
.drawer-list .sub-menu .sub-menu .sub-menu a { padding-left: 48px; }
.drawer-list .sub-menu > li.view-all > a { color: var(--c-accent-text); font-weight: 600; font-size: 14px; }
.drawer-links { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line); display: grid; gap: 2px; }
.drawer-links a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-radius: 12px; color: var(--c-ink); text-decoration: none; font-weight: 500; }
.drawer-links a:hover { background: var(--c-soft); }
.drawer-open { overflow: hidden; }

/* ---------- Bottom tab bar (phones) ---------- */
.tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
	background: var(--c-surface); border-top: 1px solid var(--c-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding-top: 4px; color: var(--c-sub); text-decoration: none; font-size: 11px; font-weight: 600; }
.tab-icon { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: 14px; }
.tab-icon .count { top: -4px; right: 0; }
.tab[aria-current="page"] { color: var(--c-accent-text); }
.tab[aria-current="page"] .tab-icon { background: var(--c-soft); }
.has-tabbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
	.tabbar { display: none; }
	.has-tabbar { padding-bottom: 0; }
}
/* Floating buttons (website chat, the add-to-home-screen card) sit above the tab bar, never on it */
@media (max-width: 1023px) {
	body.has-tabbar .spos-chat:not(.is-open) { right: 14px; bottom: calc(68px + 14px + env(safe-area-inset-bottom)); }
	body.has-tabbar .spos-chat .spos-launch { width: 52px; height: 52px; }
	body.has-tabbar .spos-pwa { bottom: calc(68px + 12px + env(safe-area-inset-bottom)); }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(32px, 6vw, 72px); background: var(--c-surface); border-top: 1px solid var(--c-line); color: var(--c-sub); font-size: 15px; }
.footer-grid { display: grid; gap: 32px; padding-top: 40px; padding-bottom: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-about .brand { margin-bottom: 12px; }
.footer-words p { margin: 0 0 8px; }
.footer-address { display: flex; gap: 8px; align-items: flex-start; }
.footer-address svg { margin-top: 2px; color: var(--c-accent-text); }
.footer-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.footer-list a, .footer-widgets a { color: var(--c-ink); text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-title { font-size: 15px; margin-bottom: 10px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid var(--c-line); font-size: 13px; }
.footer-bottom a { color: inherit; }
.footer-social { display: flex; gap: 6px; margin: 14px 0 0; }
.footer-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 20px; color: var(--c-ink); background: var(--c-soft); text-decoration: none; }
.footer-social a:hover { filter: brightness(.95); }
/* Footer looks: plain (the page's surface), softly tinted, or the shop's own colour */
.site-footer.look-soft { background: var(--c-soft); }
.site-footer.look-soft .footer-social a { background: var(--c-surface); }
.site-footer.look-brand { background: var(--c-accent); color: var(--c-on-accent); border-top: 0; }
.site-footer.look-brand a, .site-footer.look-brand .site-name, .site-footer.look-brand .footer-title, .site-footer.look-brand .footer-list a, .site-footer.look-brand .footer-widgets a { color: var(--c-on-accent); }
.site-footer.look-brand .footer-widgets h2, .site-footer.look-brand .footer-widgets .wp-block-heading, .site-footer.look-brand .footer-widgets h3, .site-footer.look-brand .footer-widgets { color: var(--c-on-accent); }
.site-footer.look-brand .footer-address svg { color: var(--c-on-accent); }
.site-footer.look-brand .footer-bottom { border-top-color: rgba(255, 255, 255, .25); }
.site-footer.look-brand .footer-social a { background: rgba(255, 255, 255, .18); color: var(--c-on-accent); }

/* ---------- Pages and posts ---------- */
.crumbs { font-size: 13px; color: var(--c-sub); margin: 0 0 14px; }
.crumbs a { color: var(--c-sub); text-decoration: none; }
.crumbs a:hover { color: var(--c-ink); text-decoration: underline; }
.page-head { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(8px, 2vw, 16px); }
.page-title { margin: 0 0 .25em; }
.page-lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--c-sub); margin: 0 0 1em; max-width: 46ch; }
.prose { font-size: 17px; line-height: 1.7; }
.prose > * { margin-top: 0; margin-bottom: 1.15em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose blockquote, .wp-block-quote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--c-accent); font-family: var(--f-head); font-size: 1.2em; line-height: 1.45; }
.prose img, .prose .wp-block-image img { border-radius: var(--r-img); }
.prose figcaption { font-size: 14px; color: var(--c-sub); text-align: center; margin-top: 8px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--c-line); text-align: left; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--c-soft); font-size: .9em; }
/* Wide and full-width blocks: inside narrow text they reach out; inside the wide page frame they simply fill it */
.alignwide { max-width: 100%; }
.prose .alignwide { width: min(1180px, 100vw - 32px); max-width: none; margin-left: calc(50% - min(590px, 50vw - 16px)); margin-right: 0; }
.prose .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; }
.site-main { overflow-x: clip; }
/* Nothing may widen the page sideways: a closed menu panel (the wide Shop panel starts at its link and can reach past
   the screen's edge while hidden) would otherwise leave an empty strip on the right. clip keeps sticky parts working. */
body { overflow-x: clip; }
.site-header, .site-footer { max-width: 100%; overflow-x: clip; }
.alignfull img { border-radius: 0 !important; }
.wp-block-separator { border: 0; border-top: 1px solid var(--c-line); }

/* Blog list */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 18px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-btn); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.chip[aria-current="page"], .chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.post-grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 8px 0 32px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 12px; }
.post-card-media { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-img); overflow: hidden; background: var(--c-soft); }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card-media img { transform: scale(1.03); }
.post-card-title { font-size: 21px; margin: 0; }
.post-card-link { color: var(--c-ink); text-decoration: none; }
.post-card-link::after { content: ""; position: absolute; inset: 0; }
.post-card-link:hover { text-decoration: underline; }
.post-card-excerpt { color: var(--c-sub); margin: 0; font-size: 15px; }
.post-card-meta, .post-meta { font-size: 13px; color: var(--c-sub); }
.post-cat { color: var(--c-accent-text); font-weight: 700; text-decoration: none; position: relative; z-index: 1; }
.post-head { padding-top: clamp(24px, 4vw, 48px); }
.post-title { font-size: clamp(32px, 4.6vw, 50px); margin: 10px 0 14px; }
.post-hero { margin-top: 20px; margin-bottom: 32px; }
.post-hero img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--r-img); }
.post-foot { padding-top: 16px; border-top: 1px solid var(--c-line); margin-top: 32px; }
.nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0; }
.nav-links a { display: block; padding: 16px; border-radius: var(--r-card); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.nav-links .nav-next { text-align: right; }
.nav-label { display: block; font-size: 13px; color: var(--c-sub); }
.nav-title { font-weight: 700; }
.pagination, .page-numbers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0; justify-content: center; }
a.page-numbers, span.page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r-btn); background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; font-weight: 600; }
span.page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.comments { margin-top: 40px; }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 16px 0; border-top: 1px solid var(--c-line); }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-author img { border-radius: 50%; float: left; margin-right: 10px; }

/* Empty pages (nothing found, 404, empty cart and wishlist): the style's icon, large and soft */
.empty { text-align: center; padding: clamp(32px, 6vw, 64px) 0; }
.empty-icon, .woocommerce-cart .cart-empty::before, .wc-block-cart__empty-cart__title::before {
	content: ""; display: block; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
	background: var(--c-soft); position: relative;
}
.empty-icon::after, .woocommerce-cart .cart-empty::after {
	content: ""; position: absolute; inset: 22px; background: var(--c-accent-text);
	-webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat;
}

/* ---------- Homepage ---------- */
.home-sections { padding: 0 clamp(16px, 3vw, 28px); }
.home-hero { padding-top: 20px; }
.home-hero-card { padding: clamp(28px, 6vw, 72px); border-radius: var(--r-card); background: var(--tone-1); }
.home-hero-title { font-size: clamp(36px, 6vw, 64px); max-width: 14ch; }
.home-block { margin-top: clamp(36px, 6vw, 64px); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.block-head h2 { margin: 0; }
.block-head a { font-weight: 600; text-decoration: none; white-space: nowrap; }

/* The plugin's homepage sections, in the style's fonts, corners and tones */
body.spt .spos-h { --spos-r: var(--r-card); }
body.spt .spos-h h1, body.spt .spos-h h2, body.spt .spos-h h3 { font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); }
body.spt .spos-h__btn { border-radius: var(--r-btn); }
body.spt .spos-h__head a { color: var(--c-accent-text); }
body.spt .spos-h__hero.no-img, body.spt .spos-h__hero:not(:has(img)) { background: var(--tone-1); }
body.spt .spos-h__hero.is-card .spos-h__copy { border-radius: calc(var(--r-card) - 6px); }
body.spt .spos-h__cats li:nth-child(4n+1) .spos-h__cat-img { background: var(--tone-1) !important; }
body.spt .spos-h__cats li:nth-child(4n+2) .spos-h__cat-img { background: var(--tone-2) !important; }
body.spt .spos-h__cats li:nth-child(4n+3) .spos-h__cat-img { background: var(--tone-3) !important; }
body.spt .spos-h__cats li:nth-child(4n+4) .spos-h__cat-img { background: var(--tone-4) !important; }
body.spt .spos-h__cats.is-pills a { border-radius: var(--r-btn); }
body.spt .spos-h__cats.is-pills .spos-h__cat-img { background: none !important; }
body.spt .spos-h__cats.is-tiles .spos-h__cat-img { border-radius: var(--r-img); }
body.spt.img-arch .spos-h__cats.is-tiles .spos-h__cat-img { border-radius: 999px 999px var(--r-img) var(--r-img); }
body.spt .spos-h__deals a, body.spt .spos-h__brands a { border-radius: var(--r-card); }
body.spt .spos-h__banner { border-radius: var(--r-card); }
body.spt .spos-h__visit { background: var(--c-surface); border: 1px solid var(--c-line); }
.style-clothing .spos-h__head h2, .style-clothing .block-head h2 { font-weight: 400; }

/* ---------- Dark style ---------- */
.is-dark { color-scheme: dark; }
.is-dark .icon-btn:hover { background: rgba(255, 255, 255, .06); }
.is-dark select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23aab' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Homepage hero without a photo: the words sit on the soft colour, no empty box above them */
body.spt .spos-h__hero.no-img { min-height: 0 !important; }
body.spt .spos-h__hero.no-img .spos-h__copy { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 640px; padding: clamp(28px, 5vw, 64px); }
body.spt .spos-h__hero.no-img h1, body.spt .spos-h__hero.no-img h2 { font-size: clamp(34px, 5.4vw, 60px); }
/* Category circles fit four across on a phone */
@media (max-width: 600px) {
	body.spt .spos-h__cats.is-circles { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; overflow: visible; }
	body.spt .spos-h__cats.is-circles .spos-h__cat-img { width: 100%; height: auto; aspect-ratio: 1; }
	body.spt .spos-h__cats.is-circles .spos-h__cat-icon { width: 42%; height: auto; }
	body.spt .spos-h__cats.is-circles .spos-h__cat-name { font-size: 13px; }
}
/* Footer widgets (WordPress puts Archives and Categories there by default) */
.footer-widgets h2, .footer-widgets .wp-block-heading { font-size: 15px; margin: 0 0 10px; }
.footer-widgets ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.footer-widgets a { color: var(--c-ink); text-decoration: none; }
.footer-widgets a:hover { text-decoration: underline; }
/* Columns never grow wider than their share, whatever a widget holds */
.footer-grid > * { min-width: 0; overflow-wrap: anywhere; }
/* WooCommerce product lists (Latest, On sale, Recently viewed...): a small square picture on the left, name and price beside it */
.footer-widgets ul.product_list_widget li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; align-items: start; margin: 0 0 12px; padding: 0; }
.footer-widgets ul.product_list_widget li > a { display: contents; font-weight: 600; line-height: 1.35; }
.footer-widgets ul.product_list_widget li img { grid-column: 1; grid-row: 1 / span 3; float: none !important; width: 56px !important; height: 56px; margin: 0 !important; object-fit: cover; border-radius: 8px; background: var(--c-soft); overflow: hidden; font-size: 0; /* a missing picture shows as a soft square, not its alt text */ }
.footer-widgets ul.product_list_widget li .product-title, .footer-widgets ul.product_list_widget li > *:not(a):not(img) { grid-column: 2; }
.footer-widgets ul.product_list_widget li .amount { color: var(--c-sub); font-weight: 400; }
.footer-widgets .wc-block-grid__products, .footer-widgets .wc-block-product-template { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; margin: 0; }
.footer-widgets .wc-block-grid__product, .footer-widgets .wc-block-product { max-width: none !important; flex: none !important; text-align: left; }
.home .site-footer { margin-top: 0; }
body.spt .spos-h { padding-bottom: clamp(32px, 5vw, 56px); }
/* Banner drawing: on the style's first tone, like the mock-ups */
body.spt .spos-h__hero.has-art { background: var(--tone-1); }
body.spt .spos-h__hero.has-art .spos-h__copy { padding: clamp(24px, 5vw, 64px) !important; }
body.spt .spos-h__hero.has-art h1, body.spt .spos-h__hero.has-art h2 { font-size: clamp(34px, 5vw, 58px); }

/* ---------- WordPress's standard classes ---------- */
.alignleft { float: left; margin: .3em 1.4em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.wp-caption { max-width: 100%; margin-bottom: 1.2em; }
.wp-caption img { margin: 0 auto; }
.wp-caption-text, .gallery-caption { font-size: 14px; color: var(--c-sub); text-align: center; margin-top: 6px; }
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sticky .post-card-title::before { content: "★ "; color: var(--c-accent-text); }
.bypostauthor > .comment-body .comment-author b::after { content: " ✓"; color: var(--c-accent-text); }
/* Block style: a soft button */
.wp-block-button.is-style-soft .wp-block-button__link { background: var(--c-soft); color: var(--c-accent-text); }
/* Block pattern: shop banner */
.spt-pattern-banner { border-radius: var(--r-card); background: var(--tone-1); padding: clamp(24px, 5vw, 56px) !important; }

/* The plugin's own parts (homepage sections, filters, chat, offers) carry light-theme colours of their own:
   inside this theme they take the style's colours instead, so the dark style and every tint work there too. */
body.spt .spos-h, body.spt .spos-f, body.spt .spos-chat, body.spt .spos-w, body.spt .spos-pwa, body.spt .spos-wl, body.spt .spos-cp, body.spt .spos-picks, body.spt .spos-cpbar {
	--spos-accent: var(--c-accent); --spos-on-accent: var(--c-on-accent); --spos-accent-text: var(--c-accent-text);
	--spos-ink: var(--c-ink); --spos-sub: var(--c-sub); --spos-line: var(--c-line); --spos-soft: var(--c-soft); --spos-bg: var(--c-surface); --spos-tint: var(--c-soft);
	--spos-sale: var(--c-sale);
}
body.spt .spos-f__chip input:checked + span { background: var(--c-soft); }
/* Buttons on coloured banners: the banner's own colour reversed, so they read in light and dark styles alike */
body.spt .spos-h__banner.is-accent .spos-h__btn, body.spt .spos-h__hero.no-img.is-over .spos-h__btn { background: var(--c-on-accent); color: var(--c-accent) !important; }
body.spt .spos-h__banner.is-dark { background: var(--c-ink); color: var(--c-surface); }
body.spt .spos-h__banner.is-dark .spos-h__btn { background: var(--c-surface); color: var(--c-ink) !important; }

/* Classic cart ([woocommerce_cart]) when empty: the same large soft icon, centred, instead of a notice box */
.woocommerce-cart .woocommerce .cart-empty.woocommerce-info {
	position: relative; background: none !important; border: 0 !important; box-shadow: none !important; text-align: center;
	padding: 24px 0 6px !important; margin: 0 !important; font-size: 17px; color: var(--c-ink);
}
.woocommerce-cart .woocommerce .cart-empty.woocommerce-info::before {
	position: static !important; display: block; width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 50%;
	background: var(--c-soft); content: "" !important; font-size: 0;
}
.woocommerce-cart .woocommerce .cart-empty.woocommerce-info::after {
	content: ""; position: absolute; inset: auto; top: 46px; left: calc(50% - 22px); width: 44px; height: 44px; background: var(--c-accent-text);
	-webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat;
}
.woocommerce-cart .woocommerce .return-to-shop { text-align: center; margin: 14px 0 0; }

/* Gliding in as visitors scroll (Customize > Shop style). Only elements below the fold at load get .anim. */
.anim { opacity: 0; transform: translateY(22px); transition: opacity .6s ease var(--anim-delay, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--anim-delay, 0ms); }
.anim.is-in { opacity: 1; transform: none; }
.spos-h__tabpanel .anim { opacity: 1; transform: none; } /* products behind a tab show at once when it's picked */
@media (prefers-reduced-motion: reduce) { .anim { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { .anim { opacity: 1 !important; transform: none !important; } }

/* Main menu: a third level flies out to the side; a top item with sub-sub-items opens a wide panel (one column per item). */
.nav-list .sub-menu li { position: relative; }
.nav-list .sub-menu .sub-menu { top: -9px; left: 100%; }
.nav-list .sub-menu .menu-item-has-children > a::after { content: "›"; float: right; margin-left: 12px; color: var(--c-sub); }
.nav-list > li.is-mega > .sub-menu {
	left: 0; transform: translateY(6px); top: 100%; max-height: min(70vh, 560px); overflow-y: auto;
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 22px; padding: 16px 18px; min-width: 0;
	width: max-content; max-width: min(1100px, calc(100vw - 48px));
}
/* One category with its sub-categories = one column. Categories with nothing under them share a last column. */
.nav-list > li.is-mega > .sub-menu > li { flex: 0 0 auto; width: 150px; margin: 0; }
.nav-list > li.is-mega > .sub-menu > li.mega-misc { width: 150px; }
.nav-list > li.is-mega > .sub-menu > li.mega-misc > ul { list-style: none; margin: 0; padding: 0; }
.nav-list > li.is-mega:hover > .sub-menu, .nav-list > li.is-mega:focus-within > .sub-menu { transform: none; }
/* The wide panel opens when the pointer rests on its top item (the script adds .is-open), not when it just passes over, and it never stays open because of a click. */
html.menu-intent .nav-list > li.is-mega:not(.is-open) > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none; }
html.menu-intent .nav-list > li.is-mega.is-open > .sub-menu, html.menu-intent .nav-list > li.is-mega:has(:focus-visible) > .sub-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-list > li.is-mega > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps the panel open on the way down */
/* Each category with its sub-categories stays together in a column; ones without sub-categories stack up close. */
.nav-list > li.is-mega > .sub-menu > li > a { font-weight: 700; }
.nav-list > li.is-mega > .sub-menu > li.mega-misc > a { display: none; }
.nav-list > li.is-mega > .sub-menu > li > a::after { content: none; }
.nav-list > li.is-mega .sub-menu .sub-menu {
	position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 8px; border: 0; box-shadow: none; background: none;
}
.nav-list > li.is-mega > .sub-menu > li > a { padding: 6px 10px; }
.nav-list > li.is-mega .sub-menu .sub-menu a { padding: 4px 10px; font-size: 14px; color: var(--c-sub); }
.nav-list > li.is-mega .sub-menu .sub-menu a:hover { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .nav-list .sub-menu { transition: none; } }
.nav-list > li.is-mega > .sub-menu > li.is-single > a { padding-top: 5px; padding-bottom: 5px; }

/* Notification bell and My coupons (from the Shop POS Companion plugin) */
.header-bell { display: inline-flex; }
.header-bell .spos-bell { width: 44px; height: 44px; border-radius: 22px; color: var(--c-ink); }
.header-bell .spos-bell:hover { background: var(--c-soft); }
.header-bell .spos-bell-count { top: 3px; right: 1px; }
@media (max-width: 700px) { .header-coupons { display: none; } }

/* Big picture, banners and slides: headings fill the line instead of balancing into two short ones (which left
   an empty band on the right, most visibly with Chinese titles). */
body.spt .spos-h__copy h1, body.spt .spos-h__copy h2, body.spt .spos-h__copy p { text-wrap: pretty; }