:root { --wop-brand:        #073769; --wop-brand-dark:   #052646;
--wop-accent:       #2a88ea; --wop-accent-dark:  #1159af; --wop-accent-text:  #1f6fc4;
--wop-border-strong: #b9c6d4;  --wop-bg:           #F7FAFC;
--wop-card-bg:      #ffffff;
--wop-border:       #EDF2F7; --wop-text:         #1A202C;
--wop-text-muted:   #4A5568;
--wop-text-invert:  #ffffff; --wop-font:         "Bai Jamjuree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--wop-font-heading: var(--wop-font); --wop-content-max:  1200px;
--wop-gutter:       24px;
--wop-section-y:    clamp(48px, 7vw, 104px); --wop-radius:       4px;
--wop-btn-radius:   3px; --wop-header-height: 88px; --wop-header-offset: var(--wop-header-height);  --wop-bg-alt:        #EDF2F7;
--wop-brand-deep:    #052646; --wop-btn-bg:        #09274B;
--wop-brand-light:   #5aa6f0;
--wop-brand-wash:    #eaf3fd;
--wop-green:         #2a88ea; --wop-heading:       #1A202C;
--wop-ink-soft:      #2D3748;
--wop-divider:       rgba(26, 32, 44, .08); --wop-text-xs:       clamp(13px, 0.80rem + 0.10vw, 14px);
--wop-text-sm:       clamp(14px, 0.85rem + 0.15vw, 15px);
--wop-text-base:     clamp(16px, 0.95rem + 0.20vw, 17px);
--wop-text-lg:       clamp(18px, 1.05rem + 0.30vw, 20px);
--wop-text-xl:       clamp(22px, 1.20rem + 0.60vw, 25px);
--wop-text-2xl:      clamp(26px, 1.40rem + 1.00vw, 31px);
--wop-text-4xl:      clamp(38px, 2.00rem + 2.40vw, 49px);
--wop-lh-tight:      1.08;
--wop-lh-normal:     1.35;
--wop-lh-relaxed:    1.65;
--wop-ls-display:    -0.02em;
--wop-ls-heading:    -0.01em;
--wop-ls-caps:       0.06em;
--wop-measure:       65ch; --wop-radius-sm:     3px;
--wop-radius-lg:     8px; --wop-radius-pill:   999px;
--wop-stack:         24px;
--wop-grid-gap:      clamp(20px, 3vw, 32px);
--wop-input-h:       48px;
--wop-tap-min:       48px;  --wop-aspect-product: 4 / 5;
--wop-img-filter:    saturate(1.04) contrast(1.02); --wop-doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zm0 0v6h6'  fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); --wop-shadow-sm:     0 1px 3px rgba(26, 32, 44, .08), 0 1px 2px rgba(26, 32, 44, .04);
--wop-shadow:        0 6px 16px rgba(26, 32, 44, .10);
--wop-shadow-lg:     0 12px 32px rgba(26, 32, 44, .10);
--wop-shadow-honey:  0 6px 16px rgba(42, 136, 234, .30); --wop-dur:           200ms;
--wop-transition:    200ms cubic-bezier(.22,.61,.36,1); --wop-ease:         cubic-bezier(.22,.61,.36,1);
} *, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--wop-bg);
color: var(--wop-text);
font-family: var(--wop-font);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--wop-font-heading); text-transform: uppercase;
font-weight: 600;
line-height: 1.15;
margin: 0 0 .5em;
text-wrap: balance;
} .wop-wysiwyg h2, .wop-wysiwyg h3, .wop-wysiwyg h4,
.wop-prose h2, .wop-prose h3, .wop-prose h4,
.entry-content h2, .entry-content h3, .entry-content h4 {
text-transform: none;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; } .wop-wrap {
width: 100%;
max-width: var(--wop-content-max);
margin-inline: auto;
padding-inline: var(--wop-gutter);
}
.wop-section { padding-block: var(--wop-section-y); } .wop-section + .wop-section { padding-top: 0; }
.wop-section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.wop-section__head--center { margin-inline: auto; text-align: center; }
.wop-eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--wop-accent-text);
margin-bottom: .75em;
}
.wop-lede { font-size: 1.1rem; color: var(--wop-text-muted); } .wop-btn {
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.6em;
border: 1px solid transparent;
border-radius: var(--wop-btn-radius);
background: var(--wop-btn-bg);
color: var(--wop-text-invert); text-transform: uppercase;
letter-spacing: var(--wop-ls-caps);
font-weight: 600;
font-size: .9rem;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background .25s var(--wop-ease);
}
.wop-btn:hover { background: var(--wop-brand); }
.wop-btn--ghost {
background: transparent;
color: var(--wop-text);
border-color: var(--wop-border-strong);
}
.wop-btn--ghost:hover { background: var(--wop-card-bg); } .wop-card {
background: var(--wop-card-bg);
border: 1px solid var(--wop-border);
border-radius: var(--wop-radius);
padding: clamp(20px, 2.5vw, 32px);
} .screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
} .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--wop-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }:root {
--wop-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.75 7.75 14.5 8.5'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wop-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--wop-bg);
border-bottom: 1px solid var(--wop-border);
}
.wop-header__inner {
display: flex;
align-items: center;
gap: 24px;
min-height: var(--wop-header-height);
}
.wop-header__logo { display: flex; align-items: center; flex: 0 0 auto; font-weight: 700; }
.wop-header__logo a { display: flex; align-items: center; text-decoration: none; color: inherit; } .wop-header__logo img { max-height: 52px; width: auto; height: auto; } .wop-nav { margin-left: auto; }
.wop-nav__list {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.wop-nav__list a {
text-decoration: none; white-space: nowrap;
font-size: .95rem;
font-weight: 500;
color: var(--wop-text);
transition: color .2s var(--wop-ease);
}
.wop-nav__list a:hover,
.wop-nav__list .current-menu-item > a { color: var(--wop-accent-text); }
.wop-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .wop-header__cta { white-space: nowrap; } .wop-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px; height: 44px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.wop-burger span {
display: block;
height: 2px;
width: 24px;
margin-inline: auto;
background: var(--wop-text);
transition: transform .25s var(--wop-ease), opacity .25s var(--wop-ease);
}
.wop-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wop-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.wop-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .wop-drawer {
position: fixed;
inset: var(--wop-header-offset) 0 0 auto;
width: min(360px, 86vw);
z-index: 99;
background: var(--wop-card-bg);
border-left: 1px solid var(--wop-border);
padding: 32px 28px;
overflow-y: auto;
transform: translateX(100%);
transition: transform .3s var(--wop-ease);
}
.wop-drawer.is-open { transform: translateX(0); }
.wop-drawer__list { list-style: none; margin: 0; padding: 0; text-align: right; }
.wop-drawer__list li { border-bottom: 1px solid var(--wop-border); }
.wop-drawer__list a { display: block; padding: 14px 0; text-decoration: none; font-size: 1.05rem; } .wop-drawer__list .menu-item-has-children > .wop-drawer__row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
.wop-drawer__list .menu-item-has-children > .wop-drawer__row a { flex: 1 1 auto; }
.wop-drawer__toggle {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px; padding: 0;
border: 0;
background: none;
color: var(--wop-brand);
cursor: pointer;
}
.wop-drawer__toggle svg { transition: transform .2s var(--wop-ease); }
.wop-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wop-drawer__list .sub-menu {
list-style: none;
margin: 0; padding: 0 16px 0 0; overflow: hidden;
max-height: 0;
transition: max-height .28s var(--wop-ease);
}
.wop-drawer__list .sub-menu > li { border-bottom: 0; }
.wop-drawer__list .menu-item-has-children.is-open > .sub-menu { max-height: 1200px; } .wop-drawer__list > .menu-item-has-children.is-open > .sub-menu { max-height: 6000px; } .wop-drawer__list .sub-menu .sub-menu a { font-size: .9rem; padding-block: 10px; }
.wop-drawer__list .sub-menu .sub-menu .wop-drawer__toggle { width: 40px; height: 40px; }
.wop-drawer__list .sub-menu a { font-size: .95rem; color: var(--wop-text-muted); } html:not(.wop-js) .wop-drawer__list .sub-menu { max-height: none; }
@media (prefers-reduced-motion: reduce) {
.wop-drawer__list .sub-menu,
.wop-drawer__toggle svg { transition: none; }
}
@media (max-width: 992px) {
.wop-nav,
.wop-header__cta { display: none; }
.wop-burger { display: flex; } .wop-header__actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
.wop-drawer, .wop-burger span { transition: none; }
} .wop-header__phone {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
font-size: 15px;
line-height: 1;
white-space: nowrap;
color: var(--wop-brand);
text-decoration: none;
padding: 8px 10px;
border-radius: var(--wop-radius);
transition: background-color .18s var(--wop-ease), color .18s var(--wop-ease);
}
.wop-header__phone:hover,
.wop-header__phone:focus-visible { background: var(--wop-border); color: var(--wop-brand-dark); }
.wop-header__phone-icon { flex: none; } .wop-drawer__phone {
display: block;
margin: 0 0 4px;
padding: 16px var(--wop-gutter);
font-size: 20px;
font-weight: 700;
text-align: center;
color: var(--wop-text-invert);
background: var(--wop-brand);
text-decoration: none;
}
.wop-drawer__phone:hover,
.wop-drawer__phone:focus-visible { background: var(--wop-brand-dark); }
@media (max-width: 992px) { .wop-header__phone { padding: 8px; }
}
@media (max-width: 420px) {
.wop-header__phone span { display: none; }
.wop-header__phone { padding: 10px; }
.wop-header__phone-icon { width: 20px; height: 20px; }
} .wop-nav__list li { position: relative; } .wop-nav__list .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: .6em;
height: .35em;
margin-left: .42em;
vertical-align: .175em; background: var(--wop-chevron-down) center / 100% 100% no-repeat;
transition: transform .18s var(--wop-ease);
}
@supports (mask-image: url()) or (-webkit-mask-image: url()) {
.wop-nav__list .menu-item-has-children > a::after {
background: currentColor;
-webkit-mask: var(--wop-chevron-down) center / 100% 100% no-repeat;
mask: var(--wop-chevron-down) center / 100% 100% no-repeat;
}
}
.wop-nav__list .menu-item-has-children:hover > a::after,
.wop-nav__list .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }
.wop-nav__list .sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 6px);
min-width: 260px;
margin: 0;
padding: 10px;
list-style: none;
background: var(--wop-card-bg);
border: 1px solid var(--wop-border);
border-radius: var(--wop-radius);
box-shadow: 0 18px 40px rgba(7, 55, 105, .13);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s var(--wop-ease), transform .18s var(--wop-ease);
z-index: 60;
} .wop-nav__list .menu-item-has-children::after {
content: "";
position: absolute;
inset: 100% 0 auto 0;
height: 10px;
}
.wop-nav__list li:hover > .sub-menu,
.wop-nav__list li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.wop-nav__list .sub-menu li { display: block; }
.wop-nav__list .sub-menu a {
display: block;
padding: 9px 12px;
border-radius: 6px;
font-size: .92rem;
white-space: nowrap;
transition: background-color .15s var(--wop-ease), color .15s var(--wop-ease);
}
.wop-nav__list .sub-menu a:hover,
.wop-nav__list .sub-menu a:focus-visible { background: var(--wop-bg); color: var(--wop-brand); }
@media (max-width: 992px) { .wop-nav__list .sub-menu { display: none; }
} .wop-search {
display: flex;
align-items: center;
min-width: 0;
border: 1px solid var(--wop-border);
border-radius: var(--wop-radius-pill);
background: var(--wop-card-bg);
transition: border-color .18s var(--wop-ease), box-shadow .18s var(--wop-ease);
}
.wop-search:focus-within {
border-color: var(--wop-accent);
box-shadow: 0 0 0 3px rgba(42, 136, 234, .18);
}
.wop-search__input {
flex: 1 1 auto;
min-width: 0;
width: 148px;
padding: 9px 4px 9px 14px;
border: 0;
background: transparent;
font: inherit;
font-size: .9rem;
color: var(--wop-text);
}
.wop-search__input:focus { outline: none; }
.wop-search__input::placeholder { color: var(--wop-text-muted); } .wop-search__input::-webkit-search-decoration,
.wop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wop-search__submit {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin: 0 2px 0 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wop-brand);
cursor: pointer;
}
.wop-search__submit:hover { background: var(--wop-bg); } .wop-header__search { position: relative; display: flex; align-items: center; } .wop-search-toggle {
display: none;
flex: none;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--wop-brand);
cursor: pointer;
}
.wop-search-toggle:hover { background: var(--wop-bg); }
.wop-js .wop-search-toggle { display: grid; }
.wop-js .wop-header__search .wop-search {
position: absolute;
right: 0;
top: 50%;
z-index: 20;
width: 300px;
max-width: calc(100vw - 2 * var(--wop-gutter));
transform: translateY(-50%) translateX(6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
box-shadow: var(--wop-shadow-lg);
transition: opacity .18s var(--wop-ease),
transform .18s var(--wop-ease),
visibility .18s var(--wop-ease);
} .wop-js .wop-header__search .wop-search__input { width: auto; }
.wop-js .wop-header__search.is-open .wop-search {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion: reduce) {
.wop-js .wop-header__search .wop-search { transition: none; }
} .wop-drawer__search { padding: 12px var(--wop-gutter) 4px; }
.wop-drawer__search .wop-search { width: 100%; }
.wop-drawer__search .wop-search__input { width: auto; height: 44px; }
@media (max-width: 992px) { .wop-header__actions .wop-header__search { display: none; }
} .wop-header__cart {
position: relative;
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px; border-radius: 50%;
color: var(--wop-brand);
text-decoration: none;
transition: background-color .18s var(--wop-ease);
}
.wop-header__cart:hover,
.wop-header__cart:focus-visible { background: var(--wop-border); }
.wop-cart-count {
position: absolute;
top: 2px;
right: 0;
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--wop-radius-pill);
background: var(--wop-accent-text);
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
} .wop-cart-count[data-count="0"] { background: var(--wop-text-muted); } .wop-header__sub { display: none; }
@media (max-width: 992px) {
:root { --wop-header-offset: calc(var(--wop-header-height) + 60px); }
.wop-header__sub {
display: block;
border-top: 1px solid var(--wop-border);
}
.wop-header__sub-inner {
display: flex;
align-items: center;
gap: 10px;
padding-block: 8px;
}
.wop-header__sub-search { flex: 1 1 auto; min-width: 0; }
.wop-header__sub-search .wop-search { width: 100%; }
.wop-header__sub-search .wop-search__input { width: auto; height: 40px; font-size: 16px; } :root { --wop-header-height: 72px; }
} .wop-shop-btn { white-space: nowrap; padding: .75em 1.2em; }
.wop-header__sub-shop { flex: none; height: 42px; }
@media (max-width: 992px) {
.wop-header__shop { display: none; }
} @media (min-width: 993px) and (max-width: 1199px) {
.wop-header__inner { gap: 16px; }
.wop-nav__list { gap: 14px; }
.wop-header__actions { gap: 6px; }
.wop-header__phone { padding: 8px 6px; }
.wop-header__cta,
.wop-shop-btn { padding-inline: .9em; }
} @media (min-width: 993px) {
.wop-header__inner { position: relative; }
.wop-nav__list > li.wop-mega { position: static; } .wop-nav__list > li.wop-mega::after { content: none; }
.wop-nav__list > li.wop-mega > .sub-menu {
left: 0;
right: 0;
top: 100%;
transform: translateY(6px);
min-width: 0;
max-height: calc(100vh - var(--wop-header-offset) - 24px);
overflow-y: auto;
padding: 24px 28px; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
column-gap: 28px;
align-items: start;
overflow-x: hidden;
overscroll-behavior: contain;
}
.wop-nav__list > li.wop-mega:hover > .sub-menu,
.wop-nav__list > li.wop-mega:focus-within > .sub-menu { transform: translateY(0); } .wop-nav__list > li.wop-mega > a {
display: inline-block;
padding-block: calc(var(--wop-header-height) / 2);
margin-block: calc(var(--wop-header-height) / -2);
} .wop-mega > .sub-menu > li { break-inside: avoid; padding-bottom: 14px; }
.wop-mega > .sub-menu > li > a { font-weight: 600; color: var(--wop-text); white-space: normal; } .wop-nav__list .wop-mega .sub-menu .sub-menu {
position: static;
transform: none;
min-width: 0;
margin: 2px 0 0;
padding: 0 0 0 10px;
border: 0;
border-left: 1px solid var(--wop-border);
border-radius: 0;
box-shadow: none;
background: none;
opacity: 1;
visibility: inherit;
pointer-events: inherit;
transition: none;
}
.wop-mega .sub-menu .sub-menu a { padding: 5px 10px; font-size: .88rem; color: var(--wop-text-muted); white-space: normal; }
.wop-mega .sub-menu .sub-menu .sub-menu a { font-size: .84rem; }
.wop-mega .sub-menu .sub-menu a:hover,
.wop-mega .sub-menu .sub-menu a:focus-visible { color: var(--wop-brand); } .wop-mega .sub-menu .menu-item-has-children > a::after { content: none; }
}.wop-prefooter {
background: var(--wop-brand);
color: var(--wop-text-invert);
padding-block: clamp(36px, 5vw, 64px);
}
.wop-prefooter__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.wop-prefooter h2 { margin: 0 0 .25em; }
.wop-prefooter p { margin: 0; opacity: .85; }
.wop-prefooter .wop-btn { background: var(--wop-accent-text); color: #fff; } .wop-footer {
background: var(--wop-bg);
color: var(--wop-ink-soft);
border-top: 1px solid var(--wop-border);
padding-block: clamp(40px, 5vw, 72px) 0;
}
.wop-footer a { color: inherit; text-decoration: none; }
.wop-footer a:hover { color: var(--wop-accent-text); }
.wop-footer__inner {
display: grid;
gap: 40px;
grid-template-columns: 1.4fr 1fr 1fr;
padding-bottom: 40px;
}
.wop-footer__brand img { max-height: 56px; width: auto; }
.wop-footer__name { font-size: 1.2rem; font-weight: 700; }
.wop-footer__tagline { margin-top: 14px; color: var(--wop-text-muted); max-width: 34ch; }
.wop-footer__menus { display: contents; }
.wop-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wop-footer__contact { display: grid; gap: 8px; align-content: start; }
.wop-footer__contact address { font-style: normal; color: var(--wop-text-muted); }
.wop-social { display: flex; gap: 12px; margin-top: 8px; }
.wop-social__link {
display: grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--wop-border-strong);
transition: background .2s var(--wop-ease), border-color .2s var(--wop-ease);
}
.wop-social__link:hover { background: var(--wop-accent-text); color: #fff; border-color: transparent; }
.wop-footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-block: 20px;
border-top: 1px solid var(--wop-border);
font-size: .85rem;
color: var(--wop-text-muted);
}
.wop-footer__legal p { margin: 0; }
.wop-footer__legal-list { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 860px) {
.wop-footer__inner { grid-template-columns: 1fr 1fr; }
.wop-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.wop-footer__inner { grid-template-columns: 1fr; }
}.wop-js .wop-fade-up,
.wop-js .wop-fade-up-item {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--wop-ease), transform .7s var(--wop-ease);
will-change: opacity, transform;
}
.wop-js .wop-fade-up.is-visible,
.wop-js .wop-fade-up-item.is-visible {
opacity: 1;
transform: none;
} .wop-fade-up-stagger .wop-fade-up-item:nth-child(1) { transition-delay: 0ms; }
.wop-fade-up-stagger .wop-fade-up-item:nth-child(2) { transition-delay: 90ms; }
.wop-fade-up-stagger .wop-fade-up-item:nth-child(3) { transition-delay: 180ms; }
.wop-fade-up-stagger .wop-fade-up-item:nth-child(4) { transition-delay: 270ms; }
.wop-fade-up-stagger .wop-fade-up-item:nth-child(5) { transition-delay: 360ms; }
.wop-fade-up-stagger .wop-fade-up-item:nth-child(6) { transition-delay: 450ms; } .block-editor-block-list__layout .wop-fade-up,
.block-editor-block-list__layout .wop-fade-up-item {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.wop-fade-up,
.wop-fade-up-item {
opacity: 1;
transform: none;
transition: none;
}
}.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
content: none !important;
display: none !important;
} ul.products {
display: grid;
grid-template-columns: repeat(var(--wop-cols, 4), minmax(0, 1fr));
gap: var(--wop-grid-gap);
margin: 0;
padding: 0;
list-style: none;
}
ul.products.columns-3 { --wop-cols: 3; }
ul.products.columns-4 { --wop-cols: 4; } @media (max-width: 1024px) {
ul.products,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 { --wop-cols: 3; }
}
@media (max-width: 780px) {
ul.products,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 { --wop-cols: 2; }
}
@media (max-width: 420px) {
ul.products,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 { --wop-cols: 1; }
}
ul.products li.product {
position: relative;
display: flex;
flex-direction: column;
width: auto; margin: 0; padding: 18px;
float: none;
background: var(--wop-card-bg);
border: 1px solid var(--wop-border);
border-radius: var(--wop-radius-lg);
box-shadow: var(--wop-shadow-sm);
transition: transform var(--wop-dur) var(--wop-ease),
box-shadow var(--wop-dur) var(--wop-ease);
}
ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--wop-shadow-lg);
} ul.products li.product a img {
width: 100%;
height: auto;
margin: 0 0 16px;
aspect-ratio: var(--wop-aspect-product);
object-fit: cover; border-radius: var(--wop-radius);
filter: var(--wop-img-filter);
} ul.products li.product:not(.product-category) a img {
aspect-ratio: 1 / 1;
object-fit: contain;
} ul.products li.product .woocommerce-loop-product__title {
margin: 0 0 10px;
padding: 0;
color: var(--wop-heading);
font-size: var(--wop-text-lg);
font-weight: 600;
line-height: var(--wop-lh-normal); display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} ul.products li.product .wop-loop__cat {
display: block;
margin-bottom: 8px;
color: var(--wop-text-muted);
font-size: var(--wop-text-xs);
font-weight: 600;
letter-spacing: var(--wop-ls-caps);
text-transform: uppercase;
} ul.products li.product .price {
display: block;
margin: 0;
color: var(--wop-heading);
font-size: var(--wop-text-xl);
font-weight: 700;
line-height: 1.2; margin-bottom: 14px;
}
ul.products li.product .price del {
margin-right: 6px;
color: var(--wop-text-muted);
font-size: var(--wop-text-base);
font-weight: 400;
}
ul.products li.product .price ins {
text-decoration: none;
background: transparent;
} ul.products li.product .price .woocommerce-Price-amount { white-space: nowrap; } ul.products li.product .button,
ul.products li.product .added_to_cart {
margin-top: auto; display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--wop-tap-min);
padding: 12px 20px;
border: 1px solid transparent;
border-radius: var(--wop-btn-radius); background: var(--wop-btn-bg);
color: var(--wop-text-invert);
font-family: inherit;
font-size: var(--wop-text-sm);
font-weight: 600;
letter-spacing: var(--wop-ls-caps);
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: background var(--wop-dur) var(--wop-ease),
box-shadow var(--wop-dur) var(--wop-ease);
}
ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover {
background: var(--wop-brand);
color: var(--wop-text-invert);
box-shadow: none;
}
ul.products li.product .button.loading { opacity: .7; }
ul.products li.product .added_to_cart {
margin-top: 8px;
background: transparent;
border-color: var(--wop-brand-dark);
color: var(--wop-heading);
}
ul.products li.product .added_to_cart:hover {
background: var(--wop-brand-dark);
color: var(--wop-text-invert);
box-shadow: none;
} ul.products li.product .wop-loop__variants,
ul.products li.product small.woocommerce-loop-product__variants {
margin-top: 8px;
color: var(--wop-text-muted);
font-size: var(--wop-text-xs);
line-height: 1.4;
} ul.products li.product .onsale {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
min-height: 0;
min-width: 0;
margin: 0;
padding: 5px 12px;
border-radius: var(--wop-radius-pill);
background: var(--wop-brand-dark);
color: var(--wop-text-invert);
font-size: var(--wop-text-xs);
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: var(--wop-ls-caps);
} ul.products li.product .star-rating {
margin: 0 0 8px;
color: var(--wop-brand-deep);
font-size: 14px;
} .woocommerce ul.products {
display: grid;
grid-template-columns: repeat(var(--wop-cols, 4), minmax(0, 1fr));
gap: var(--wop-grid-gap);
margin: 0;
padding: 0;
}
.woocommerce ul.products li.product {
width: auto;
margin: 0;
padding: 18px;
float: none;
display: flex;
flex-direction: column;
background: var(--wop-card-bg);
border: 1px solid var(--wop-border);
border-radius: var(--wop-radius-lg);
box-shadow: var(--wop-shadow-sm);
}
.woocommerce ul.products li.product a img {
margin: 0 0 16px;
aspect-ratio: var(--wop-aspect-product);
object-fit: cover;
border-radius: var(--wop-radius);
}
.woocommerce ul.products li.product:not(.product-category) a img {
aspect-ratio: 1 / 1;
object-fit: contain;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 0;
margin: 0 0 10px;
font-size: var(--wop-text-lg);
font-weight: 600;
}
.woocommerce ul.products li.product .price {
color: var(--wop-heading);
font-size: var(--wop-text-xl);
font-weight: 700;
margin-bottom: 14px;
} .woocommerce ul.products li.product .button {
margin-top: auto;
padding: 12px 20px;
border-radius: var(--wop-btn-radius);
background: var(--wop-btn-bg);
color: var(--wop-text-invert);
font-size: var(--wop-text-sm);
font-weight: 600;
letter-spacing: var(--wop-ls-caps);
text-transform: uppercase;
} .woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) {
width: auto;
float: none;
clear: none;
margin: 0;
}.wpcf7 form .wpcf7-response-output {
margin: 16px 0 0;
padding: 14px 16px;
border: 1px solid var(--wop-border-strong);
border-left-width: 4px;
border-radius: var(--wop-radius);
background: var(--wop-card-bg);
color: var(--wop-text);
font-size: .95rem;
line-height: 1.5;
}
.wpcf7 form .wpcf7-response-output:focus { outline: none; } .wpcf7 form.wop-sent > :not(.wpcf7-response-output) { display: none; }
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.wop-sent .wpcf7-response-output {
margin-top: 0;
padding: 18px 20px;
border-color: #2f7d4a;
background: #eef7f1;
color: #1d4d2e;
font-weight: 600;
} .wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #b7791f;
background: #fff8eb;
color: #5c3d0e;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
border-color: #b42318;
background: #fef3f2;
color: #7a1a13;
}