/* =========================================================================
DDP Pound House — WooCommerce overrides
Shop, product, cart, checkout, my-account all in DDP dark/graffiti style.
========================================================================= */
/* ---------- SHOP WRAPPER ---------- */
.ddp-shop {
background:
radial-gradient(900px 500px at 80% 10%,rgba(30,115,190,.14),transparent 60%),
radial-gradient(900px 500px at 20% 90%,rgba(221,51,51,.14),transparent 60%),
linear-gradient(180deg,var(--ink) 0%,#000 100%);
padding:60px 20px 100px;
min-height:60vh;
}
.ddp-shop__inner { max-width:1400px; margin:0 auto; }
/* ---------- ARCHIVE HEADER ---------- */
.ddp-shop-head { text-align:center; margin:0 0 50px; }
.ddp-shop-head__kicker {
font-family:var(--head); text-transform:uppercase; letter-spacing:.5em;
font-size:.78rem; color:var(--muted); margin:0 0 14px; font-weight:600;
}
.ddp-shop-head__kicker::before,
.ddp-shop-head__kicker::after {
content:""; display:inline-block; width:28px; height:2px; background:currentColor;
vertical-align:middle; margin:0 12px; opacity:.6;
}
.ddp-shop-head__title {
font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
font-size:clamp(2.6rem,7vw,4.6rem); line-height:.95; margin:0 0 18px;
text-shadow:0 8px 30px rgba(0,0,0,.55);
}
.ddp-shop-head__title::after {
content:""; display:block; margin:18px auto 0; width:140px; height:4px; border-radius:3px;
background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%);
}
.ddp-shop-head__desc { max-width:680px; margin:20px auto 0; color:#d7ddee; line-height:1.7; font-size:1.02rem; }
/* ---------- BREADCRUMB ---------- */
.ddp-breadcrumb {
max-width:1400px; margin:0 auto 30px;
color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.12em;
font-family:var(--head);
}
.ddp-breadcrumb a { color:var(--muted); }
.ddp-breadcrumb a:hover { color:#fff; }
.ddp-breadcrumb__sep { opacity:.45; margin:0 2px; }
/* ---------- SHOP LAYOUT ---------- */
.woocommerce-page .ddp-shop__inner { display:block; }
.ddp-shop__split {
display:grid;
grid-template-columns:1fr 280px;
gap:36px;
align-items:start;
margin-top:30px;
}
.ddp-shop__main { min-width:0; }
/* ---------- FILTER SIDEBAR ---------- */
.ddp-shop__sidebar {
position:sticky; top:96px;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px;
min-width:0;
}
.ddp-filter__heading-wrap {
margin:0 0 18px; padding-bottom:14px;
border-bottom:2px solid var(--red);
display:flex; justify-content:space-between; align-items:center; gap:10px;
flex-wrap:wrap;
}
.ddp-filter__heading {
font-family:var(--display); text-transform:uppercase;
font-size:1.2rem; margin:0; color:#fff; letter-spacing:.02em;
}
.ddp-filter__clear {
display:inline-block;
padding:6px 11px; border-radius:999px;
background:rgba(221,51,51,.14); border:1px solid rgba(221,51,51,.35);
color:var(--red) !important;
font-family:var(--head); text-transform:uppercase; letter-spacing:.08em;
font-size:.66rem; font-weight:700;
transition:background .2s ease, color .2s ease;
}
.ddp-filter__clear:hover { background:var(--red); color:#fff !important; }
.ddp-filter { margin:0 0 20px; }
.ddp-filter:last-child { margin-bottom:0; }
.ddp-filter__label {
font-family:var(--head); text-transform:uppercase; letter-spacing:.14em;
font-size:.78rem; color:var(--muted); font-weight:700;
margin:0 0 10px; padding-bottom:6px;
border-bottom:1px solid var(--line);
}
.ddp-filter__list { list-style:none; padding:0; margin:0; }
.ddp-filter__item { margin:0 0 2px; }
.ddp-filter__item a {
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:8px 12px; border-radius:var(--radius-sm);
color:#d7ddee;
font-size:.92rem; line-height:1.3;
transition:background .2s ease, color .2s ease, transform .15s ease;
}
.ddp-filter__item a:hover {
background:rgba(255,255,255,.05); color:#fff;
transform:translateX(2px);
}
.ddp-filter__item.is-active a {
background:linear-gradient(135deg,var(--red),var(--red-2));
color:#fff !important;
box-shadow:0 4px 14px rgba(221,51,51,.3);
}
.ddp-filter__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ddp-filter__count {
flex:0 0 auto;
font-family:var(--head); font-size:.72rem; font-weight:700;
color:var(--muted); padding:2px 8px; border-radius:999px;
background:rgba(255,255,255,.05);
}
.ddp-filter__item.is-active .ddp-filter__count {
background:rgba(255,255,255,.2); color:#fff;
}
/* ---------- BREADCRUMB DE-DUPE ---------- */
.ddp-breadcrumb ~ .ddp-breadcrumb,
.rank-math-breadcrumb ~ .rank-math-breadcrumb,
.rank-math-breadcrumb ~ nav.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb ~ .rank-math-breadcrumb,
nav.woocommerce-breadcrumb ~ nav.woocommerce-breadcrumb { display:none !important; }
/* ---------- SHOP HEADER (archive title) ---------- */
.ddp-shop-head {
padding:30px 0 10px;
margin:0 0 10px;
border-bottom:2px solid var(--red);
}
.ddp-shop-head__kicker {
font-family:var(--head); text-transform:uppercase; letter-spacing:.2em;
font-size:.78rem; color:var(--red); margin:0 0 6px; font-weight:700;
}
.ddp-shop-head__title {
font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em;
font-size:clamp(2.2rem,5vw,3.6rem); line-height:.95; margin:0; color:#fff;
}
/* Term description */
.ddp-shop-head .term-description,
.woocommerce .term-description,
.ddp-shop .term-description {
margin: 18px 0 4px;
color: #d7ddee;
font-size: 1rem;
line-height: 1.2;
}
.ddp-shop-head .term-description p,
.woocommerce .term-description p { margin:0 0 12px; }
.ddp-shop-head .term-description p:last-child,
.woocommerce .term-description p:last-child { margin-bottom:0; }
.ddp-shop-head .term-description a,
.woocommerce .term-description a { color:var(--red); text-decoration:underline; }
.ddp-shop-head .term-description a:hover { color:#fff; }
/* ---------- SHOP NOTICES / RESULTS ---------- */
/* Hide the empty container Woo always prints at the top of shop/cart/checkout */
.ddp-shop .woocommerce-notices-wrapper:empty,
.ddp-shop .woocommerce-notices-wrapper:not(:has(> *)) { display: none !important; }
.ddp-shop .woocommerce-notices-wrapper,
.ddp-shop .woocommerce-message,
.ddp-shop .woocommerce-error,
.ddp-shop .woocommerce-info {
background: rgba(30,115,190,.10) !important;
border-color: rgba(30,115,190,.35) !important;
color: var(--surface-text) !important;
}
.ddp-shop .woocommerce-error { background: rgba(221,51,51,.10) !important; border-color: rgba(221,51,51,.45)
!important; }
.ddp-shop .woocommerce-message a,
.ddp-shop .woocommerce-info a,
.ddp-shop .woocommerce-error a { color: var(--red-2); }
/* ---------- PRODUCT GRID (4 / 3 / 2) ---------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
display:grid !important;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
content:none !important;
display:none !important;
}
.woocommerce ul.products li.product { width:auto !important; margin:0 !important; padding:0 !important; float:none
!important; clear:none !important; }
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last { clear:none !important; }
.woocommerce ul.products li.product {
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
display:flex; flex-direction:column;
position:relative;
}
.woocommerce ul.products li.product:hover {
transform:translateY(-6px);
border-color:rgba(221,51,51,.4);
box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
display:flex; flex-direction:column; flex:1; color:inherit;
}
.woocommerce ul.products li.product .wp-post-image,
.woocommerce ul.products li.product img {
width:100%; height:auto; aspect-ratio:1/1; object-fit:contain;
margin:0 !important;
background:transparent !important;
background-color:transparent !important;
padding:10px;
transition:transform .4s ease;
}
.woocommerce ul.products li.product:hover img { transform:scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
font-family:var(--head); text-transform:uppercase; letter-spacing:.06em;
font-size:.92rem; font-weight:700; line-height:1.3;
margin:14px 16px 6px !important; padding:0 !important; color:#fff !important;
}
.woocommerce ul.products li.product .price {
margin:0 16px 8px; color:var(--red) !important;
font-family:var(--head); font-weight:700; font-size:1rem; letter-spacing:.04em;
}
.woocommerce ul.products li.product .price ins { background:transparent !important; color:#fff !important;
text-decoration:none !important; }
.woocommerce ul.products li.product .price del { color:var(--muted) !important; font-size:.8em; margin-right:6px; }
/* Heritage / Originals pill */
.ddp-pill {
display:inline-block; margin:14px 18px 0; padding:4px 10px; border-radius:999px;
font-family:var(--head); text-transform:uppercase; letter-spacing:.14em;
font-size:.64rem; font-weight:700;
}
.ddp-pill.is-heritage { background:rgba(30,115,190,.2); color:#9dc9f0; border:1px solid rgba(30,115,190,.5); }
.ddp-pill.is-originals { background:rgba(221,51,51,.18); color:#f4a8a8; border:1px solid rgba(221,51,51,.5); }
/* Add-to-cart button on loop */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
margin:0 18px 18px !important;
padding:11px 20px !important;
background:linear-gradient(135deg,var(--red),var(--red-2)) !important;
color:#fff !important;
border-radius:var(--radius-pill) !important;
font-family:var(--head) !important; text-transform:uppercase; letter-spacing:.14em;
font-size:.78rem; font-weight:700;
box-shadow:0 8px 20px rgba(221,51,51,.35);
transition:transform .2s ease, box-shadow .2s ease;
border:0 !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(221,51,51,.55);
background:linear-gradient(135deg,var(--red-2),var(--red-3)) !important;
color:#fff !important;
}
.woocommerce ul.products li.product .button.added::after { content:"✓"; margin-left:6px; }
.woocommerce ul.products li.product .onsale {
position:absolute; top:12px; left:12px; z-index:2;
background:var(--red) !important; color:#fff !important;
font-family:var(--head); letter-spacing:.14em; font-size:.7rem; font-weight:700;
padding:5px 12px !important; min-height:0 !important; min-width:0 !important;
border-radius:999px !important; border:0 !important;
}
/* ---------- PAGINATION ---------- */
.woocommerce nav.woocommerce-pagination { margin:40px 0 0; text-align:center; border:0; }
.woocommerce nav.woocommerce-pagination ul { border:0 !important; display:inline-flex; gap:6px; }
.woocommerce nav.woocommerce-pagination ul li { border:0 !important; margin:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background:rgba(255,255,255,.05) !important; color:#000 !important;
border-radius:var(--radius-sm); padding:10px 16px;
font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem;
transition:background .2s ease, color .2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background:var(--red) !important; color:#fff !important;
}
/* ---------- SINGLE PRODUCT ---------- */
.woocommerce div.product {
display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:start;
}
.woocommerce div.product .woocommerce-product-gallery {
float:none !important; width:auto !important;
background:transparent !important;
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
position:relative;
overflow:hidden;
isolation:auto;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
margin:0 !important;
background:transparent !important;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image--placeholder a {
background:transparent !important;
display:block;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport img,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper >
.woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
width:100% !important;
height:auto !important;
aspect-ratio:1/1 !important;
object-fit:contain !important;
border-radius:var(--radius-sm);
background:transparent !important;
background-color:transparent !important;
display:block !important;
margin:0 auto !important;
padding:16px !important;
mix-blend-mode:multiply !important;
}
.woocommerce div.product .woocommerce-product-gallery .zoomImg {
mix-blend-mode:multiply !important;
background:transparent !important;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
top:14px; right:14px; background:rgba(0,0,0,.75); color:#fff;
width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%;
text-indent:0; font-size:0;
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport img,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
padding: 0 !important;
mix-blend-mode: multiply !important;
background: transparent !important;
/* push near-white pixels to pure white so multiply fully dissolves the canvas */
filter: brightness(1.03) contrast(1.03) saturate(1.02);
}
/* Pistons red+blue gradient border overlaying the active main product image.
Scoped to the flex-viewport (left gallery column) so it can't touch the
summary column (Add to Cart, price, etc.). pointer-events:none preserves
zoom/click behavior. */
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
position: relative;
border-radius: var(--radius-sm);
}
.woocommerce div.product .woocommerce-product-gallery .flex-viewport::after {
content: "";
position: absolute;
inset: 0px;
border-radius: inherit;
padding: 30px;
background: linear-gradient(135deg,
#C8102E 0%,
#C8102E 42%,
#ffffff 50%,
#1D42BA 58%,
#1D42BA 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 3;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
content:"⤢"; font-size:1.1rem; line-height:36px;
}
/* FlexSlider thumbnail strip */
.woocommerce div.product .flex-control-nav.flex-control-thumbs {
display:flex !important;
gap:8px;
margin:14px 0 0 !important;
padding:10px !important;
list-style:none;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
background:transparent !important;
border:1px solid var(--line);
border-radius:var(--radius);
}
.woocommerce div.product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar { height:6px; }
.woocommerce div.product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track {
background:rgba(255,255,255,.08); border-radius:3px; }
.woocommerce div.product .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb { background:var(--red);
border-radius:3px; }
.woocommerce div.product .flex-control-nav.flex-control-thumbs li {
flex:0 0 calc(20% - 7px);
width:auto !important; margin:0 !important;
min-width:90px;
}
.woocommerce div.product .flex-control-nav.flex-control-thumbs li img {
border:2px solid transparent;
border-radius:var(--radius-sm);
opacity:.85;
cursor:pointer;
transition:opacity .2s ease, border-color .2s ease, transform .2s ease;
background:transparent !important;
background-color:transparent !important;
mix-blend-mode:multiply !important;
filter:none !important;
aspect-ratio:1/1; object-fit:contain; width:100% !important;
padding:6px;
}
.woocommerce div.product .flex-control-nav.flex-control-thumbs li img {
border: 2px solid transparent;
opacity: 1; /* was .85 — kill the dim on inactive thumbs */
mix-blend-mode: multiply !important;
padding: 0; /* was 6px */
background: transparent !important;
filter: brightness(1.03) contrast(1.03) saturate(1.02);
transition: border-color .15s ease, transform .15s ease;
}
.woocommerce div.product .flex-control-nav.flex-control-thumbs li img:hover {
border-color: var(--surface-text);
transform: translateY(-1px);
}
.woocommerce div.product .flex-control-nav.flex-control-thumbs li img.flex-active {
opacity: 1;
border-color: var(--red);
}
/* Flex slider prev/next arrows */
.woocommerce div.product .flex-direction-nav { list-style:none; padding:0; margin:0; }
.woocommerce div.product .flex-direction-nav a {
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:50%;
background:rgba(0,0,0,.7) !important; color:#fff !important;
display:grid !important; place-items:center;
opacity:0; transition:opacity .2s ease;
z-index:3; text-indent:0 !important; font-size:0;
}
.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity:1; }
.woocommerce div.product .flex-direction-nav .flex-prev { left:14px; }
.woocommerce div.product .flex-direction-nav .flex-next { right:14px; }
.woocommerce div.product .flex-direction-nav .flex-prev::before { content:"‹"; font-size:1.6rem; line-height:1; }
.woocommerce div.product .flex-direction-nav .flex-next::before { content:"›"; font-size:1.6rem; line-height:1; }
.woocommerce div.product .summary { float:none !important; width:auto !important; }
.woocommerce div.product .summary .product_title {
font-family:var(--display); text-transform:uppercase; letter-spacing:-.005em;
font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1; margin:0 0 14px;
}
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price {
color:var(--red) !important;
font-family:var(--head); font-weight:700; font-size:1.6rem; letter-spacing:.04em;
margin:0 0 18px;
}
.woocommerce div.product .summary .woocommerce-product-details__short-description {
color:#d7ddee; line-height:1.7; margin:0 0 24px;
}
.woocommerce div.product form.cart {
margin:0 0 30px; padding:20px 0 0; border-top:1px solid var(--line);
}
.woocommerce div.product form.cart .quantity {
display:inline-flex; align-items:center; margin-right:12px;
}
.woocommerce div.product form.cart .quantity .qty {
width:70px; padding:14px 10px; text-align:center;
background:rgba(255,255,255,.04); border:1px solid var(--line); color:#fff;
border-radius:var(--radius-sm); font:inherit; font-weight:700;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
background:linear-gradient(135deg,var(--red),var(--red-2)) !important;
color:#fff !important;
padding:16px 30px !important; border-radius:var(--radius-pill) !important;
font-family:var(--head) !important; text-transform:uppercase; letter-spacing:.18em;
font-size:.9rem; font-weight:700;
border:0 !important;
box-shadow:0 10px 26px rgba(221,51,51,.4);
transition:transform .2s ease, box-shadow .2s ease;
margin-right: 15px;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
transform:translateY(-2px); box-shadow:0 18px 40px rgba(221,51,51,.6);
color:#fff !important;
}
.woocommerce div.product .product_meta {
padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em;
}
.woocommerce div.product .product_meta a { color:var(--red); }
/* Donation note */
.ddp-donate-note {
display:flex; align-items:center; gap:10px;
margin:16px 0 0;
padding:12px 10px;
background: linear-gradient(90deg,rgba(221,51,51,.82),rgba(30,115,190,.82));
border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm);
font-size:.88rem; color:#e6e9f2;
}
.ddp-donate-note svg { width:18px; height:18px; color:#fff; flex:0 0 auto; }
.ddp-donate-note b { color:#fff; }
/* Variations */
.woocommerce div.product form.cart .variations { background:rgba(255,255,255,.02); border:1px solid var(--line);
border-radius:var(--radius-sm); padding:16px; margin:0 0 16px; }
.woocommerce div.product form.cart .variations label { color:#fff; font-family:var(--head);
text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; }
.woocommerce div.product form.cart .variations select {
width:100%; padding:11px 14px; background:rgba(255,255,255,.04); border:1px solid var(--line);
color:#fff; border-radius:var(--radius-sm); font:inherit;
}
.woocommerce div.product form.cart .reset_variations { color:var(--red); font-size:.85rem; }
/* --- Plugin variation swatches (native WVS / YITH / Iconic) --- */
.woocommerce div.product form.cart .variations td.value ul.variable-items-wrapper,
.woocommerce div.product form.cart .variations .value ul.variable-items-wrapper,
.woocommerce div.product .variable-items-wrapper,
.woocommerce .variable-items-wrapper,
ul.variable-items-wrapper,
ul.wvs-style-squared,
ul.wvs-style-rounded,
ul.wvs-style-circle {
display:flex !important; flex-wrap:wrap !important; gap:8px !important;
list-style:none !important; padding:0 !important; margin:8px 0 0 !important;
background:transparent !important;
}
.woocommerce .variable-items-wrapper li.variable-item,
.woocommerce ul.variable-items-wrapper li,
.variable-items-wrapper li.variable-item,
.variable-items-wrapper li,
ul.variable-items-wrapper > li,
ul.variable-items-wrapper > li.button-variable-item,
ul.variable-items-wrapper > li.radio-variable-item,
ul.variable-items-wrapper > li.label-variable-item {
min-width:54px !important; min-height:44px !important;
padding:10px 16px !important;
background:rgba(255,255,255,.06) !important;
background-color:rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.22) !important;
border-radius:var(--radius-sm) !important;
color:#fff !important;
font-family:var(--head) !important; text-transform:uppercase !important;
letter-spacing:.08em !important;
font-size:.8rem !important; font-weight:700 !important; line-height:1 !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
cursor:pointer !important;
box-shadow:none !important; text-shadow:none !important;
transition:all .2s ease !important;
opacity:1 !important; visibility:visible !important;
width:auto !important; height:auto !important;
}
.variable-items-wrapper li .variable-item-contents,
.variable-items-wrapper li .variable-item-span,
.variable-items-wrapper li .variable-item-span-text,
.variable-items-wrapper li span,
ul.variable-items-wrapper li > * {
background:transparent !important;
background-color:transparent !important;
color:#fff !important;
font:inherit !important;
padding:0 !important; margin:0 !important;
box-shadow:none !important; text-shadow:none !important;
border:0 !important;
width:auto !important; height:auto !important;
min-width:0 !important; min-height:0 !important;
display:inline-block !important;
}
.variable-items-wrapper li.variable-item:hover,
.variable-items-wrapper li:hover {
border-color:var(--red) !important;
background:rgba(221,51,51,.18) !important;
background-color:rgba(221,51,51,.18) !important;
transform:translateY(-1px);
}
.variable-items-wrapper li.selected,
.variable-items-wrapper li.variable-item.selected,
.variable-items-wrapper li.selected-variable-item,
.variable-items-wrapper li[class*="selected"] {
background:var(--red) !important;
background-color:var(--red) !important;
border-color:var(--red) !important;
color:#fff !important;
box-shadow:0 4px 14px rgba(221,51,51,.4) !important;
}
.variable-items-wrapper li.selected .variable-item-contents,
.variable-items-wrapper li.selected .variable-item-span,
.variable-items-wrapper li.selected span { color:#fff !important; }
.variable-items-wrapper li.disabled,
.variable-items-wrapper li.out-of-stock,
.variable-items-wrapper li[data-wvstooltip*="out"] {
opacity:.35 !important;
pointer-events:none !important;
text-decoration:line-through !important;
}
.variable-items-wrapper li.color-variable-item {
padding:0 !important;
min-width:38px !important; min-height:38px !important;
border-radius:50% !important;
overflow:visible !important;
}
.variable-items-wrapper li.color-variable-item .variable-item-contents {
width:100% !important; height:100% !important;
border-radius:50% !important;
display:block !important;
}
.variable-items-wrapper li.image-variable-item {
padding:4px !important;
min-width:60px !important; min-height:60px !important;
}
.variable-items-wrapper li.image-variable-item img {
width:100% !important; height:auto !important;
display:block !important;
filter:none !important;
background:transparent !important;
}
.woocommerce div.product form.cart .reset_variations {
color:var(--red) !important; font-size:.85rem !important;
text-decoration:underline !important;
margin-left:8px;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart table.variations {
display:table !important;
width:100% !important;
margin:0 0 18px !important;
background:transparent !important;
border:0 !important;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
background:transparent !important;
border:0 !important;
padding:8px 0 !important;
color:#fff !important;
}
.woocommerce div.product form.cart .variations label {
color:#fff !important;
font-family:var(--head) !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.12em !important;
font-size:.85rem !important;
}
/* ==========================================================================
CartFlows Variation Swatches (cfvsw-*)
========================================================================== */
.cfvsw-product-container,
.cfvsw-swatches-container {
background:transparent !important;
padding:0 !important;
margin:8px 0 16px !important;
}
.cfvsw-swatches-container {
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
}
.cfvsw-attribute-name,
.cfvsw-attr-name {
color:#fff !important;
font-family:var(--head) !important;
text-transform:uppercase !important;
letter-spacing:.12em !important;
font-size:.82rem !important;
font-weight:700 !important;
margin:0 0 8px !important;
display:block !important;
}
.cfvsw-swatches-option-wrapper,
.cfvsw-swatches-option {
background:rgba(255,255,255,.06) !important;
background-color:rgba(255,255,255,.06) !important;
border:1px solid rgba(255,255,255,.22) !important;
border-radius:var(--radius-sm) !important;
color:#fff !important;
padding:10px 16px !important;
min-width:54px !important;
min-height:44px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
cursor:pointer !important;
box-shadow:none !important;
text-shadow:none !important;
transition:all .2s ease !important;
font-family:var(--head) !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
font-size:.82rem !important;
font-weight:700 !important;
line-height:1 !important;
}
.cfvsw-swatches-option .cfvsw-swatches-label,
.cfvsw-swatches-option span,
.cfvsw-swatches-option > * {
color:#000 !important;
background:transparent !important;
background-color:transparent !important;
font:inherit !important;
box-shadow:none !important;
text-shadow:none !important;
border:0 !important;
padding:0 !important;
margin:0 !important;
display:inline-block !important;
}
.cfvsw-swatches-option-wrapper:hover,
.cfvsw-swatches-option:hover {
border-color:var(--red) !important;
background:rgba(221,51,51,.18) !important;
background-color:rgba(221,51,51,.18) !important;
transform:translateY(-1px);
}
.cfvsw-selected-swatch,
.cfvsw-swatches-option.cfvsw-selected-swatch,
.cfvsw-swatches-option-wrapper.cfvsw-selected-swatch {
background:var(--red) !important;
background-color:var(--red) !important;
border-color:var(--red) !important;
color:#fff !important;
box-shadow:0 4px 14px rgba(221,51,51,.4) !important;
}
.cfvsw-selected-swatch .cfvsw-swatches-label,
.cfvsw-selected-swatch span { color:#fff !important; }
.cfvsw-disabled-swatch,
.cfvsw-swatches-option.cfvsw-disabled-swatch {
opacity:.35 !important;
pointer-events:none !important;
text-decoration:line-through !important;
}
.cfvsw-color-swatch,
.cfvsw-swatches-option.cfvsw-color-swatch {
padding:0 !important;
min-width:40px !important;
min-height:40px !important;
width:40px !important;
height:40px !important;
border-radius:50% !important;
overflow:visible !important;
}
.cfvsw-color-swatch .cfvsw-swatches-label { display:none !important; }
.cfvsw-image-swatch {
padding:4px !important;
min-width:60px !important;
min-height:60px !important;
}
.cfvsw-image-swatch img {
width:100% !important;
height:auto !important;
display:block !important;
filter:none !important;
background:transparent !important;
border-radius:4px !important;
}
.cfvsw-reset-btn,
.cfvsw-reset {
color:var(--red) !important;
text-decoration:underline !important;
font-size:.85rem !important;
background:transparent !important;
border:0 !important;
padding:4px 0 !important;
cursor:pointer !important;
}
.cfvsw-tooltip {
background:var(--ink-2) !important;
color:#fff !important;
border:1px solid var(--line) !important;
border-radius:var(--radius-sm) !important;
font-family:var(--head) !important;
font-size:.75rem !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
padding:6px 10px !important;
}
/* Tabs */
.woocommerce div.product .woocommerce-tabs {
grid-column:1 / -1;
margin:50px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
border:0 !important; padding:0 !important; margin:0 0 24px !important;
display:flex; gap:6px; flex-wrap:wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
border-radius:var(--radius-pill) !important; padding:0; margin:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display:none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding:10px 22px !important; color:#e6e9f2 !important;
font-family:var(--head); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background:var(--red) !important; border-color:var(--red) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:#fff !important; }
.woocommerce div.product .woocommerce-tabs .panel {
background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--radius);
padding:30px; color:#fff; line-height:1.75;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family:var(--display); text-transform:uppercase;
font-size:1.4rem; margin:0 0 14px; color:darkblue; display:none; }
/* Related / Upsell */
.woocommerce .related,
.woocommerce .upsells,
.woocommerce .cross-sells {
grid-column:1 / -1;
margin:50px 0 0;
}
.woocommerce .related h2,
.woocommerce .upsells h2,
.woocommerce .cross-sells h2 {
font-family:var(--display); text-transform:uppercase; font-size:1.8rem; margin:0 0 24px; text-align:center;
}
.woocommerce .related h2::after,
.woocommerce .upsells h2::after {
content:""; display:block; margin:14px auto 0; width:100px; height:3px; border-radius:2px;
background:linear-gradient(90deg,var(--red) 0 50%,var(--blue) 50% 100%);
}
/* ---------- CART ---------- */
.woocommerce-cart .woocommerce { max-width:1100px; margin:0 auto; }
.woocommerce table.shop_table {
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
border-collapse:separate !important; overflow:hidden; margin:0 0 30px;
}
.woocommerce table.shop_table th {
background:rgba(255,255,255,.04) !important;
color:#fff !important;
font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem;
padding:16px !important; border-top:0 !important; border-bottom:1px solid var(--line) !important;
}
.woocommerce table.shop_table td {
padding:16px !important; color:#d7ddee;
border-top:1px solid rgba(255,255,255,.04) !important;
}
.woocommerce table.shop_table td.product-name a { color:#fff; font-weight:600; }
.woocommerce table.shop_table td.product-name a:hover { color:var(--red); }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal { color:#fff; font-weight:700; }
.woocommerce table.shop_table td.product-thumbnail img { width:72px !important; height:72px; object-fit:cover;
border-radius:var(--radius-sm); }
.woocommerce a.remove {
display:inline-grid; place-items:center;
width:24px; height:24px; border-radius:50%;
color:#fff !important; background:var(--red) !important;
font-size:1rem !important; font-weight:700 !important;
text-decoration:none !important;
}
.woocommerce a.remove:hover { background:var(--red-2) !important; color:#fff !important; }
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals { display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals { width:auto !important; float:none !important; }
.woocommerce .cart_totals {
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
padding:24px;
}
.woocommerce .cart_totals h2 { font-family:var(--display); text-transform:uppercase; font-size:1.5rem; margin:0 0
16px; }
.woocommerce .coupon { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.woocommerce .coupon input[type="text"] {
padding:12px 14px; background:rgba(255,255,255,.04); border:1px solid var(--line);
color:#fff; border-radius:var(--radius-sm); font:inherit; min-width:180px;
}
.woocommerce .cart-empty {
text-align:center; padding:80px 20px;
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
margin:0 0 30px;
}
.woocommerce .cart-empty h1,
.woocommerce .cart-empty .h1 { font-family:var(--display); text-transform:uppercase; font-size:2rem; margin:0 0
10px; }
/* ---------- CHECKOUT ---------- */
.woocommerce-checkout .col2-set,
.woocommerce-page.woocommerce-checkout .col2-set {
display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:0 0 30px;
width:100% !important; float:none !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width:auto !important; float:none !important; }
.woocommerce-checkout #customer_details {
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.woocommerce-checkout h3 { font-family:var(--display); text-transform:uppercase; font-size:1.4rem; margin:0 0 18px;
}
.woocommerce form .form-row label { color:#fff; font-family:var(--head); text-transform:uppercase;
letter-spacing:.08em; font-size:.8rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea {
width:100%; padding:13px 16px;
background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
color:#fff !important; border-radius:var(--radius-sm); font:inherit;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline:none; border-color:var(--red) !important;
background:rgba(255,255,255,.06) !important; }
.select2-container--default .select2-selection--single {
height:48px !important; padding:6px 10px !important;
background:rgba(255,255,255,.04) !important; border:1px solid var(--line) !important;
border-radius:var(--radius-sm) !important; color:#fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color:#fff !important;
padding:8px 8px !important; }
.select2-dropdown { background:var(--ink-2) !important; border:1px solid var(--line) !important; color:#fff
!important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background:var(--red) !important;
color:#fff !important; }
#order_review_heading,
.woocommerce-checkout-review-order { margin-top:30px; }
.woocommerce-checkout-review-order {
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.woocommerce-checkout #payment {
background:rgba(255,255,255,.02) !important; border:1px solid var(--line) !important;
border-radius:var(--radius) !important;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom:1px solid var(--line) !important; padding:20px
!important; }
.woocommerce-checkout #payment ul.payment_methods li { list-style:none; padding:8px 0; }
.woocommerce-checkout #payment div.payment_box { background:rgba(255,255,255,.04) !important; color:#d7ddee
!important; border-radius:var(--radius-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color:rgba(255,255,255,.04) !important; }
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button.button {
width:100%;
background:linear-gradient(135deg,var(--red),var(--red-2)) !important;
color:#fff !important;
padding:16px !important; border-radius:var(--radius-pill) !important;
font-family:var(--head) !important; text-transform:uppercase; letter-spacing:.18em;
font-size:.95rem; font-weight:700;
border:0 !important;
box-shadow:0 10px 26px rgba(221,51,51,.4);
}
.woocommerce-checkout #payment #place_order:hover { box-shadow:0 18px 40px rgba(221,51,51,.6);
transform:translateY(-2px); }
/* ---------- MY ACCOUNT ---------- */
.woocommerce-account .woocommerce { max-width:1100px; margin:0 auto; }
.woocommerce-account .woocommerce-MyAccount-navigation {
float:none !important; width:auto !important;
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
padding:20px; margin:0 0 24px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style:none; padding:0; margin:0; display:flex;
flex-wrap:wrap; gap:6px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display:block; padding:10px 18px; border-radius:var(--radius-pill);
background:rgba(255,255,255,.04); color:#e6e9f2;
font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; font-weight:700;
transition:background .2s ease, color .2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background:var(--red); color:#fff; }
.woocommerce-account .woocommerce-MyAccount-content { float:none !important; width:auto !important; }
.woocommerce-account .woocommerce-MyAccount-content p { color:#d7ddee; line-height:1.7; }
.woocommerce-account .woocommerce-MyAccount-content a { color:var(--red); }
.woocommerce-account form.login,
.woocommerce-account form.register {
background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:var(--radius);
padding:26px; max-width:480px; margin:0 auto;
}
.woocommerce-form-row label { color:#fff; }
/* ---------- LOGIN / REGISTER BUTTONS ---------- */
.woocommerce form.login .button,
.woocommerce form.register .button,
.woocommerce form.lost_reset_password .button {
background:linear-gradient(135deg,var(--red),var(--red-2)) !important;
color:#fff !important;
padding:14px 28px !important; border-radius:var(--radius-pill) !important;
font-family:var(--head) !important; text-transform:uppercase; letter-spacing:.14em;
font-size:.82rem; font-weight:700;
border:0 !important;
}
/* ---------- ORDERS TABLE ---------- */
.woocommerce-orders-table a.button,
.woocommerce .woocommerce-MyAccount-content a.button,
.woocommerce-orders-table a.woocommerce-button {
display:inline-block; padding:8px 16px !important;
background:rgba(255,255,255,.06) !important; color:#fff !important;
border-radius:var(--radius-pill) !important; border:1px solid var(--line) !important;
font-family:var(--head) !important; text-transform:uppercase; letter-spacing:.08em;
font-size:.72rem; font-weight:700;
}
.woocommerce-orders-table a.button:hover,
.woocommerce-orders-table a.woocommerce-button:hover {
background:var(--red) !important; border-color:var(--red) !important;
}
/* ---------- RATING STARS ---------- */
.woocommerce .star-rating { color:var(--red); }
.woocommerce .star-rating::before { color:rgba(255,255,255,.15); }
/* ---------- RESPONSIVE (shop) ---------- */
@media (max-width:1200px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns:repeat(3,1fr); }
.ddp-shop__split { grid-template-columns:1fr 240px; gap:24px; }
}
@media (max-width:1024px) {
.ddp-shop__split { grid-template-columns:1fr; }
.ddp-shop__sidebar { position:static; order:2; }
.ddp-shop__main { order:1; }
.woocommerce div.product { grid-template-columns:1fr; }
}
@media (max-width:700px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns:repeat(2,1fr); gap:14px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 { font-size:.82rem; margin:10px 12px 4px !important; }
.woocommerce ul.products li.product .price { margin:0 12px 6px; font-size:.88rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
margin:0 12px 12px !important; padding:9px 14px !important; font-size:.68rem;
}
.ddp-pill { margin:10px 12px 0; font-size:.56rem; padding:3px 8px; }
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals { grid-template-columns:1fr; }
.woocommerce-checkout .col2-set,
.woocommerce-page.woocommerce-checkout .col2-set { grid-template-columns:1fr; }
.ddp-shop { padding:40px 16px 70px; }
.woocommerce table.shop_table thead { display:none; }
.woocommerce table.shop_table tr { display:block; margin:0 0 14px; border:1px solid var(--line);
border-radius:var(--radius-sm); }
.woocommerce table.shop_table td { display:flex; justify-content:space-between; gap:10px; border:0 !important;
padding:12px 16px !important; }
.woocommerce table.shop_table td::before { content:attr(data-title); font-family:var(--head);
text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:var(--muted); }
}
@media (max-width:420px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns:1fr; }
}
/* =========================================================================
LIGHT-SURFACE MODE (bone / concrete-wall)
Applies to all WooCommerce-wrapped pages via .ddp-shop.
White product photos + mix-blend-mode:multiply on warm bone (#f2efe7)
= backgrounds visually vanish, no per-image editing required.
Header, footer, blog, posts, 404 still use the dark graffiti surface.
========================================================================= */
.ddp-shop {
--surface: #0a0f1a;
--surface-2: #141a2a;
--surface-3: #05080f;
--surface-text: #ffffff;
--surface-muted: #9aa4c0;
--surface-line: rgba(255,255,255,.12);
--surface-line-2: rgba(255,255,255,.06);
--surface-shadow: 0 6px 18px rgba(0,0,0,.45);
--surface-shadow-lg: 0 18px 40px rgba(0,0,0,.6);
position: relative;
background:
radial-gradient(900px 500px at 80% 10%, rgba(30,115,190,.18), transparent 60%),
radial-gradient(900px 500px at 20% 90%, rgba(221,51,51,.18), transparent 60%),
linear-gradient(180deg, var(--surface) 0%, #05080f 100%);
color: var(--surface-text);
}
/* Concrete-wall noise texture overlay */
.ddp-shop::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
opacity: .35;
mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
z-index: 0;
}
.ddp-shop > * { position: relative; z-index: 1; }
/* ---------- SHOP HEAD ---------- */
.ddp-shop .ddp-shop-head { border-bottom-color: var(--red); }
.ddp-shop .ddp-shop-head__title { color: var(--surface-text); text-shadow: none; }
.ddp-shop .ddp-shop-head__kicker { color: var(--red); }
.ddp-shop .ddp-shop-head__desc,
.ddp-shop .ddp-shop-head .term-description,
.ddp-shop .term-description { color: var(--surface-muted); }
.ddp-shop .ddp-shop-head .term-description a,
.ddp-shop .term-description a { color: var(--red-2); }
.ddp-shop .ddp-shop-head .term-description a:hover { color: var(--surface-text); }
/* ---------- BREADCRUMB ---------- */
.ddp-shop .ddp-breadcrumb,
.ddp-shop .ddp-breadcrumb a { color: var(--surface-muted); }
.ddp-shop .ddp-breadcrumb a:hover { color: var(--surface-text); }
/* ---------- FILTER SIDEBAR ---------- */
.ddp-shop .ddp-shop__sidebar {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .ddp-filter__heading { color: var(--surface-text); }
.ddp-shop .ddp-filter__heading-wrap { border-bottom-color: var(--red); }
.ddp-shop .ddp-filter__label {
color: var(--surface-muted);
border-bottom-color: var(--surface-line);
}
.ddp-shop .ddp-filter__item a { color: var(--surface-muted); }
.ddp-shop .ddp-filter__item a:hover {
background: var(--surface-3);
color: var(--surface-text);
}
.ddp-shop .ddp-filter__count {
background: var(--surface-3);
color: var(--surface-muted);
}
.ddp-shop .ddp-filter__item.is-active a { color:#fff !important; }
.ddp-shop .ddp-filter__item.is-active .ddp-filter__count { background: rgba(255,255,255,.25); color:#fff; }
/* ---------- RESULT COUNT / ORDERING ---------- */
.ddp-shop .woocommerce-result-count,
.ddp-shop .woocommerce-ordering { color: var(--surface-muted); }
.ddp-shop .woocommerce-ordering select {
background: var(--surface-2);
border-color: var(--surface-line);
color: var(--surface-text);
}
/* ---------- PRODUCT GRID CARDS — GRAFFITI STENCIL TREATMENT ---------- */
.ddp-shop .woocommerce ul.products li.product,
.woocommerce .ddp-shop ul.products li.product {
background: transparent !important;
background-color: transparent !important;
border: 2px solid var(--surface-text) !important;
border-radius: var(--radius) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.35),
0 3px 0 0 var(--surface-text),
0 10px 22px rgba(10,15,26,.08) !important;
overflow: visible !important;
position: relative;
isolation: auto;
}
.ddp-shop .woocommerce ul.products li.product::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--red) 0 33.33%, #fff 33.33% 66.66%, var(--blue) 66.66% 100%);
z-index: 3;
pointer-events: none;
border-top-left-radius: calc(var(--radius) - 2px);
border-top-right-radius: calc(var(--radius) - 2px);
}
.ddp-shop .woocommerce ul.products li.product:hover {
transform: translateY(-6px) rotate(-.35deg) !important;
border-color: var(--surface-text) !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.4),
0 3px 0 0 var(--surface-text),
0 0 0 6px rgba(221,51,51,.10),
0 0 0 10px rgba(30,115,190,.08),
0 22px 42px rgba(10,15,26,.18) !important;
}
.ddp-shop .woocommerce ul.products li.product .wp-post-image,
.ddp-shop .woocommerce ul.products li.product img {
background: transparent !important;
background-color: transparent !important;
mix-blend-mode: normal;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.ddp-shop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.ddp-shop .woocommerce ul.products li.product h2 {
font-family: var(--display) !important;
letter-spacing: .01em !important;
font-size: 1rem !important;
color: var(--surface-text) !important;
}
.ddp-shop .woocommerce ul.products li.product .price ins { color: var(--surface-text) !important; }
.ddp-shop .woocommerce ul.products li.product .price del { color: var(--surface-muted) !important; }
.ddp-shop .woocommerce ul.products li.product .onsale {
top: 16px !important;
left: 10px !important;
border: 1.5px solid var(--surface-text) !important;
}
.ddp-shop .ddp-pill { margin-top: 18px !important; border-width: 1.5px !important; }
/* Heritage / Originals pills — re-tint for cream bg */
.ddp-shop .ddp-pill.is-heritage { background: rgba(30,115,190,.12); color: var(--blue-2); border-color:
rgba(30,115,190,.45); }
.ddp-shop .ddp-pill.is-originals { background: rgba(221,51,51,.12); color: var(--red-3); border-color:
rgba(221,51,51,.45); }
/* ---------- PAGINATION ---------- */
.ddp-shop .woocommerce nav.woocommerce-pagination ul li a,
.ddp-shop .woocommerce nav.woocommerce-pagination ul li span {
background: var(--surface-2) !important;
color: var(--surface-text) !important;
box-shadow: 0 2px 6px rgba(10,15,26,.06);
}
.ddp-shop .woocommerce nav.woocommerce-pagination ul li a:hover,
.ddp-shop .woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--red) !important; color:#fff !important;
}
/* ---------- SINGLE PRODUCT GALLERY — matches the grid stencil frame ---------- */
.ddp-shop .woocommerce div.product .woocommerce-product-gallery {
background: transparent !important;
background-color: transparent !important;
isolation: auto !important;
border: 2px solid var(--surface-text) !important;
border-radius: var(--radius) !important;
box-shadow:
0 0 0 4px var(--red), /* red ring hugging the card */
0 0 0 8px #ffffff, /* white stripe */
0 0 0 12px var(--blue), /* blue ring */
0 0 0 14px rgba(10,15,26,.95), /* ink hairline to crisp it up */
0 18px 30px rgba(10,15,26,.15) !important;
position: relative;
}
.ddp-shop .woocommerce div.product .woocommerce-product-gallery::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--red) 0 33.33%, #fff 33.33% 66.66%, var(--blue) 66.66% 100%);
z-index: 3;
pointer-events: none;
border-top-left-radius: calc(var(--radius) - 2px);
border-top-right-radius: calc(var(--radius) - 2px);
}
.ddp-shop .woocommerce div.product .flex-control-nav.flex-control-thumbs {
background: transparent !important;
border: 2px solid var(--surface-text) !important;
}
.ddp-shop .woocommerce div.product .flex-control-nav.flex-control-thumbs li img {
mix-blend-mode: normal !important;
}
.ddp-shop .woocommerce div.product .woocommerce-product-gallery .flex-viewport img,
.ddp-shop .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image img,
.ddp-shop .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a > img,
.ddp-shop .woocommerce-product-gallery__image img,
.ddp-shop .woocommerce div.product .woocommerce-product-gallery .zoomImg {
mix-blend-mode: normal !important;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) !important;
}
.ddp-shop .woocommerce div.product .summary .product_title { color: var(--surface-text); text-shadow: none; }
.ddp-shop .woocommerce div.product .summary .woocommerce-product-details__short-description { color: var(--surface-muted); }
.ddp-shop .woocommerce div.product form.cart { border-top-color: var(--surface-line); }
.ddp-shop .woocommerce div.product form.cart .quantity .qty {
background: var(--surface-2); border-color: var(--surface-line); color: var(--surface-text);
}
.ddp-shop .woocommerce div.product .product_meta {
border-color: var(--surface-line); color: var(--surface-muted);
}
.ddp-shop .woocommerce div.product .product_meta a { color: var(--red-2); }
/* Variations native table */
.ddp-shop .woocommerce div.product form.cart .variations { background: transparent; border-color:
var(--surface-line); }
.ddp-shop .woocommerce div.product form.cart .variations label,
.ddp-shop .woocommerce div.product form.cart .variations td,
.ddp-shop .woocommerce div.product form.cart .variations th { color: var(--surface-text) !important; }
.ddp-shop .woocommerce div.product form.cart .variations select {
background: var(--surface-2) !important; border-color: var(--surface-line) !important; color: var(--surface-text)
!important;
}
/* Native WVS swatches (base state) */
.ddp-shop .variable-items-wrapper li.variable-item,
.ddp-shop ul.variable-items-wrapper li,
.ddp-shop ul.variable-items-wrapper > li {
background: var(--surface-2) !important;
background-color: var(--surface-2) !important;
border-color: var(--surface-line) !important;
color: var(--surface-text) !important;
box-shadow: 0 2px 6px rgba(10,15,26,.05) !important;
}
.ddp-shop .variable-items-wrapper li .variable-item-contents,
.ddp-shop .variable-items-wrapper li span,
.ddp-shop ul.variable-items-wrapper li > * { color: var(--surface-text) !important; }
.ddp-shop .variable-items-wrapper li.variable-item:hover,
.ddp-shop .variable-items-wrapper li:hover {
background: rgba(221,51,51,.10) !important; background-color: rgba(221,51,51,.10) !important;
}
/* CartFlows cfvsw swatches (base state) */
.ddp-shop .cfvsw-attribute-name,
.ddp-shop .cfvsw-attr-name { color: var(--surface-text) !important; }
.ddp-shop .cfvsw-swatches-option-wrapper,
.ddp-shop .cfvsw-swatches-option {
border-color: var(--surface-line) !important;
color: var(--surface-text) !important;
box-shadow: 0 2px 6px rgba(10,15,26,.05) !important;
}
.ddp-shop .cfvsw-swatches-option .cfvsw-swatches-label,
.ddp-shop .cfvsw-swatches-option span,
.ddp-shop .cfvsw-swatches-option > * { color: var(--surface-text) !important; }
.ddp-shop .cfvsw-swatches-option-wrapper:hover,
.ddp-shop .cfvsw-swatches-option:hover {
background: rgba(221,51,51,.10) !important; background-color: rgba(221,51,51,.10) !important;
}
.ddp-shop .cfvsw-reset-btn,
.ddp-shop .cfvsw-reset { color: var(--red-2) !important; }
.ddp-shop .cfvsw-tooltip {
background: var(--ink) !important; color:#fff !important; border-color: var(--ink) !important;
}
/* Donation note */
.ddp-shop .ddp-donate-note,
body.ddp-shop .ddp-donate-note,
.ddp-shop p.ddp-donate-note {
background: linear-gradient(90deg,rgba(221,51,51,.82),rgba(30,115,190,.82));
border: 2px solid var(--surface-text) !important;
color: var(--surface-text) !important;
box-shadow: 0 2px 0 0 var(--surface-text), 0 6px 14px rgba(10,15,26,.08) !important;
}
.ddp-shop .ddp-donate-note b { color: var(--surface-text); }
/* ---------- TABS ---------- */
.ddp-shop .woocommerce div.product .woocommerce-tabs ul.tabs li {
background: var(--surface-2) !important; border-color: var(--surface-line) !important;
box-shadow: 0 2px 6px rgba(10,15,26,.05);
}
.ddp-shop .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--surface-text) !important; }
.ddp-shop .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--red) !important;
border-color: var(--red) !important; }
.ddp-shop .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:#fff !important; }
.ddp-shop .woocommerce div.product .woocommerce-tabs .panel {
background: var(--surface-2);
border-color: var(--surface-line);
color: var(--surface-muted);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce div.product .woocommerce-tabs .panel h2 { color: var(--surface-text); }
/* Related / Upsell titles */
.ddp-shop .woocommerce .related h2,
.ddp-shop .woocommerce .upsells h2,
.ddp-shop .woocommerce .cross-sells h2 { color: var(--surface-text); }
/* ---------- CART ---------- */
.ddp-shop .woocommerce table.shop_table {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce table.shop_table th {
background: var(--surface-3) !important;
color: var(--surface-text) !important;
border-bottom-color: var(--surface-line) !important;
}
.ddp-shop .woocommerce table.shop_table td {
color: var(--surface-muted);
border-top-color: var(--surface-line-2) !important;
}
.ddp-shop .woocommerce table.shop_table td.product-name a { color: var(--surface-text); }
.ddp-shop .woocommerce table.shop_table td.product-name a:hover { color: var(--red-2); }
.ddp-shop .woocommerce table.shop_table td.product-price,
.ddp-shop .woocommerce table.shop_table td.product-subtotal { color: var(--surface-text); }
.ddp-shop .woocommerce .cart_totals {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce .cart_totals h2 { color: var(--surface-text); }
.ddp-shop .woocommerce .coupon input[type="text"] {
background: var(--surface-2); border-color: var(--surface-line); color: var(--surface-text);
}
.ddp-shop .woocommerce .cart-empty {
background: var(--surface-2); border-color: var(--surface-line); box-shadow: var(--surface-shadow);
color: var(--surface-text);
}
.ddp-shop .woocommerce .cart-empty h1 { color: var(--surface-text); }
/* ---------- CHECKOUT ---------- */
.ddp-shop .woocommerce-checkout #customer_details,
.ddp-shop .woocommerce-checkout-review-order {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce-checkout h3 { color: var(--surface-text); }
.ddp-shop .woocommerce form .form-row label { color: var(--surface-text); }
.ddp-shop .woocommerce form .form-row input.input-text,
.ddp-shop .woocommerce form .form-row textarea,
.ddp-shop .woocommerce form .form-row select,
.ddp-shop .woocommerce-page form .form-row input.input-text,
.ddp-shop .woocommerce-page form .form-row textarea {
background: var(--surface-2) !important;
border-color: var(--surface-line) !important;
color: var(--surface-text) !important;
}
.ddp-shop .woocommerce form .form-row input.input-text:focus,
.ddp-shop .woocommerce form .form-row textarea:focus,
.ddp-shop .woocommerce form .form-row select:focus {
background: #fff !important; border-color: var(--red) !important;
}
/* select2 */
.ddp-shop .select2-container--default .select2-selection--single {
background: var(--surface-2) !important;
border-color: var(--surface-line) !important;
color: var(--surface-text) !important;
}
.ddp-shop .select2-container--default .select2-selection--single .select2-selection__rendered { color:
var(--surface-text) !important; }
.ddp-shop .woocommerce-checkout #payment {
background: var(--surface-2) !important;
border-color: var(--surface-line) !important;
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--surface-line) !important; }
.ddp-shop .woocommerce-checkout #payment div.payment_box {
background: var(--surface-3) !important; color: var(--surface-muted) !important;
}
.ddp-shop .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface-3) !important;
}
/* ---------- MY ACCOUNT ---------- */
.ddp-shop .woocommerce-account .woocommerce-MyAccount-navigation {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
background: var(--surface-3); color: var(--surface-text);
}
.ddp-shop .woocommerce-account .woocommerce-MyAccount-content p { color: var(--surface-muted); }
.ddp-shop .woocommerce-account .woocommerce-MyAccount-content a { color: var(--red-2); }
.ddp-shop .woocommerce-account form.login,
.ddp-shop .woocommerce-account form.register {
background: var(--surface-2);
border-color: var(--surface-line);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
background: var(--surface-3); color: var(--surface-text);
}
.ddp-shop .woocommerce-account .woocommerce-MyAccount-content p { color: var(--surface-muted); }
.ddp-shop .woocommerce-account .woocommerce-MyAccount-content a { color: var(--red-2); }
.ddp-shop .woocommerce-account form.login,
.ddp-shop .woocommerce-account form.register {
background: var(--surface-2);
border-color: var(--surface-line);
box-shadow: var(--surface-shadow);
}
.ddp-shop .woocommerce-form-row label { color: var(--surface-text); }
/* Orders buttons */
.ddp-shop .woocommerce-orders-table a.button,
.ddp-shop .woocommerce .woocommerce-MyAccount-content a.button,
.ddp-shop .woocommerce-orders-table a.woocommerce-button {
background: var(--surface-3) !important; color: var(--surface-text) !important;
border-color: var(--surface-line) !important;
}
.ddp-shop .woocommerce-orders-table a.button:hover,
.ddp-shop .woocommerce-orders-table a.woocommerce-button:hover {
background: var(--red) !important; color:#fff !important; border-color: var(--red) !important;
}
/* Rating stars empty-state */
.ddp-shop .woocommerce .star-rating::before { color: rgba(10,15,26,.2); }
/* =========================================================================
SHOP GRAFFITI — .ddp-shop::after pseudo-element with layered SVG
data-URI backgrounds. Simple percentages (no min()) + higher opacities
for reliable cross-browser rendering. The existing .ddp-shop::before
concrete-noise overlay is untouched.
========================================================================= */
.ddp-shop::after {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
pointer-events: none;
z-index: 0;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: top right, left center, right bottom 520px;
background-size: 55% auto, 38% auto, 28% auto;
background-repeat: no-repeat, no-repeat, no-repeat;
}
@media (max-width: 900px) {
.ddp-shop::after {
background-size: 70% auto, 60% auto, 50% auto;
background-position: top right, left 40%, right bottom 620px;
}
}
@media (max-width: 560px) {
.ddp-shop::after {
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: top right, right bottom 820px;
background-size: 100% auto, 70% auto;
background-repeat: no-repeat, no-repeat;
}
}