/*
Theme Name: One to Z
Theme URI: https://onetoz.shop/
Author: One to Z
Author URI: https://onetoz.shop/
Description: A vibrant WooCommerce storefront theme for anime and pop-culture collectibles marketplaces. Per-brand palettes, background video and a spinning brand-wheel transition, a highly reactive custom cursor, full WooCommerce template coverage with pre-order and stock badges, and a mobile-first responsive layout.
Version: 1.26.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: one-to-z
Tags: e-commerce, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, full-width-template, block-styles, wide-blocks, translation-ready
WC requires at least: 7.0
WC tested up to: 9.1
*/
/* ==========================================================================
1. Design tokens
========================================================================== */
:root {
/*
* Brand hue. Every accent in the theme reads from these three, so setting
* --otz-brand on an element (or on for a whole brand archive)
* recolours buttons, badges, prices, links and hovers in one move.
*/
/*
* Held as raw channels so any alpha can be derived from them without
* color-mix support. A brand only needs to override these three triples.
*/
--otz-brand-rgb: 255 176 84;
--otz-brand-deep-rgb: 255 122 92;
--otz-brand-light-rgb: 255 226 138;
--otz-brand: rgb(var(--otz-brand-rgb));
--otz-brand-deep: rgb(var(--otz-brand-deep-rgb));
--otz-brand-light: rgb(var(--otz-brand-light-rgb));
/* Aliases so existing rules keep working while following the brand hue. */
--otz-orange: var(--otz-brand);
--otz-orange-deep: var(--otz-brand-deep);
--otz-orange-soft: rgb(var(--otz-brand-rgb) / .16);
--otz-gold: var(--otz-brand-light);
/*
* Surfaces: a lifted plum-grey rather than near-black, so the page reads
* warm and open instead of heavy. Each step is clearly lighter than the last.
*/
--otz-black: #251f2e;
--otz-panel: #322a3d;
--otz-panel-2: #3d3349;
--otz-border: #4d4159;
--otz-text: #fbf8fd;
--otz-muted: #c6bcd2;
/* Secondary accents: brighter and friendlier, used sparingly. */
--otz-magenta: #ff77ab;
--otz-cyan: #6fe3f0;
--otz-danger: #ff7a86;
--otz-success: #6ceaa6;
--otz-radius: 10px;
--otz-radius-lg: 16px;
--otz-shadow: 0 10px 30px rgb(18 14 24 / .42);
--otz-shadow-glow: 0 12px 34px rgb(var(--otz-brand-rgb) / .28);
--otz-max: 1320px;
/*
* The gap between two controls that belong together — Add to cart above Buy
* now, a pair of dialog buttons, a row of filter actions. One value so they
* are all spaced identically and none of them read as touching.
*/
--otz-gap-pair: 12px;
--otz-bin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E");
--otz-font-display: "Anton", "Arial Black", Impact, sans-serif;
--otz-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* ==========================================================================
2. Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
overflow-x: hidden; /* fallback for engines without clip */
overflow-x: clip; /* clip does not create a scroll container, so sticky survives */
}
body {
margin: 0;
overflow-wrap: break-word;
background: var(--otz-black);
color: var(--otz-text);
font-family: var(--otz-font-body);
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/*
* Colour wash over the whole page. Three pools rather than two, and stronger
* than before, so surfaces read as warm and lit instead of flat black. The
* transition means a brand change fades the page rather than snapping.
*/
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(1000px 560px at 8% -10%, rgb(var(--otz-brand-deep-rgb) / .26), transparent 64%),
radial-gradient(820px 460px at 96% 2%, rgb(var(--otz-brand-rgb) / .18), transparent 66%),
radial-gradient(900px 700px at 50% 108%, rgb(var(--otz-brand-light-rgb) / .12), transparent 68%);
}
/*
* Gradient stops cannot be transitioned reliably across engines, so a brand
* change cross-fades a second wash layer over the first instead. JS sets the
* new hue on .otz-wash, fades it in, then commits the hue to :root.
*/
.otz-wash {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity .9s cubic-bezier(.22, 1, .36, 1);
background:
radial-gradient(1000px 560px at 8% -10%, rgb(var(--otz-wash-deep, var(--otz-brand-deep-rgb)) / .30), transparent 62%),
radial-gradient(820px 460px at 96% 2%, rgb(var(--otz-wash, var(--otz-brand-rgb)) / .20), transparent 64%),
radial-gradient(900px 700px at 50% 108%, rgb(var(--otz-wash-light, var(--otz-brand-light-rgb)) / .10), transparent 66%);
}
.otz-wash.is-in { opacity: 1; }
#page { position: relative; z-index: 1; }
/*
* Grid and flex items default to min-width: auto, so a wide child (a table, a
* long title, an image) refuses to shrink and widens the whole row. Allowing
* them to shrink is what keeps narrow screens from scrolling sideways.
*/
.otz-layout > *,
.otz-footer__top > *,
.otz-main,
.otz-shop-toolbar > *,
.woocommerce-checkout-layout > * { min-width: 0; }
a { color: var(--otz-orange); text-decoration: none; transition: color .18s ease; }
a:hover, a:focus { color: var(--otz-gold); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--otz-font-display);
font-weight: 400;
letter-spacing: .02em;
line-height: 1.12;
margin: 0 0 .5em;
text-transform: uppercase;
color: #fff;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1.1em; }
hr { border: 0; border-top: 1px solid var(--otz-border); margin: 2.5rem 0; }
blockquote {
margin: 1.6rem 0;
padding: .2rem 0 .2rem 1.4rem;
border-left: 4px solid var(--otz-orange);
color: var(--otz-muted);
font-style: italic;
}
code, pre {
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: 6px;
font-size: .92em;
}
code { padding: .15em .45em; }
pre { padding: 1rem 1.2rem; overflow: auto; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
th, td { padding: .8rem 1rem; border: 1px solid var(--otz-border); text-align: left; }
th { background: var(--otz-panel-2); font-weight: 600; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
position: fixed;
top: 12px; left: 12px;
z-index: 9999;
width: auto; height: auto;
clip: auto;
padding: .8rem 1.2rem;
background: var(--otz-orange);
color: #111;
font-weight: 700;
border-radius: 6px;
}
:focus-visible { outline: 2px solid var(--otz-orange); outline-offset: 2px; }
.otz-container {
width: 100%;
max-width: var(--otz-max);
margin: 0 auto;
padding: 0 24px;
}
/* ==========================================================================
3. Buttons
========================================================================== */
.otz-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
display: inline-block;
padding: .85rem 1.7rem;
border: 0;
border-radius: var(--otz-radius);
background: linear-gradient(135deg, var(--otz-orange) 0%, var(--otz-orange-deep) 100%);
color: #2a1c0a;
font-family: var(--otz-font-body);
font-size: .95rem;
font-weight: 800;
letter-spacing: .04em;
line-height: 1.2;
text-transform: uppercase;
text-align: center;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.otz-btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
color: #2a1c0a;
transform: translateY(-2px);
box-shadow: var(--otz-shadow-glow);
filter: brightness(1.06);
}
.otz-btn--ghost,
.woocommerce a.button.otz-btn--ghost {
background: transparent;
border: 2px solid var(--otz-orange);
color: var(--otz-orange);
}
.otz-btn--ghost:hover { background: var(--otz-orange-soft); color: var(--otz-gold); }
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
opacity: .45;
cursor: not-allowed;
transform: none;
}
/* ==========================================================================
4. Forms
========================================================================== */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea, .select2-container .select2-selection--single {
width: 100%;
padding: .78rem 1rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
color: var(--otz-text);
font-family: var(--otz-font-body);
font-size: 1rem;
transition: border-color .16s ease, box-shadow .16s ease;
}
input:focus, select:focus, textarea:focus {
border-color: var(--otz-orange);
box-shadow: 0 0 0 3px var(--otz-orange-soft);
outline: none;
}
::placeholder { color: #6f6f79; }
label { display: block; margin-bottom: .35rem; font-size: .9rem; font-weight: 600; }
/* ==========================================================================
5. Header
========================================================================== */
.otz-topbar {
background: linear-gradient(90deg, var(--otz-orange-deep), var(--otz-orange));
color: #140d03;
font-size: .82rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-align: center;
padding: .5rem 24px;
}
.otz-header {
position: sticky;
top: 0;
z-index: 200;
background: rgb(37 31 46 / .92);
border-bottom: 1px solid var(--otz-border);
box-shadow: 0 2px 0 rgb(var(--otz-brand-rgb) / .55);
}
/*
* The frosted blur lives on a pseudo-element, NOT on .otz-header itself, and
* that placement is load-bearing. backdrop-filter makes an element the
* containing block for every fixed-position descendant. The mobile nav panel is
* position: fixed and parked at translateX(100%); with the blur on the header,
* "off screen right" became "320px past the header", which added 320px of
* scrollable width to the document and forced phones to zoom out to fit. As a
* pseudo-element the blur is a sibling of the content, not an ancestor, so the
* nav is measured against the viewport again. Do not move this back.
*/
.otz-header::after {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(10px);
pointer-events: none;
z-index: 0;
}
.otz-header__inner { position: relative; z-index: 1; }
.otz-header__inner {
display: flex;
align-items: center;
gap: 28px;
min-height: 84px;
padding-top: 10px;
padding-bottom: 10px;
}
.otz-brand { flex: 0 0 auto; }
/* --------------------------------------------------------------------------
Logo stomp
The logo winds up, drops hard, and the header shudders on impact. Runs on
click before navigating home, and is added by JS so it never fires without
the script that delays the navigation to match.
-------------------------------------------------------------------------- */
.otz-brand a { display: block; transform-origin: 50% 100%; }
.otz-brand.is-stomping a {
animation: otz-stomp .52s cubic-bezier(.3, 1.3, .5, 1) both;
}
@keyframes otz-stomp {
0% { transform: translateY(0) scale(1, 1) rotate(0deg); }
22% { transform: translateY(-13px) scale(.94, 1.09) rotate(-2.5deg); }
42% { transform: translateY(5px) scale(1.16, .8) rotate(1deg); }
58% { transform: translateY(0) scale(1.06, .95) rotate(0deg); }
76% { transform: translateY(-3px) scale(.99, 1.03) rotate(0deg); }
100% { transform: translateY(0) scale(1, 1) rotate(0deg); }
}
/* the impact travels into the bar itself */
.otz-header.is-stomped {
animation: otz-stomp-shake .42s ease-out both;
}
@keyframes otz-stomp-shake {
0% { transform: translateY(0); }
30% { transform: translateY(3px); }
55% { transform: translateY(-1px); }
100% { transform: translateY(0); }
}
/* a ring of dust punched out from under the logo */
.otz-stomp-dust {
position: absolute;
left: 50%;
bottom: -6px;
width: 118%;
height: 16px;
transform: translateX(-50%) scale(.3);
border-radius: 50%;
opacity: 0;
pointer-events: none;
background: radial-gradient(ellipse at center,
rgb(var(--otz-brand-light-rgb) / .55), rgb(var(--otz-brand-rgb) / .22) 55%, transparent 72%);
}
.otz-brand.is-stomping .otz-stomp-dust {
animation: otz-dust .58s ease-out .17s both;
}
@keyframes otz-dust {
0% { opacity: 0; transform: translateX(-50%) scale(.3); }
25% { opacity: 1; transform: translateX(-50%) scale(1); }
100% { opacity: 0; transform: translateX(-50%) scale(1.7); }
}
.otz-brand { position: relative; }
@media (prefers-reduced-motion: reduce) {
.otz-brand.is-stomping a,
.otz-header.is-stomped,
.otz-brand.is-stomping .otz-stomp-dust { animation: none; }
}
.otz-brand img, .otz-brand .custom-logo {
width: auto;
height: auto;
max-width: 100%;
max-height: 62px;
object-fit: contain;
}
.otz-brand__text {
font-family: var(--otz-font-display);
font-size: 1.7rem;
color: #fff;
text-transform: uppercase;
}
.otz-brand__text span { color: var(--otz-orange); }
.otz-nav { margin-left: auto; }
.otz-nav ul { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.otz-nav li { position: relative; }
.otz-nav a {
display: block;
padding: .55rem 0;
color: var(--otz-text);
font-size: .88rem;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
}
.otz-nav a::after {
content: "";
display: block;
height: 2px;
width: 0;
margin-top: 4px;
background: var(--otz-orange);
transition: width .2s ease;
}
.otz-nav a:hover::after,
.otz-nav .current-menu-item > a::after { width: 100%; }
.otz-nav .current-menu-item > a { color: var(--otz-orange); }
.otz-nav .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
flex-direction: column;
gap: 0;
padding: .5rem 0;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
box-shadow: var(--otz-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all .18s ease;
}
.otz-nav li:hover > .sub-menu,
.otz-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.otz-nav .sub-menu a { padding: .55rem 1.1rem; }
.otz-nav .sub-menu a::after { display: none; }
.otz-nav .sub-menu a:hover { background: var(--otz-orange-soft); color: var(--otz-orange); }
.otz-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.otz-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 44px;
height: 44px;
padding: 0;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: 50%;
color: var(--otz-text);
transition: all .18s ease;
}
.otz-icon-btn:hover {
background: var(--otz-orange);
border-color: var(--otz-orange);
color: #2a1c0a;
transform: none;
box-shadow: var(--otz-shadow-glow);
}
.otz-icon-btn svg { width: 20px; height: 20px; }
.otz-cart-count {
position: absolute;
top: -4px; right: -4px;
min-width: 21px; height: 21px;
padding: 0 5px;
background: var(--otz-orange);
border: 2px solid var(--otz-black);
border-radius: 999px;
color: #2a1c0a;
font-size: .7rem;
font-weight: 800;
line-height: 17px;
text-align: center;
}
/*
* position + z-index are the fix, not decoration.
*
* .otz-header::after carries the frosted blur and is positioned, so it paints
* above every NON-positioned sibling — including this bar. The search field was
* rendering underneath the blur layer, which is why you could not read what you
* were typing. Lifting it to z-index 2 puts it above the blur.
*/
.otz-search-bar {
position: relative;
z-index: 2;
display: none;
padding: 1rem 0 1.4rem;
border-top: 1px solid var(--otz-border);
background: var(--otz-black);
}
.otz-search-bar.is-open { display: block; }
.otz-search-bar form { display: flex; gap: 10px; }
.otz-search-bar input[type="search"] { flex: 1; }
.otz-burger { display: none; }
/* ==========================================================================
6. Hero + front page sections
========================================================================== */
.otz-hero {
position: relative;
overflow: hidden;
padding: clamp(64px, 9vw, 132px) 0;
background: linear-gradient(120deg, var(--otz-black) 0%, #2a1d24 45%, #1d1622 100%);
border-bottom: 1px solid var(--otz-border);
}
.otz-hero::after {
content: "";
position: absolute;
right: -12%; top: -30%;
width: 720px; height: 720px;
background: radial-gradient(circle, rgb(var(--otz-brand-deep-rgb) / .30), transparent 62%);
pointer-events: none;
}
.otz-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.otz-hero__eyebrow {
display: inline-block;
margin-bottom: 1rem;
padding: .4rem .9rem;
background: var(--otz-orange-soft);
border: 1px solid rgb(var(--otz-brand-rgb) / .45);
border-radius: 999px;
color: var(--otz-orange);
font-size: .78rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.otz-hero h1 { margin-bottom: 1rem; }
.otz-hero h1 span { color: var(--otz-orange); display: block; }
.otz-hero p { max-width: 560px; color: var(--otz-muted); font-size: 1.12rem; }
.otz-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.otz-section { padding: clamp(52px, 6vw, 84px) 0; }
.otz-section--alt { background: var(--otz-panel); border-block: 1px solid var(--otz-border); }
.otz-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 2.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--otz-border);
}
.otz-section__head h2 { margin: 0; }
.otz-section__head h2::before {
content: "";
display: inline-block;
width: 6px; height: .82em;
margin-right: 14px;
background: var(--otz-orange);
vertical-align: -1px;
}
.otz-section__link { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.otz-franchise-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 18px;
}
.otz-franchise {
position: relative;
display: flex;
align-items: flex-end;
min-height: 168px;
padding: 20px;
background: linear-gradient(150deg, var(--otz-panel-2), #0f0f11);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
overflow: hidden;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.otz-franchise::before {
content: "";
position: absolute;
inset: auto -30% -60% auto;
width: 220px; height: 220px;
background: radial-gradient(circle, rgb(var(--otz-brand-rgb) / .32), transparent 65%);
transition: opacity .2s ease;
}
.otz-franchise:hover {
transform: translateY(-5px);
border-color: var(--otz-orange);
box-shadow: var(--otz-shadow-glow);
}
.otz-franchise__name {
position: relative;
z-index: 2;
font-family: var(--otz-font-display);
font-size: 1.35rem;
color: #fff;
text-transform: uppercase;
}
/* brand tile: emblem, own hue, name */
.otz-franchise__emblem {
position: relative;
z-index: 2;
width: 56px;
height: 56px;
border-radius: 14px;
object-fit: cover;
margin-bottom: auto;
box-shadow: 0 4px 14px rgb(0 0 0 / .4);
}
.otz-brand-tile {
flex-direction: column;
align-items: flex-start;
gap: 14px;
background: linear-gradient(150deg,
rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)) / .24),
rgb(var(--otz-tile-deep-rgb, var(--otz-brand-deep-rgb)) / .10) 70%,
var(--otz-panel));
}
.otz-brand-tile::before {
background: radial-gradient(circle, rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)) / .5), transparent 65%);
}
.otz-brand-tile:hover {
border-color: rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)));
box-shadow: 0 12px 34px rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)) / .3);
}
/* product type filter chips */
.otz-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.otz-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: .48rem 1rem;
border: 1px solid var(--otz-border);
border-radius: 99px;
background: var(--otz-panel-2);
color: var(--otz-muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: none;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.otz-chip span {
opacity: .65;
font-size: .72rem;
}
.otz-chip:hover {
background: var(--otz-panel);
border-color: var(--otz-border);
color: var(--otz-text);
transform: none;
box-shadow: none;
filter: none;
}
.otz-chip.is-on {
background: var(--otz-brand);
border-color: var(--otz-brand);
color: #2b2136;
}
.otz-chip.is-on span { opacity: .8; }
.otz-franchise__count { display: block; font-family: var(--otz-font-body); font-size: .8rem; font-weight: 600; color: var(--otz-muted); letter-spacing: .06em; }
.otz-usp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.otz-usp {
padding: 26px 22px;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
text-align: center;
}
.otz-usp svg { width: 34px; height: 34px; margin: 0 auto .9rem; color: var(--otz-orange); }
.otz-usp h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.otz-usp p { margin: 0; color: var(--otz-muted); font-size: .9rem; }
.otz-cta-band {
position: relative;
padding: clamp(44px, 6vw, 76px) 0;
background: linear-gradient(120deg, rgb(var(--otz-brand-deep-rgb) / .16), rgb(37 31 46 / .2));
border-block: 1px solid var(--otz-border);
text-align: center;
}
.otz-cta-band p { max-width: 620px; margin: 0 auto 1.8rem; color: var(--otz-muted); }
/* ==========================================================================
7. Blog / pages
========================================================================== */
.otz-page-header {
padding: 54px 0 40px;
background: linear-gradient(120deg, #241d2c, var(--otz-black));
border-bottom: 1px solid var(--otz-border);
}
.otz-page-header h1 { margin: 0; }
.otz-breadcrumb { margin-bottom: .7rem; color: var(--otz-muted); font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; }
.otz-breadcrumb a { color: var(--otz-muted); }
.otz-breadcrumb a:hover { color: var(--otz-orange); }
.otz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; padding: 56px 0; }
.otz-layout--full { grid-template-columns: minmax(0, 1fr); }
.otz-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.otz-card {
display: flex;
flex-direction: column;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
overflow: hidden;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.otz-card:hover { transform: translateY(-4px); border-color: var(--otz-orange); box-shadow: var(--otz-shadow); }
.otz-card__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.otz-card__body { padding: 20px; }
.otz-card__meta { margin-bottom: .5rem; color: var(--otz-muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.otz-card__title { font-size: 1.15rem; margin-bottom: .6rem; }
.otz-card__title a { color: #fff; }
.otz-card__title a:hover { color: var(--otz-orange); }
.otz-card__excerpt { color: var(--otz-muted); font-size: .92rem; margin-bottom: 1rem; }
.otz-entry { background: var(--otz-panel); border: 1px solid var(--otz-border); border-radius: var(--otz-radius-lg); padding: clamp(24px, 4vw, 44px); }
.otz-entry > *:last-child { margin-bottom: 0; }
.otz-entry ul, .otz-entry ol { padding-left: 1.3rem; }
.otz-entry li { margin-bottom: .4rem; }
.otz-entry img { border-radius: var(--otz-radius); }
.otz-entry .alignwide { width: 100%; }
.otz-entry .alignfull { width: 100%; }
.alignleft { float: left; margin: .4rem 1.6rem 1rem 0; }
.alignright { float: right; margin: .4rem 0 1rem 1.6rem; }
.aligncenter { margin-left: auto; margin-right: auto; }
.otz-pagination { margin-top: 2.6rem; }
.otz-pagination .page-numbers {
display: inline-block;
min-width: 42px;
margin-right: 6px;
padding: .55rem .7rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
color: var(--otz-text);
font-weight: 700;
text-align: center;
}
.otz-pagination .page-numbers.current,
.otz-pagination .page-numbers:hover { background: var(--otz-orange); border-color: var(--otz-orange); color: #2a1c0a; }
.otz-sidebar .widget {
margin-bottom: 26px;
padding: 22px;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
}
.otz-sidebar .widget-title, .otz-sidebar h2 { font-size: 1.05rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--otz-border); }
.otz-sidebar ul { margin: 0; padding: 0; list-style: none; }
.otz-sidebar li { padding: .4rem 0; border-bottom: 1px dashed var(--otz-border); }
.otz-sidebar li:last-child { border-bottom: 0; }
.otz-sidebar a { color: var(--otz-text); }
.otz-sidebar a:hover { color: var(--otz-orange); }
.otz-404 { padding: 90px 0; text-align: center; }
.otz-404 .otz-404__code { font-family: var(--otz-font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: .9; color: var(--otz-orange); }
/* ==========================================================================
8. WooCommerce – shop loop
========================================================================== */
.woocommerce-notices-wrapper:not(:empty) { margin: 24px auto; max-width: var(--otz-max); padding: 0 24px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 0 0 1.4rem;
padding: 1rem 1.3rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-left: 4px solid var(--otz-orange);
border-radius: var(--otz-radius);
color: var(--otz-text);
list-style: none;
}
.woocommerce-error { border-left-color: var(--otz-danger); }
.woocommerce-message { border-left-color: var(--otz-success); }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; padding: .55rem 1.1rem; font-size: .82rem; }
/*
* WooCommerce pins its notice icon with position: absolute; left: 1.5em and
* assumes a 3.5em left padding that our layout does not use — so the tick
* landed on top of the first word. Making the ::before a static flex item puts
* it in the row where it belongs. Overriding content and font-family as well
* means the icon no longer depends on WooCommerce's icon font loading; when
* that font failed it rendered as an empty box over the text.
*/
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
.woocommerce-thankyou-order-received::before {
position: static;
top: auto;
left: auto;
right: auto;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
border-radius: 50%;
font-family: var(--otz-font-body);
font-size: .78rem;
font-weight: 800;
line-height: 1;
color: #1d1526;
}
.woocommerce-message::before { content: "\2713"; background: var(--otz-success); }
.woocommerce-info::before { content: "i"; background: var(--otz-gold); font-style: italic; }
.woocommerce-error::before { content: "!"; background: var(--otz-danger); }
/* the text should take the slack so the button can sit hard right */
.woocommerce-message > *:not(.button),
.woocommerce-info > *:not(.button),
.woocommerce-error > *:not(.button) { margin: 0; min-width: 0; }
.woocommerce-error { flex-direction: column; align-items: flex-start; }
.woocommerce-error li { display: flex; align-items: center; gap: 10px; }
.woocommerce-error::before { align-self: flex-start; }
.otz-shop-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 26px;
padding: 14px 18px;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
}
.woocommerce .woocommerce-result-count { margin: 0; color: var(--otz-muted); font-size: .9rem; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { width: auto; min-width: 220px; padding-right: 2.2rem; }
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
margin: 0 0 2.4rem;
padding: 0;
list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
position: relative;
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
padding: 0;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
overflow: hidden;
text-align: left;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-5px);
border-color: var(--otz-orange);
box-shadow: var(--otz-shadow-glow);
}
.woocommerce ul.products li.product a img {
width: 100%;
aspect-ratio: 1 / 1;
margin: 0;
object-fit: cover;
background: var(--otz-panel-2);
box-shadow: none;
transition: transform .35s ease;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05); }
.otz-loop-thumb { position: relative; overflow: hidden; display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 16px 18px 0;
font-family: var(--otz-font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
text-transform: none;
color: #fff;
}
.otz-loop-brand { padding: 14px 18px 0; color: var(--otz-orange); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.woocommerce ul.products li.product .price {
display: block;
padding: 8px 18px 0;
color: var(--otz-orange);
font-size: 1.22rem;
font-weight: 800;
}
.woocommerce ul.products li.product .price del { color: var(--otz-muted); font-size: .92rem; font-weight: 500; opacity: .8; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { background: transparent; color: var(--otz-orange); text-decoration: none; }
.woocommerce ul.products li.product .star-rating { margin: 10px 18px 0; color: var(--otz-gold); font-size: .82rem; }
.otz-loop-stock { padding: 10px 18px 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.otz-loop-stock--in { color: var(--otz-success); }
.otz-loop-stock--low { color: var(--otz-gold); }
.otz-loop-stock--out { color: var(--otz-danger); }
.woocommerce ul.products li.product .button {
margin: 16px 18px 18px;
padding: .72rem 1rem;
font-size: .82rem;
}
.woocommerce ul.products li.product .added_to_cart { margin: 0 18px 18px; font-size: .8rem; font-weight: 700; }
.otz-badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.otz-badge {
display: inline-block;
padding: .3rem .6rem;
border-radius: 4px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.3;
}
.otz-badge--sale { background: var(--otz-orange); color: #2a1c0a; }
.otz-badge--new { background: #fff; color: #2a1c0a; }
.otz-badge--preorder { background: #120c04; color: var(--otz-orange); border: 1px solid var(--otz-orange); }
.otz-badge--out { background: var(--otz-danger); color: #fff; }
.otz-badge--exclusive { background: linear-gradient(135deg, var(--otz-gold), var(--otz-orange-deep)); color: #2a1c0a; }
.woocommerce span.onsale {
position: absolute;
top: 12px; right: 12px; left: auto;
min-width: auto; min-height: auto;
margin: 0; padding: .3rem .6rem;
background: var(--otz-orange);
border-radius: 4px;
color: #2a1c0a;
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.3;
}
/* ==========================================================================
9. WooCommerce – single product
========================================================================== */
.woocommerce div.product { padding: 44px 0; }
/* content should never touch the screen edge on a phone */
@media (max-width: 720px) {
.woocommerce div.product,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-tabs { padding-inline: 4px; }
.woocommerce div.product div.images { margin-inline: 0; }
}
.woocommerce div.product .product_title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: .5rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--otz-orange); font-size: 1.9rem; font-weight: 800; }
.woocommerce div.product p.price del { color: var(--otz-muted); font-size: 1.1rem; font-weight: 500; }
.woocommerce div.product p.price ins { background: none; color: var(--otz-orange); text-decoration: none; }
.woocommerce div.product div.images img { border-radius: var(--otz-radius-lg); border: 1px solid var(--otz-border); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 100%; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: 8px; opacity: .6; transition: opacity .18s ease; }
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active { opacity: 1; border-color: var(--otz-orange); }
/*
* The add-to-cart form is a panel, and the quantity control inside it was
* another panel in the same colour, inside the summary column — three identical
* dark boxes stacked, which is what made the product page look muddled. The
* control now uses the lighter surface, so it reads as a control rather than a
* third panel.
*/
.woocommerce div.product form.cart .quantity.otz-qty { background: var(--otz-panel-2); }
@media (max-width: 720px) {
/* on a phone the form does not need its own frame at all */
.woocommerce div.product form.cart {
padding: 0;
background: transparent;
border: 0;
}
}
.woocommerce div.product form.cart { margin: 1.6rem 0; padding: 20px; background: var(--otz-panel); border: 1px solid var(--otz-border); border-radius: var(--otz-radius-lg); }
.woocommerce div.product form.cart .variations { margin-bottom: 1rem; }
.woocommerce div.product form.cart .variations td { border: 0; padding: .4rem 0; }
.woocommerce div.product form.cart div.quantity { float: none; display: inline-flex; margin-right: 12px; }
.woocommerce .quantity .qty {
width: 84px;
padding: .78rem .5rem;
text-align: center;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
color: var(--otz-text);
}
.woocommerce div.product form.cart .button { vertical-align: top; padding: .95rem 2.2rem; }
.woocommerce div.product .stock { font-weight: 700; }
.woocommerce div.product .stock.in-stock { color: var(--otz-success); }
.woocommerce div.product .stock.out-of-stock { color: var(--otz-danger); }
.otz-stock-meter { height: 6px; margin: .6rem 0 1rem; background: var(--otz-panel-2); border-radius: 999px; overflow: hidden; }
.otz-stock-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--otz-orange), var(--otz-gold)); }
.woocommerce div.product .product_meta { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--otz-border); color: var(--otz-muted); font-size: .88rem; }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .3rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
margin: 0 0 1.6rem;
padding: 0;
border-bottom: 1px solid var(--otz-border);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
margin: 0; padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: .8rem 1.2rem;
color: var(--otz-muted);
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
font-size: .85rem;
border-bottom: 3px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--otz-orange); border-bottom-color: var(--otz-orange); }
.woocommerce div.product .woocommerce-tabs .panel { padding: 0; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { background: var(--otz-panel); border: 1px solid var(--otz-border); border-radius: var(--otz-radius-lg); padding: 20px; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { border: 1px solid var(--otz-border); background: var(--otz-panel-2); border-radius: 8px; padding: 2px; }
.woocommerce .star-rating span, .woocommerce p.stars a { color: var(--otz-gold); }
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
margin-bottom: 1.6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--otz-border);
}
/* ==========================================================================
10. WooCommerce – cart, coupons, checkout, account
========================================================================== */
.woocommerce table.shop_table {
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce table.shop_table th { background: var(--otz-panel-2); border: 0; border-bottom: 1px solid var(--otz-border); color: var(--otz-text); text-transform: uppercase; font-size: .82rem; letter-spacing: .06em; }
.woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--otz-border); }
.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.cart img { width: 72px; border-radius: 8px; }
/* ==========================================================================
Quantity stepper
==========================================================================
The browser's native number spinner is two 8px arrows — unusable with a
thumb. main.js wraps every quantity field with real buttons; this styles
them as a single control: minus, value, plus.
========================================================================== */
.woocommerce .quantity.otz-qty {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--otz-border);
border-radius: 999px;
background: var(--otz-panel);
overflow: hidden;
max-width: 100%;
}
.otz-qty__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
min-width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--otz-text);
font-family: var(--otz-font-body);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.otz-qty__btn:hover:not(:disabled),
.otz-qty__btn:focus-visible:not(:disabled) {
background: var(--otz-orange);
color: #2a1c0a;
}
.otz-qty__btn:disabled { opacity: .35; cursor: not-allowed; }
.woocommerce .quantity.otz-qty input.qty {
width: 62px;
height: 48px;
padding: 0;
border: 0;
border-inline: 1px solid var(--otz-border);
border-radius: 0;
background: transparent;
color: var(--otz-text);
font-size: 1.05rem;
font-weight: 700;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
}
/* the native spinner is what we are replacing, so remove it */
.woocommerce .quantity.otz-qty input.qty::-webkit-outer-spin-button,
.woocommerce .quantity.otz-qty input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce .quantity.otz-qty input.qty:focus-visible {
outline: 2px solid var(--otz-orange);
outline-offset: -2px;
}
@media (max-width: 720px) {
.otz-qty__btn { width: 54px; min-width: 54px; height: 54px; font-size: 1.7rem; }
.woocommerce .quantity.otz-qty input.qty { width: 72px; height: 54px; font-size: 1.15rem; }
}
/*
* WooCommerce floats .coupon left inside td.actions and leaves the update
* button inline, so the button rode up onto the coupon box's dashed border.
* Un-floating the coupon makes it a block that the button clears.
*/
.woocommerce table.cart td.actions,
.woocommerce-page table.cart td.actions {
padding: 1.1rem;
text-align: right;
overflow: hidden; /* contains any float WooCommerce or a plugin adds back */
}
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
float: none;
margin: 0 0 var(--otz-gap-pair);
text-align: left;
}
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions input.button,
.woocommerce-page table.cart td.actions .button {
float: none;
clear: both;
margin: 0;
}
/* the coupon's own apply button must not clear — it belongs on the same row */
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions .coupon input.button { clear: none; }
/*
* E. The remove cross. WooCommerce ships it at 1.5em in a 1em box, which is
* both hard to see and well under any sane tap target.
*/
/* a bin reads as "delete" instantly; a red cross reads as "close" */
.woocommerce a.remove {
font-size: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
font-size: 1.45rem;
line-height: 1;
border-radius: 50%;
border: 1px solid var(--otz-border);
background: rgb(var(--otz-brand-rgb) / .07);
color: var(--otz-danger) !important;
font-weight: 800;
transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
/*
* The glyph is a CSS mask filled with currentColor, so it inherits the hover
* colour change for free and stays crisp at any size — no icon font, no image.
*/
.woocommerce a.remove::before {
content: "";
width: 19px;
height: 19px;
background: currentColor;
-webkit-mask: var(--otz-bin) center / contain no-repeat;
mask: var(--otz-bin) center / contain no-repeat;
}
.woocommerce a.remove:hover,
.woocommerce a.remove:focus-visible {
background: var(--otz-danger);
border-color: var(--otz-danger);
color: #2a0d12 !important;
transform: scale(1.06);
}
.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading { font-size: 1.25rem; margin-bottom: 1rem; }
.woocommerce .cart_totals table.shop_table td, .woocommerce .cart_totals table.shop_table th { padding: .9rem 1rem; }
.woocommerce .cart_totals .order-total .woocommerce-Price-amount { color: var(--otz-orange); font-size: 1.35rem; }
/* Coupon form – highlighted so shoppers actually find it */
.woocommerce .cart .coupon,
.woocommerce-checkout .checkout_coupon {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--otz-panel);
border: 1px dashed var(--otz-orange);
border-radius: var(--otz-radius-lg);
}
.woocommerce .cart .coupon label { margin: 0; }
.woocommerce .cart .coupon #coupon_code { width: auto; min-width: 220px; flex: 1 1 200px; }
.woocommerce-checkout .checkout_coupon { margin-bottom: 1.6rem; }
.woocommerce-checkout .checkout_coupon p { margin-bottom: 0; }
.woocommerce form.checkout_coupon .form-row { flex: 1 1 220px; padding: 0; margin: 0; }
.otz-cart-tools {
display: flex;
flex-wrap: wrap;
gap: var(--otz-gap-pair);
align-items: center;
justify-content: flex-end;
margin-top: var(--otz-gap-pair);
}
.otz-clear-cart {
display: inline-flex;
align-items: center;
gap: 8px;
padding: .7rem 1.2rem;
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
background: transparent;
color: var(--otz-muted);
font-size: .88rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.otz-clear-cart::before {
content: "";
width: 17px;
height: 17px;
background: currentColor;
-webkit-mask: var(--otz-bin) center / contain no-repeat;
mask: var(--otz-bin) center / contain no-repeat;
}
.otz-clear-cart:hover,
.otz-clear-cart:focus-visible {
color: var(--otz-danger);
border-color: var(--otz-danger);
background: rgb(255 122 134 / .08);
}
/* Buy now sits under Add to cart, quieter but obviously a second option */
.otz-buy-now {
display: block;
width: 100%;
margin-top: var(--otz-gap-pair);
background: transparent !important;
border: 2px solid var(--otz-orange) !important;
color: var(--otz-orange) !important;
}
.otz-buy-now:hover,
.otz-buy-now:focus-visible {
background: var(--otz-orange) !important;
color: #2a1c0a !important;
}
.woocommerce div.product form.cart .otz-qty-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.otz-coupon-hint { display: block; width: 100%; margin-top: .4rem; color: var(--otz-muted); font-size: .82rem; }
.woocommerce-form-coupon-toggle .woocommerce-info { border-left-color: var(--otz-gold); }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout h3 { font-size: 1.2rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--otz-border); }
.woocommerce form .form-row { padding: 0; margin-bottom: 1rem; }
.woocommerce form .form-row label { color: var(--otz-text); }
.woocommerce-checkout #payment {
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--otz-border); padding: 1.2rem; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none; margin-bottom: .6rem; }
.woocommerce-checkout #payment div.payment_box {
background: var(--otz-panel-2);
border-radius: var(--otz-radius);
color: var(--otz-muted);
font-size: .9rem;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--otz-panel-2); }
.woocommerce-checkout #payment div.form-row { padding: 1.2rem; }
.woocommerce-checkout #payment #place_order { width: 100%; padding: 1.05rem; font-size: 1.02rem; }
.otz-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-checkout-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 34px; align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; background: var(--otz-panel); border: 1px solid var(--otz-border); border-radius: var(--otz-radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--otz-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: .85rem 1.1rem; color: var(--otz-text); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--otz-orange-soft); color: var(--otz-orange); }
.woocommerce-account .woocommerce-MyAccount-content { width: 70%; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register { background: var(--otz-panel); border: 1px solid var(--otz-border); border-radius: var(--otz-radius-lg); padding: 24px; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--otz-orange); }
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content { background: var(--otz-panel-2); }
.woocommerce .woocommerce-breadcrumb { color: var(--otz-muted); font-size: .84rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--otz-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--otz-orange); }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
padding: .6rem .95rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
color: var(--otz-text);
font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--otz-orange); border-color: var(--otz-orange); color: #2a1c0a; }
/* ==========================================================================
11. Footer
========================================================================== */
.otz-footer { margin-top: 60px; background: #060606; border-top: 3px solid var(--otz-orange); }
.otz-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding: 56px 0 40px; }
/*
* width: auto is load-bearing. An ![]()
carries width/height HTML attributes,
* and those map to the CSS width property at a lower priority than author CSS.
* With only max-height set, the attribute width survives, the height gets
* clamped, and the logo is stretched sideways — which is exactly how the footer
* mark ended up squashed. Declaring width: auto lets the browser re-derive the
* width from the aspect ratio. object-fit is belt and braces for the case where
* a very wide logo also hits max-width.
*/
.otz-footer__brand img,
.otz-footer__logo {
width: auto;
height: auto;
max-width: 100%;
max-height: 58px;
object-fit: contain;
margin-bottom: 1rem;
}
.otz-footer p { color: var(--otz-muted); font-size: .92rem; }
.otz-footer h3 { font-size: 1rem; margin-bottom: 1rem; }
.otz-footer ul { margin: 0; padding: 0; list-style: none; }
.otz-footer li { margin-bottom: .5rem; }
.otz-footer a { color: var(--otz-muted); font-size: .92rem; }
.otz-footer a:hover { color: var(--otz-orange); }
.otz-newsletter { display: flex; gap: 10px; margin-top: 1rem; }
.otz-newsletter input[type="email"] { flex: 1; }
.otz-social { display: flex; gap: 10px; margin-top: 1.2rem; }
.otz-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: 50%;
color: var(--otz-text);
}
.otz-social a:hover { background: var(--otz-orange); border-color: var(--otz-orange); color: #2a1c0a; }
.otz-social svg { width: 19px; height: 19px; }
.otz-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 20px 0;
border-top: 1px solid var(--otz-border);
color: var(--otz-muted);
font-size: .85rem;
}
.otz-payments { display: flex; flex-wrap: wrap; gap: 8px; }
.otz-payments span {
padding: .32rem .6rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: 5px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
/* ==========================================================================
12. Block editor front-end support
========================================================================== */
.has-otz-orange-color { color: var(--otz-orange) !important; }
.has-otz-orange-background-color { background-color: var(--otz-orange) !important; }
.has-otz-gold-color { color: var(--otz-gold) !important; }
.has-otz-gold-background-color { background-color: var(--otz-gold) !important; }
.has-otz-black-color { color: var(--otz-black) !important; }
.has-otz-black-background-color { background-color: var(--otz-black) !important; }
.has-otz-panel-color { color: var(--otz-panel) !important; }
.has-otz-panel-background-color { background-color: var(--otz-panel) !important; }
.has-otz-white-color { color: #fff !important; }
.has-otz-white-background-color { background-color: #fff !important; }
.wp-block-button__link { text-decoration: none; }
.is-style-outline .wp-block-button__link { background: transparent; border: 2px solid var(--otz-orange); color: var(--otz-orange); }
.otz-legal-menu { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.otz-legal-menu a { font-size: .85rem; }
.otz-full-width > * { max-width: 100%; }
.otz-front-custom { display: block; }
.otz-archive-description { color: var(--otz-muted); max-width: 720px; }
.otz-entry__footer { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--otz-border); }
.post-navigation { max-width: var(--otz-max); margin: 2rem auto 0; display: flex; justify-content: space-between; gap: 20px; font-weight: 700; }
/* Elementor / page-builder canvas safety */
.otz-builder-canvas .otz-layout { display: block; padding: 0; }
.otz-builder-canvas .otz-entry { background: transparent; border: 0; padding: 0; border-radius: 0; }
/* ==========================================================================
13. Responsive
========================================================================== */
@media (max-width: 1024px) {
.otz-layout { grid-template-columns: minmax(0, 1fr); }
.woocommerce-checkout-layout { grid-template-columns: minmax(0, 1fr); }
.otz-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
.otz-burger { display: inline-flex; }
.otz-nav {
position: fixed;
top: 0; right: 0;
z-index: 500;
width: min(320px, 86vw);
height: 100vh;
height: 100dvh; /* dvh excludes the mobile address bar; vh does not */
padding: 88px 26px 26px;
background: var(--otz-panel);
border-left: 1px solid var(--otz-border);
transform: translateX(100%);
transition: transform .26s ease;
overflow-y: auto;
}
.otz-nav.is-open { transform: translateX(0); }
.otz-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
.otz-nav li { border-bottom: 1px solid var(--otz-border); }
.otz-nav a { padding: .95rem 0; }
.otz-nav .sub-menu {
position: static;
min-width: 0;
opacity: 1;
visibility: visible;
transform: none;
border: 0;
box-shadow: none;
background: transparent;
padding: 0 0 .5rem .9rem;
}
/*
* z-index 150, not 400, and the reason is subtle.
*
* .otz-header is position: sticky with z-index 200, which makes it a
* stacking context. The drawer lives inside it, so the drawer's z-index 500
* is scoped to that context and the whole header — drawer included — paints
* at 200. An overlay at 400 therefore painted OVER the drawer: the menu did
* open, but every tap landed on the overlay, which closes it. It read as
* "the menu doesn't work".
*
* 150 puts the overlay above page content (#page is z-index 1) and below
* the header, so the drawer is reachable and the dimmed backdrop still
* works.
*/
.otz-nav-overlay {
position: fixed;
inset: 0;
z-index: 150;
background: rgba(0, 0, 0, .6);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease;
}
.otz-nav-overlay.is-open { opacity: 1; visibility: visible; }
body.otz-nav-open { overflow: hidden; }
.otz-header__inner { gap: 14px; }
.otz-brand img, .otz-brand .custom-logo { max-height: 46px; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; margin-bottom: 1.6rem; }
}
/* ==========================================================================
Coupon box — phones AND tablets
==========================================================================
Deliberately 1024px, not 720px.
The stacked layout used to stop at 720, so anything wider fell through to the
desktop rule: a 220px field sitting beside a shrink-to-fit button, with the
rest of the row left empty. On a tablet that is most of the width doing
nothing, which is the gap down the side he photographed. 1024 is the same
breakpoint the navigation already uses for tablets, so the whole layout
changes character at one width rather than two.
Both controls are built to the Add to cart pattern: full width, identical
height, one standard gap, centred label. Nothing here can hide the text —
it wraps if it has to, and only between the two words.
========================================================================== */
@media (max-width: 1024px) {
.woocommerce .cart .coupon,
.woocommerce-checkout .checkout_coupon {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: stretch;
align-items: stretch;
gap: var(--otz-gap-pair);
}
.woocommerce .cart .coupon #coupon_code,
.woocommerce .cart .coupon input.input-text,
.woocommerce-checkout .checkout_coupon input.input-text {
flex: none;
box-sizing: border-box;
justify-self: stretch;
width: 100%;
min-width: 0;
max-width: 100%;
height: 52px;
margin: 0;
padding: 0 1rem;
border-radius: var(--otz-radius);
font-size: 1rem;
/* a normal field reads from the left; centring it left the whole left
half of the box looking empty */
text-align: left;
}
.woocommerce .cart .coupon .button,
.woocommerce .cart .coupon input.button,
.woocommerce-checkout .checkout_coupon .button {
flex: none;
box-sizing: border-box;
justify-self: stretch;
display: flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 100%;
max-width: 100%;
min-height: 52px;
margin: 0;
padding: .85rem 1rem;
border-radius: var(--otz-radius);
/* everything else is inherited from the Add to cart button, on purpose */
text-align: center;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
overflow: visible;
}
.woocommerce .cart .coupon .otz-coupon-hint { margin-top: 0; }
}
/* ==========================================================================
13b. Responsive cart and order tables
==========================================================================
A six-column cart table cannot work at 360px. Below 720px each row becomes
its own card and every cell carries its column heading on the left, taken
from the data-title attribute WooCommerce already outputs.
========================================================================== */
@media (max-width: 720px) {
.woocommerce table.shop_table_responsive thead,
.woocommerce-page table.shop_table_responsive thead {
display: none;
}
/*
* The rows are the cards now, so the table must stop being one.
*
* table.shop_table carries a panel background, a border and a radius. Turning
* each row into a panel as well produced a panel inside a panel inside the
* page — three stacked borders a few pixels apart, which is what reads as
* "overlapping boxes" on a phone. Exactly the same mistake as the totals
* table further down, in a different place.
*/
.woocommerce table.shop_table_responsive,
.woocommerce-page table.shop_table_responsive {
display: block;
width: 100%;
margin-bottom: var(--otz-gap-pair);
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.woocommerce table.shop_table_responsive > tbody,
.woocommerce-page table.shop_table_responsive > tbody { display: block; }
/*
* Rows wrap rather than stack, so two cells can share a line. That is what
* lets the bin sit beside the quantity stepper instead of floating alone in
* a band of its own at the top of the card.
*/
.woocommerce table.shop_table_responsive tr,
.woocommerce-page table.shop_table_responsive tr {
display: flex;
flex-wrap: wrap;
align-items: stretch;
margin-bottom: var(--otz-gap-pair);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
background: var(--otz-panel);
overflow: hidden;
}
.woocommerce table.shop_table_responsive tr:last-child,
.woocommerce-page table.shop_table_responsive tr:last-child { margin-bottom: 0; }
.woocommerce table.shop_table_responsive tr td,
.woocommerce-page table.shop_table_responsive tr td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--otz-gap-pair);
/*
* A full-width row by default. An explicit order on every cell, because
* a flex child with no order defaults to 0 and sorts ahead of everything
* numbered — the bug that once threw the promises row to the top of the
* phone homepage.
*/
flex: 1 1 100%;
order: 10;
min-width: 0;
width: 100%;
padding: .75rem 1rem;
border-bottom: 1px solid var(--otz-border);
text-align: right;
}
.woocommerce table.shop_table_responsive tr td.product-thumbnail { order: 1; }
.woocommerce table.shop_table_responsive tr td.product-name { order: 2; }
.woocommerce table.shop_table_responsive tr td.product-price { order: 3; }
.woocommerce table.shop_table_responsive tr td.product-quantity { order: 4; flex: 1 1 auto; }
.woocommerce table.shop_table_responsive tr td.product-remove { order: 5; }
.woocommerce table.shop_table_responsive tr td.product-subtotal { order: 6; }
.woocommerce table.shop_table_responsive tr td:last-child,
.woocommerce-page table.shop_table_responsive tr td:last-child {
border-bottom: 0;
}
.woocommerce table.shop_table_responsive tr td::before,
.woocommerce-page table.shop_table_responsive tr td::before {
content: attr(data-title) ": ";
flex: 0 0 auto;
color: var(--otz-muted);
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
/* cells that have no useful heading */
.woocommerce table.shop_table_responsive tr td.product-remove::before,
.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
.woocommerce table.shop_table_responsive tr td.actions::before {
content: "";
}
.woocommerce table.shop_table_responsive tr td.product-thumbnail {
justify-content: center;
padding-top: 1rem;
}
.woocommerce table.shop_table_responsive tr td.product-thumbnail img {
width: 92px;
}
/*
* The bin belongs next to the number it removes.
*
* It used to be a band of its own at the top of the card, which put the most
* destructive control on the page furthest from anything it refers to. Now it
* shares the quantity row: stepper on the left of it, one standard gap
* between them.
*/
.woocommerce table.shop_table_responsive tr td.product-remove {
flex: 0 0 auto;
justify-content: flex-end;
padding-left: 0;
border-bottom: 1px solid var(--otz-border);
}
.woocommerce table.shop_table_responsive tr td.actions {
display: block;
flex: 1 1 100%;
text-align: left;
padding: 1rem;
}
.woocommerce table.cart td.actions > .button,
.woocommerce table.cart td.actions > input.button,
.woocommerce table.cart td.actions > button.button { width: 100%; }
.woocommerce .cart .coupon #coupon_code { min-width: 0; }
/*
* A slightly smaller stepper in the cart only, so the bin fits beside it on
* a 360px phone. Still 46px, comfortably over the 44px tap minimum. The
* product page keeps the larger one, where it has the room.
*/
.woocommerce table.shop_table_responsive td.product-quantity .otz-qty__btn {
width: 46px; min-width: 46px; height: 46px; font-size: 1.5rem;
}
.woocommerce table.shop_table_responsive td.product-quantity input.qty {
width: 56px; height: 46px; font-size: 1.05rem;
}
/* fingers, not mice: everything tappable gets the full 44px here */
.woocommerce a.remove { width: 44px; height: 44px; font-size: 1.75rem; }
.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-ordering select { width: 100%; min-width: 0; }
.otz-social a { width: 46px; height: 46px; }
/* cart totals is a two-column table and can stay one, just tighter */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td { padding: .7rem .8rem; }
/*
* Undo the card treatment for the totals and the checkout review.
*
* WooCommerce puts shop_table_responsive on the cart LINE ITEMS table and on
* the TOTALS table. Turning every row of both into a bordered panel meant
* Subtotal, Shipping and Total each became their own dark box, nested inside
* the dark box around the totals, inside the page — which is the stack of
* overlapping black backgrounds. Only the line items should be cards.
*/
.woocommerce .cart_totals table.shop_table_responsive,
.woocommerce-checkout-review-order table.shop_table_responsive {
display: table;
background: transparent;
border: 0;
}
.woocommerce .cart_totals table.shop_table_responsive tr,
.woocommerce-checkout-review-order table.shop_table_responsive tr {
display: table-row;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.woocommerce .cart_totals table.shop_table_responsive tr th,
.woocommerce .cart_totals table.shop_table_responsive tr td,
.woocommerce-checkout-review-order table.shop_table_responsive tr th,
.woocommerce-checkout-review-order table.shop_table_responsive tr td {
display: table-cell;
width: auto;
background: transparent;
border: 0;
border-bottom: 1px solid var(--otz-border);
text-align: left;
}
.woocommerce .cart_totals table.shop_table_responsive tr td,
.woocommerce-checkout-review-order table.shop_table_responsive tr td { text-align: right; }
/* their data-title labels are already in the , so drop the generated one */
.woocommerce .cart_totals table.shop_table_responsive tr td::before,
.woocommerce-checkout-review-order table.shop_table_responsive tr td::before { content: none; }
.woocommerce .cart_totals table.shop_table_responsive > tbody,
.woocommerce-checkout-review-order table.shop_table_responsive > tbody {
display: table-row-group;
}
/* one panel around the totals, not one per line */
.woocommerce .cart-collaterals .cart_totals {
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
padding: 16px;
}
}
/*
* Breathing room between the last thing in the cart form and the totals panel.
*
* Clear cart is the final control inside the form; Cart totals is the panel
* after it. With nothing between them their borders sat on top of each other
* and read as one broken box. One standard pair gap, the same value used
* between Add to cart and Buy now, so the whole store spaces things alike.
*/
.otz-cart-tools { margin-bottom: var(--otz-gap-pair); }
.woocommerce-cart form.woocommerce-cart-form { margin-bottom: 0; }
.woocommerce .cart-collaterals { margin-top: var(--otz-gap-pair); }
@media (max-width: 480px) {
/*
* Drop the QUANTITY label on the narrowest phones. A stepper needs no
* caption, and the space it frees is what keeps the bin on the same line
* instead of wrapping to one of its own.
*/
.woocommerce table.shop_table_responsive tr td.product-quantity::before { content: ""; }
.woocommerce table.shop_table_responsive tr td.product-quantity { justify-content: flex-end; }
}
@media (max-width: 600px) {
.otz-container { padding: 0 20px; }
.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9rem; padding: 12px 12px 0; }
.woocommerce ul.products li.product .price { font-size: 1.05rem; padding: 6px 12px 0; }
.woocommerce ul.products li.product .button { margin: 12px; padding: .62rem .7rem; font-size: .74rem; }
.otz-loop-brand, .otz-loop-stock { padding-left: 12px; padding-right: 12px; }
.otz-footer__top { grid-template-columns: 1fr; }
.otz-section__head { flex-direction: column; align-items: flex-start; }
.woocommerce div.product form.cart div.quantity { margin-bottom: 10px; }
.woocommerce div.product form.cart .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ==========================================================================
14. Filter bar
========================================================================== */
.otz-filters {
margin-bottom: 22px;
padding: 16px 18px;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
}
.otz-filters.is-active { border-color: var(--otz-orange); }
.otz-filters__toggle {
display: none;
align-items: center;
gap: 10px;
width: 100%;
padding: .8rem 1rem;
background: transparent;
border: 1px solid var(--otz-border);
color: var(--otz-text);
font-size: .92rem;
text-transform: uppercase;
letter-spacing: .05em;
}
.otz-filters__toggle svg { width: 18px; height: 18px; }
.otz-filters__dot {
width: 9px;
height: 9px;
margin-left: auto;
border-radius: 50%;
background: var(--otz-orange);
}
/*
* One grid for the whole row, and the fields use display: contents so their
* label and control become direct grid items.
*
* Two previous attempts tried to align each field independently — first with
* flex-end, then with a per-field grid — and both left Sort a few pixels out,
* because each field still measured itself. Here there is only ONE grid: every
* label lands in row 1 and every control in row 2, so they physically cannot
* disagree, whatever is inside them.
*/
.otz-filters__fields {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(150px, 1fr);
grid-template-rows: 18px 46px;
align-items: end;
gap: 6px 14px;
}
.otz-filters__field { display: contents; }
.otz-filters__field > span {
grid-row: 1;
align-self: end;
line-height: 18px;
}
.otz-filters__field > select,
.otz-filters__field > .otz-filters__range { grid-row: 2; }
.otz-filters__range { height: 46px; }
.otz-filters__actions {
grid-row: 2;
grid-auto-columns: max-content;
align-self: end;
height: 46px;
}
.otz-filters__field > span {
color: var(--otz-muted);
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.otz-filters select,
.otz-filters input[type="number"] {
width: 100%;
min-width: 0;
height: 46px;
padding: 0 .8rem;
background: var(--otz-panel-2);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius);
color: var(--otz-text);
font-size: .95rem;
}
.otz-filters__range { display: flex; align-items: center; gap: 8px; }
.otz-filters__range i { color: var(--otz-muted); font-style: normal; }
.otz-filters__actions {
display: flex;
align-items: center;
gap: 14px;
flex: 0 0 auto;
}
.otz-filters__apply { height: 46px; padding: 0 1.6rem; }
.otz-filters__clear {
color: var(--otz-muted);
font-size: .85rem;
text-decoration: underline;
white-space: nowrap;
}
.otz-filters__clear:hover { color: var(--otz-danger); }
/* On a phone the bar collapses; opening it is one tap, and the dot tells you
filters are active without having to open it. */
@media (max-width: 860px) {
.otz-filters__toggle { display: flex; }
.otz-filters__fields { display: none; margin-top: 14px; }
.otz-filters.is-open .otz-filters__fields {
display: grid;
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-rows: none;
gap: 12px;
}
.otz-filters__field { display: grid; grid-template-rows: 18px 46px; gap: 6px; }
.otz-filters__actions { grid-row: auto; height: auto; display: flex; }
.otz-filters__apply { flex: 1; }
}
/* ==========================================================================
15. Carousel
==========================================================================
Rewritten to move the track with a transform instead of scrolling it.
The scroll-snap version had two problems that could not be styled away: a
scrollbar sat under the cards, and "which card is in the middle" had to be
re-derived from scroll position on every frame, which made the zoom
unreliable. Driving an index and translating the track means the active card
is known, not measured — so the zoom is exact and there is nothing to scroll.
========================================================================== */
.otz-carousel {
position: relative;
overflow: hidden;
/*
* Generous vertical padding is what gives the hover lift somewhere to go.
* The box has to clip horizontally to hide the cards waiting off-screen,
* and overflow cannot be clipped on one axis and visible on the other in
* older browsers, so the room is made rather than borrowed.
*/
padding: 76px 0 68px;
}
/* where it is supported, let the lift escape the box entirely */
@supports (overflow: clip) {
.otz-carousel {
overflow-x: clip;
overflow-y: visible;
}
}
.otz-carousel__track {
display: flex;
gap: 18px;
align-items: stretch;
will-change: transform;
transition: transform .78s cubic-bezier(.22, 1, .36, 1);
}
/* no scrollbar, on any engine */
.otz-carousel__track {
scrollbar-width: none;
-ms-overflow-style: none;
}
.otz-carousel__track::-webkit-scrollbar { display: none; }
.otz-carousel__track > * {
flex: 0 0 auto;
width: clamp(168px, 22vw, 232px);
transform: scale(.90);
opacity: .58;
filter: saturate(.82);
transition: transform .78s cubic-bezier(.22, 1, .36, 1),
opacity .62s ease,
filter .62s ease;
}
/* the one in front */
.otz-carousel__track > .is-current {
transform: scale(1.08);
opacity: 1;
filter: saturate(1.15);
z-index: 2;
box-shadow: 0 18px 48px rgb(0 0 0 / .45);
}
/* its immediate neighbours sit between the two states, so the row reads as depth */
/*
* Pointer devices: the hovered card lifts, then the row brings it to the front.
*
* Two stages, on purpose, because they answer two different things.
*
* The lift is instant and pure CSS. It is the row acknowledging the pointer the
* moment it arrives, with no delay of any kind, so nothing ever feels dead
* under the hand.
*
* Taking the middle is the script's job and it waits out the dwell, so merely
* crossing the row does not drag it anywhere. Once the card does become current
* and is still hovered, the second rule takes over and it lifts further — the
* selected brand ends up unmistakably the largest thing on screen.
*
* Scaling from the bottom edge rather than the centre, so the card grows upward
* and its own footing stays put. Growing in both directions reads as the whole
* row shifting rather than one tile rising out of it.
*/
@media (hover: hover) and (pointer: fine) {
.otz-carousel__track > *:hover {
transform: scale(1.22);
/*
* Grows from its own centre, so the card gets bigger where it already
* is. Scaling from the bottom edge sent the top of the card shooting
* upward instead, and doing that to each card in turn as the pointer
* crossed the row read as the whole thing jumping about vertically.
* Nothing here should move up or down.
*/
transform-origin: center center;
opacity: 1;
filter: saturate(1.1);
z-index: 6;
box-shadow: 0 20px 52px rgb(0 0 0 / .5);
}
/* hovered AND in front: the full pop */
.otz-carousel__track > .is-current:hover {
transform: scale(1.45);
filter: saturate(1.25);
box-shadow: 0 32px 72px rgb(0 0 0 / .6);
}
/*
* The lift is quicker than the slide. The card has to answer the pointer
* immediately; the row is allowed to take its time catching up.
*/
.otz-carousel__track > *:hover {
transition: transform .34s cubic-bezier(.2, .9, .3, 1.25),
opacity .3s ease,
filter .3s ease,
box-shadow .34s ease;
}
}
.otz-carousel__track > .is-near {
transform: scale(.97);
opacity: .86;
filter: saturate(.95);
}
/*
* While the row is sliding, nothing in it can be clicked.
*
* pointer-events rather than a JavaScript guard alone, because it also stops
* the hover state changing mid-slide — a card lighting up as it passes under
* the cursor is what makes the row feel twitchy, and it invites exactly the
* accidental click the lock exists to prevent.
*/
.otz-carousel.is-moving .otz-carousel__track > * { pointer-events: none; }
.otz-carousel.is-moving { cursor: default; }
/* ---------------------------------------------------------------- controls */
.otz-carousel__nav {
position: absolute;
top: 50%;
z-index: 5;
transform: translateY(-50%);
width: 54px;
height: 54px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgb(255 255 255 / .07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgb(255 255 255 / .22);
border-radius: 50%;
color: #fff;
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
opacity: .7;
transition: opacity .22s ease, background .22s ease, transform .22s ease;
}
.otz-carousel:hover .otz-carousel__nav { opacity: 1; }
.otz-carousel__nav:hover {
background: rgb(255 255 255 / .18);
transform: translateY(-50%) scale(1.08);
}
.otz-carousel__nav--prev { left: 10px; }
.otz-carousel__nav--next { right: 10px; }
/* on touch the arrows loop, so they are never disabled */
.otz-carousel__nav:disabled { opacity: .7; cursor: pointer; }
/* ==========================================================================
Desktop: the revolving ring
==========================================================================
1.25.0 replaces the flat depth trick with a real ring.
Until now the desktop row was still a strip: a flex track that slid
sideways, with the cards either side of the middle tilted by a fixed
32deg to suggest a curve. It suggested one convincingly enough at three
cards and stopped suggesting anything at seven, because every off-centre
card was tilted by the same amount and set back by one of two distances.
The fourth card looked exactly like the third.
Here the cards are actually placed on a circle — card i sits at
rotateY(i * 360/n) translateZ(radius) — and the track itself rotates by
one step per move. Depth, tilt and spacing then fall out of the geometry
instead of being approximated by classes, and they stay correct at any
number of cards.
Two things follow from it being a real circle:
WRAPPING. A ring that stops at the ends is a ring with a seam in it, and
the seam is visible: you can see the cards behind. So on desktop the row
now loops. The reason the flat version stopped at the ends was that
wrapping hid how long the catalogue was — that job now belongs entirely
to the dots underneath, which still show the true count and position.
BACKFACES. Cards on the far side of the ring face away from you. They are
hidden outright rather than left to render mirrored.
Only applied where all three are true: a real pointer, hover, and room to
show it. Phones and tablets fall through to the swipe row above,
untouched — not restyled, not re-gated, the same code path they have run
since 1.12.0.
---------------------------------------------------------------------- */
/*
* The numbers, in one place.
*
* Ported from carousel-preview.html. The preview used a 132x142 card on a
* 210px radius; these are the same proportions scaled up by 168/132, because
* a real tile carries a 72px emblem plus a name plus a count and 142px of
* height clipped the count off. The ratio radius/card-width is held at 1.59
* exactly as the preview had it, so the ring spreads the same way it did.
*
* To go back to the preview's literal numbers, set card-w 132px, card-h
* 142px, radius 210px, stage-h 210px, top 34px. Nothing else needs to change.
*/
.otz-carousel {
--otz-ring-card-w: 168px;
--otz-ring-card-h: 182px;
--otz-ring-radius: 268px;
--otz-ring-stage-h: 262px;
--otz-ring-top: 40px;
/*
* How wide the armed strip in the middle is. Read by main.js at pointer
* time, not cached, so changing it here changes the behaviour with no
* rebuild. 150px was chosen in the preview.
*/
--otz-ring-zone: 150px;
--otz-ring-turn: .85s;
--otz-ring-ease: cubic-bezier(.25, .9, .3, 1);
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
/*
* Padding.
*
* The live row sat in 76px above and 68px below, which is where the
* complaint that the tiles "read as small" came from — they were not
* small, they were marooned. The ring reserves its own height through
* --otz-ring-stage-h instead, so the padding drops to what the preview
* used. Scoped to desktop: on phone and tablet the old padding stays,
* because the swipe row still needs somewhere to put its hover lift.
*/
.otz-carousel.is-ring {
padding: 18px 0 20px;
perspective: 1000px;
}
/*
* The track stops being a flex strip and becomes the ring itself: a
* zero-size hub at the centre of the stage that the cards hang off.
*
* height, not padding, because the cards are absolutely positioned and
* contribute nothing — without it the section would collapse to nothing
* and the footer would ride up over the row.
*
* overflow MUST stay visible here. Any other value forces the used value
* of transform-style back to flat, which would silently collapse the
* whole ring into a stack of overlapping cards. That is the single
* easiest way to break this file.
*/
.otz-carousel.is-ring .otz-carousel__track {
display: block;
position: relative;
height: var(--otz-ring-stage-h);
gap: 0;
overflow: visible;
transform-style: preserve-3d;
transition: transform var(--otz-ring-turn) var(--otz-ring-ease);
}
/*
* Every card is stacked at the same point; the inline rotateY/translateZ
* main.js writes is what pushes each one out to its own place on the
* circle. Position and size live here so the geometry is the only thing
* the script has to own.
*/
.otz-carousel.is-ring .otz-carousel__track > * {
position: absolute;
top: var(--otz-ring-top);
left: 50%;
width: var(--otz-ring-card-w);
height: var(--otz-ring-card-h);
margin-left: calc(var(--otz-ring-card-w) / -2);
/* the far side of the ring faces away; do not render it mirrored */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-origin: center center;
opacity: .22;
filter: saturate(.8);
cursor: default;
/*
* Nothing but the middle card can be pointed at. The JS refuses the
* click as well; this is the half that also stops the hover glow, the
* custom cursor and the tooltip from firing on a tile that is half
* turned away and cannot be opened.
*/
pointer-events: none;
transition: opacity .5s ease, filter .5s ease;
}
/*
* Distance is measured the short way round the ring, so the card one step
* anticlockwise from the front is "near" even when it is last in the DOM.
* main.js sets these; CSS only says what each one looks like.
*/
.otz-carousel.is-ring .otz-carousel__track > .is-near { opacity: .6; }
.otz-carousel.is-ring .otz-carousel__track > .is-far { opacity: .3; }
.otz-carousel.is-ring .otz-carousel__track > .is-out { opacity: .22; }
/* the one at the front: full colour, clickable, breathing */
.otz-carousel.is-ring .otz-carousel__track > .is-current {
opacity: 1;
filter: saturate(1.15);
pointer-events: auto;
cursor: pointer;
z-index: 2;
animation: otz-selected 2.6s ease-in-out infinite;
}
/*
* No hover-grow on the front card.
*
* The pointer entering and leaving the middle strip is now what drives
* the ring, so the middle of the row is somewhere the pointer passes
* through constantly. A card that swelled every time would be moving
* whenever the row was about to move, and the two would read as one
* gesture that had gone wrong. The pulse says "this one is live"
* without competing with the turn.
*/
/* the arrows are always available, so they never fade out */
.otz-carousel.is-ring .otz-carousel__nav,
.otz-carousel.is-arrows .otz-carousel__nav { opacity: 1; }
/*
* Reduced-motion desktop never becomes a ring, so it keeps the arrows
* that stop at the ends. This styling is for that fallback.
*/
.otz-carousel.is-arrows .otz-carousel__nav:disabled {
opacity: .28;
cursor: default;
transform: translateY(-50%);
}
.otz-carousel.is-arrows .otz-carousel__nav:disabled:hover {
background: rgb(255 255 255 / .07);
transform: translateY(-50%);
}
/*
* The armed strip, drawn only when you ask for it.
*
* Customize > Homepage > "Show the carousel trigger zone". Being able to
* see the boundary is the difference between "the row is twitchy" and
* "the row turns when I leave here", and that is worth shipping rather
* than leaving behind in a preview file.
*/
.otz-carousel.is-ring::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: var(--otz-ring-zone);
margin-left: calc(var(--otz-ring-zone) / -2);
border-left: 1px dashed rgb(var(--otz-brand-rgb) / .28);
border-right: 1px dashed rgb(var(--otz-brand-rgb) / .28);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: 1;
}
.otz-show-ring-zone .otz-carousel.is-ring::before { opacity: 1; }
/* position markers: how long the row is, and where you are in it */
.otz-carousel__dots { display: flex; }
}
.otz-carousel__dots {
display: none;
gap: 7px;
justify-content: center;
margin: -14px 0 8px;
}
.otz-carousel__dots > span {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgb(255 255 255 / .22);
transition: width .45s cubic-bezier(.22, 1, .36, 1), background .45s ease;
}
.otz-carousel__dots > span.is-on {
width: 18px;
border-radius: 3px;
background: var(--otz-gold);
}
/*
* A slow breath in the tile's own colour, marking the one card that can be
* clicked. It ends on transparent so the ring never sits there solid competing
* with the artwork.
*/
@keyframes otz-selected {
0%, 100% { box-shadow: 0 18px 48px rgb(0 0 0 / .45), 0 0 0 0 rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)) / .55); }
50% { box-shadow: 0 18px 48px rgb(0 0 0 / .45), 0 0 0 9px rgb(var(--otz-tile-rgb, var(--otz-brand-rgb)) / 0); }
}
@media (max-width: 720px) {
.otz-carousel { padding: 26px 0; }
.otz-carousel__track > * { width: clamp(150px, 56vw, 200px); }
.otz-carousel__nav { width: 44px; height: 44px; font-size: 1.5rem; }
.otz-carousel__nav--prev { left: 4px; }
.otz-carousel__nav--next { right: 4px; }
}
/*
* Reduced motion.
*
* The ring is never built at all in this case — main.js checks the same query
* before it adds is-ring, so a reader who has asked for less movement gets the
* flat arrows-only row instead of a spinning one. These rules are the second
* half of that promise: even if the class somehow survived a resize, there is
* no transition left for it to animate with.
*
* transform: none cannot reach the inline transforms the ring writes, so the
* script clears those itself when it stands down. Belt and braces, because a
* ring frozen mid-turn would be worse than either state.
*/
@media (prefers-reduced-motion: reduce) {
.otz-carousel__track,
.otz-carousel__track > * { transition: none; }
.otz-carousel__track > * { transform: none; opacity: 1; filter: none; }
.otz-carousel.is-ring .otz-carousel__track { transition: none; }
.otz-carousel.is-ring .otz-carousel__track > .is-current { animation: none; }
}
.otz-franchise__label { display: block; }
/* ==========================================================================
16. Mobile and tablet running order
==========================================================================
Same markup, different sequence: featured products land directly under the
hero where a phone visitor sees them without scrolling far, then brands,
then everything else. Desktop keeps the original order.
========================================================================== */
@media (max-width: 1024px) {
.otz-main { display: flex; flex-direction: column; }
/*
* A flex child with no order property defaults to 0, which sorts BEFORE
* order: 1 — so any section we forget to name jumps to the very top. That
* is exactly how the promises row ended up above the hero. This catch-all
* sends anything unnamed to the bottom instead, which is the safe failure.
*/
.otz-main > * { order: 50; }
.otz-hero { order: 1; }
.otz-marquee { order: 2; }
.otz-section--featured { order: 3; }
.otz-section--brands { order: 4; }
.otz-section--new { order: 5; }
.otz-band { order: 6; }
.otz-section--sale { order: 7; }
.otz-features-section { order: 8; }
.otz-section--promises { order: 8; }
.otz-features { order: 8; }
.otz-cta-band { order: 9; }
}
/* Dropdown menus follow the three pickers in Customize > Menu colours. */
.otz-nav .sub-menu {
background: var(--otz-nav-bg, var(--otz-panel));
}
.otz-nav .sub-menu a { color: var(--otz-nav-text, var(--otz-text)); }
.otz-nav .sub-menu a:hover,
.otz-nav .sub-menu a:focus-visible {
color: var(--otz-nav-accent, var(--otz-orange));
background: rgb(var(--otz-brand-rgb) / .1);
}
/* ==========================================================================
17. Product card actions
==========================================================================
Add to cart, quantity, Buy now — one width, one height, evenly spaced. The
stepper is hidden until Add to cart is pressed, so a card that nobody has
interacted with stays calm.
========================================================================== */
.woocommerce ul.products li.product {
display: flex;
flex-direction: column;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.otz-buy-now--card {
display: block !important;
width: calc(100% - 24px);
margin: var(--otz-gap-pair) 12px 0 !important;
padding: .78rem 1rem !important;
font-size: .88rem !important;
text-align: center;
box-sizing: border-box;
}
/* WooCommerce drops a "View cart" link in after an AJAX add; it would break
the rhythm of the three buttons, so it is folded away. */
.woocommerce ul.products li.product .added_to_cart { display: none !important; }
.otz-card-qty {
width: calc(100% - 24px);
margin: var(--otz-gap-pair) 12px 0;
}
.otz-card-qty[hidden] { display: none; }
.otz-card-qty .quantity.otz-qty {
display: flex;
width: 100%;
height: 46px;
}
.otz-card-qty .otz-qty__btn { height: 46px; flex: 0 0 46px; min-width: 46px; }
.otz-card-qty .quantity.otz-qty input.qty {
flex: 1 1 auto;
width: auto;
height: 46px;
}
.woocommerce ul.products li.product > *:last-child { margin-bottom: 14px !important; }
/* On the product page the same three sit in a column, full width. */
.woocommerce div.product form.cart {
display: flex;
flex-direction: column;
gap: var(--otz-gap-pair);
align-items: stretch;
}
.woocommerce div.product form.cart .quantity { align-self: flex-start; }
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .otz-buy-now {
width: 100%;
margin: 0;
padding: 1rem 1.4rem;
font-size: 1rem;
}
/* ==========================================================================
18. Confirm dialog
==========================================================================
Used by Buy now when the cart already has something in it. A themed panel
rather than the browser's confirm(), which cannot be styled and looks
alarming on a storefront.
========================================================================== */
.otz-confirm {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgb(12 9 16 / .72);
backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
.otz-confirm.is-open { opacity: 1; visibility: visible; }
.otz-confirm__panel {
width: min(460px, 100%);
padding: 26px;
background: var(--otz-panel);
border: 1px solid var(--otz-border);
border-radius: var(--otz-radius-lg);
box-shadow: 0 24px 70px rgb(0 0 0 / .5);
transform: translateY(10px) scale(.97);
transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.otz-confirm.is-open .otz-confirm__panel { transform: none; }
.otz-confirm__panel h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.otz-confirm__panel p { color: var(--otz-muted); margin-bottom: 1.4rem; }
.otz-confirm__actions {
display: flex;
flex-wrap: wrap;
gap: var(--otz-gap-pair);
}
.otz-confirm__actions .otz-btn { flex: 1 1 140px; }
.otz-confirm__cancel {
background: transparent !important;
border: 1px solid var(--otz-border) !important;
color: var(--otz-text) !important;
}
/* ==========================================================================
19. Per-page backgrounds
==========================================================================
Set per page in the editor sidebar. Fixed to the viewport and behind #page,
which already carries z-index 1, so page content needs no extra rules.
========================================================================== */
.otz-page-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.otz-page-bg--video .otz-hero__media { inset: -4% 0; }
.otz-page-bg__scrim {
position: absolute;
inset: 0;
background: linear-gradient(0deg,
rgb(37 31 46 / .96) 0%,
rgb(37 31 46 / .72) 45%,
rgb(37 31 46 / .58) 100%);
}
/* -------------------------------------------------------- animated backdrop
Three soft pools of colour drifting at different speeds, drawn from the
brand hue — so a brand page tints them without any extra work. Only
transform and opacity animate, both composited, so this costs the GPU a
little and the CPU essentially nothing.
------------------------------------------------------------------------ */
.otz-page-bg__pool {
position: absolute;
border-radius: 50%;
filter: blur(70px);
opacity: .5;
will-change: transform;
}
.otz-page-bg__pool--1 {
width: 46vw;
height: 46vw;
min-width: 340px;
min-height: 340px;
top: -12%;
left: -8%;
background: radial-gradient(circle, rgb(var(--otz-brand-deep-rgb) / .55), transparent 70%);
animation: otz-drift-a 26s ease-in-out infinite;
}
.otz-page-bg__pool--2 {
width: 40vw;
height: 40vw;
min-width: 300px;
min-height: 300px;
top: 24%;
right: -10%;
background: radial-gradient(circle, rgb(var(--otz-brand-rgb) / .45), transparent 70%);
animation: otz-drift-b 34s ease-in-out infinite;
}
.otz-page-bg__pool--3 {
width: 52vw;
height: 52vw;
min-width: 360px;
min-height: 360px;
bottom: -20%;
left: 22%;
background: radial-gradient(circle, rgb(var(--otz-brand-light-rgb) / .34), transparent 70%);
animation: otz-drift-c 42s ease-in-out infinite;
}
/* a whisper of noise stops the gradients banding on cheap screens */
.otz-page-bg__grain {
position: absolute;
inset: 0;
opacity: .16;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@keyframes otz-drift-a {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(6vw, 7vh, 0) scale(1.12); }
66% { transform: translate3d(-3vw, 12vh, 0) scale(.95); }
}
@keyframes otz-drift-b {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
40% { transform: translate3d(-8vw, 10vh, 0) scale(1.16); }
70% { transform: translate3d(-2vw, -6vh, 0) scale(.92); }
}
@keyframes otz-drift-c {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(9vw, -9vh, 0) scale(1.1); }
}
/*
* With a backdrop behind it, the page's own flat colour would hide it, so the
* body goes transparent and the surfaces keep their own panels.
*/
body.otz-has-page-bg { background: var(--otz-black); }
body.otz-has-page-bg::before { opacity: .35; }
/* phones: fewer, slower, smaller — battery matters more than spectacle */
@media (max-width: 720px) {
.otz-page-bg__pool--3 { display: none; }
.otz-page-bg__pool { filter: blur(50px); animation-duration: 46s; }
}
@media (prefers-reduced-motion: reduce) {
.otz-page-bg__pool { animation: none; }
}
/* an explanation only an administrator sees, where an empty section would be */
.otz-admin-note {
margin: 0;
padding: 18px 22px;
border: 1px dashed rgb(255 255 255 / .28);
border-radius: 10px;
background: rgb(255 255 255 / .04);
color: rgb(255 255 255 / .78);
font-size: .92rem;
line-height: 1.7;
}
.otz-admin-note strong { color: var(--otz-gold); }
/* ==========================================================================
WooCommerce archive layout (revised in 1.26.2)
1.26.0 capped this grid at --otz-max and centred it. That fixed the
symptom and lost the design: the shop is meant to run the full width of
the screen, which is how 1.25.0 looked and why it looked good.
The real fault was never the width. A CSS grid stretches its items to
the height of their row by default (align-items: normal behaves as
stretch), and stretches its rows to fill any spare height in the
container (align-content). On a wide display the grid produced two short
rows with a lot of leftover vertical space, and every card grew to
absorb it — cards ~1800px tall with a screen of emptiness underneath.
Measured on /shop/page/3/ at a 2880px viewport:
default alignment : tiles 1806px tall
alignment fixed : tiles 594px tall, full width preserved
So: no max-width, no centring. Just stop the stretching.
========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
/* Each card is as tall as its own content, not as tall as its neighbour. */
align-items: start;
/* Rows sit at the top instead of sharing out leftover height. */
align-content: start;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
align-self: start;
}
/* ==========================================================================
Single product: one column on phones AND tablets (1.26.3)
WooCommerce lays the product page out with floats — gallery 48% left,
summary 48% right — and only collapses them to one column below 768px.
A tablet, or a large phone in landscape, sits above that line and gets
the desktop split: a postage-stamp image beside a squeezed column of
text, with the buy button pushed below the fold.
Measured on a product page: div.product is display:block, the gallery
floats left at 48% and div.summary floats right at 48%.
The image is the product. On any screen narrower than a laptop it should
run the full width, with the title, price, stock and buy buttons stacked
beneath it in reading order. So the breakpoint moves from 768px to
1024px and the floats are cleared properly.
========================================================================== */
@media (max-width: 1024px) {
.woocommerce div.product,
.woocommerce-page div.product,
.woocommerce #content div.product {
display: block;
}
/* The gallery, under every selector WooCommerce and the theme use. */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce-page div.product div.images,
.woocommerce-page div.product .woocommerce-product-gallery,
.woocommerce #content div.product div.images,
.woocommerce #content div.product .woocommerce-product-gallery {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px !important;
}
/* The summary: title, price, stock, add to cart. */
.woocommerce div.product div.summary,
.woocommerce div.product .entry-summary,
.woocommerce-page div.product div.summary,
.woocommerce-page div.product .entry-summary,
.woocommerce #content div.product div.summary,
.woocommerce #content div.product .entry-summary {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 24px !important;
clear: both;
}
/* Tabs and related products sit below, full width, floats cleared. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
float: none;
width: 100%;
clear: both;
}
/*
* Buy buttons are the point of the page. Full width and a 48px minimum
* height — Android's guidance for touch targets, and comfortably
* tappable with a thumb.
*/
.woocommerce div.product form.cart .button,
.woocommerce div.product .otz-buy-now {
width: 100%;
min-height: 48px;
}
}
/* ==========================================================================
Brand carousel: every tile is clickable (fixed properly in 1.26.4)
The 1.26.2 attempt targeted .otz-brand-tile.is-near — a selector that does
not exist in this stylesheet, at a specificity of 0,2,0. The real rule is
.otz-carousel.is-ring .otz-carousel__track > .is-near (0,3,1)
so the override never applied and nothing changed. Corrected here.
Worth being clear about what was actually wrong, because it was not the
JavaScript. The click handler in motion.js already does the right thing
for any tile: it spins the ring to that brand, then follows the href. The
CSS was stopping the click from ever reaching the element, so the handler
never ran. MARVEL was rendered as the whole
time, and /brand/marvel/ returns HTTP 200.
This also restores the "Enter" cursor label. That label is applied on
hover, and pointer-events: none prevents hover from firing at all — so
the label disappeared for the same single reason.
========================================================================== */
.otz-carousel.is-ring .otz-carousel__track > .is-near,
.otz-carousel.is-ring .otz-carousel__track > .is-far,
.otz-carousel.is-ring .otz-carousel__track > .is-out {
pointer-events: auto;
cursor: pointer;
}
/*
* Side tiles brighten a little on hover so they read as reachable, without
* competing with the front card, which keeps its full colour and pulse.
*/
.otz-carousel.is-ring .otz-carousel__track > .is-near:hover,
.otz-carousel.is-ring .otz-carousel__track > .is-far:hover,
.otz-carousel.is-ring .otz-carousel__track > .is-out:hover,
.otz-carousel.is-ring .otz-carousel__track > .is-near:focus-visible,
.otz-carousel.is-ring .otz-carousel__track > .is-far:focus-visible,
.otz-carousel.is-ring .otz-carousel__track > .is-out:focus-visible {
opacity: .85;
filter: saturate(1);
}
/*
* The mid-slide lock still stands, and now needs matching specificity to
* beat the rule above. A card must not be clickable while it is moving
* under the cursor — that is the accidental click the lock exists for.
*/
.otz-carousel.is-moving .otz-carousel__track > .is-current,
.otz-carousel.is-moving .otz-carousel__track > .is-near,
.otz-carousel.is-moving .otz-carousel__track > .is-far,
.otz-carousel.is-moving .otz-carousel__track > .is-out {
pointer-events: none;
}
|