/* ============================================================================
* The Sporting Shoppe — Fieldcraft Stylesheet
* Editorial polish layer for the child theme.
* Version is driven by SS_THEME_VERSION in functions.php (?ver= cache-buster) —
* see CHANGELOG.md for the authoritative version history.
* ============================================================================ */
/* =========================================================
01 · TOKENS
========================================================= */
:root {
--ss-oxblood: #8f2418;
--ss-oxblood-deep: #741b12;
--ss-oxblood-soft: #b14233;
--ss-brass: #b79a59;
--ss-accent-gold: #c9a159;
--ss-ink: #1c1a17;
--ss-ink-soft: #4f4a43;
--ss-ink-mute: #6f665c;
--ss-ink-quiet: #7a7065;
--ss-paper: #faf6ed;
--ss-bone: #f8f6f3;
--ss-bone-2: #f5f1ea;
--ss-rule: #d8d2c8;
--ss-rule-soft: #ece4d3;
--ss-moss: #4a5340;
--ss-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
--ss-serif: "Cormorant Garamond", Georgia, serif;
--ss-sans: "Montserrat", "Inter", -apple-system, sans-serif;
--ss-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* =========================================================
02 · UTILITY CLASSES
========================================================= */
.ss-kicker {
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ss-oxblood);
}
.ss-eyebrow {
font-family: var(--ss-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-ink-mute);
}
.ss-ornament {
display: block;
width: 40px; height: 1px;
background: var(--ss-accent-gold);
position: relative;
margin: 16px auto;
}
.ss-ornament::before, .ss-ornament::after {
content: ""; position: absolute; top: 50%;
width: 4px; height: 4px;
background: var(--ss-accent-gold);
transform: translateY(-50%) rotate(45deg);
}
.ss-ornament::before { left: -8px; } .ss-ornament::after { right: -8px; }
::selection { background: var(--ss-oxblood); color: var(--ss-paper); }
/* =========================================================
03 · CATEGORY HERO
========================================================= */
.category-hero-bg h1 {
font-family: var(--ss-display) !important;
font-weight: 500 !important;
font-size: clamp(40px, 6vw, 72px) !important;
letter-spacing: -0.015em !important;
color: var(--ss-ink) !important;
margin: 0 0 4px !important;
}
.category-hero-bg h1:after {
content: "" !important;
display: block !important;
width: 40px !important;
height: 1px !important;
background: var(--ss-accent-gold) !important;
margin: 16px auto 0 !important;
}
.category-hero-bg h1 em { color: var(--ss-oxblood) !important; font-style: italic; }
.category-hero-bg .shoppe-category-description,
.shoppe-category-description {
font-family: var(--ss-serif) !important;
font-style: italic;
font-size: 21px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
color: var(--ss-ink) !important;
max-width: 660px !important;
margin: 20px auto 0 !important;
}
.shoppe-native-category-hero-inner .ss-hero-kicker {
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ss-oxblood);
margin-bottom: 14px;
display: block;
}
/* — structure, background art & centred scrim (consolidated from style.css) — */
/* =========================================================
CATEGORY HERO SYSTEM
========================================================= */
.category-hero-bg {
background-color: #f4ede0 !important;
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/preserve-gear-header.webp') !important;
background-size: cover !important;
background-position: center 35% !important;
background-repeat: no-repeat !important;
overflow: hidden;
padding: 14px 20px 22px !important;
margin-bottom: 28px !important;
text-align: center !important;
position: relative;
}
@media (min-width: 981px) {
.category-hero-bg {
min-height: 320px !important;
display: flex;
align-items: center;
}
}
.category-hero-bg:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.10), rgba(0,0,0,0));
}
.category-hero-bg .shoppe-native-category-hero-inner {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
text-align: center !important;
}
.category-hero-bg p {
text-align: center !important;
}
/* ARCHERY */
body.term-archery .category-hero-bg,
body.term-archery-accessories .category-hero-bg,
body.term-archery-targets .category-hero-bg,
body.term-arrow-components .category-hero-bg,
body.term-arrows-bolts .category-hero-bg,
body.term-compound-bows .category-hero-bg,
body.term-crossbows .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/archery-header.webp') !important;
background-position: center top !important;
}
/* SHOTGUNS */
body.term-shotguns .category-hero-bg,
body.term-lever-action-shotguns .category-hero-bg,
body.term-bolt-action-shotguns .category-hero-bg,
body.term-break-action .category-hero-bg,
body.term-over-under .category-hero-bg,
body.term-pump-action .category-hero-bg,
body.term-semi-automatic-shotguns .category-hero-bg,
body.term-side-by-side .category-hero-bg,
body.term-single-shot .category-hero-bg,
body.term-10-gauge .category-hero-bg,
body.term-12-gauge .category-hero-bg,
body.term-16-gauge .category-hero-bg,
body.term-20-gauge .category-hero-bg,
body.term-28-gauge .category-hero-bg,
body.term-410-gauge .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/flying-birds-background-gray.webp') !important;
background-position: center 35% !important;
}
/* HUNTING */
body.term-hunting .category-hero-bg,
body.term-scent-control .category-hero-bg,
body.term-hats .category-hero-bg,
body.term-stetson .category-hero-bg,
body.term-jackets-hunting .category-hero-bg,
body.term-accessories-hunting .category-hero-bg,
body.term-treestands .category-hero-bg,
body.term-decoys .category-hero-bg,
body.term-dog-training-supplies .category-hero-bg,
body.term-game-calls .category-hero-bg,
body.term-hunting-vests .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/hunting-header.webp') !important;
background-position: center 35% !important;
}
/* FIREARMS */
body.term-firearms .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/firearms-header-2.webp') !important;
background-position: center 35% !important;
}
/* FINE FIREARMS */
body.term-fine-firearms .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/fine-firearms-header.webp') !important;
background-position: center center !important;
}
/* FISHING GENERAL */
body.term-fishing .category-hero-bg,
body.term-rods .category-hero-bg,
body.term-spinning-rods .category-hero-bg,
body.term-casting-rods .category-hero-bg,
body.term-conventional-rods .category-hero-bg,
body.term-ice-fishing-rods .category-hero-bg,
body.term-reels .category-hero-bg,
body.term-spinning-reels .category-hero-bg,
body.term-baitcasting-reels .category-hero-bg,
body.term-conventional-reels .category-hero-bg,
body.term-ice-fishing-reels .category-hero-bg,
body.term-lures .category-hero-bg,
body.term-hard-baits .category-hero-bg,
body.term-soft-baits .category-hero-bg,
body.term-jigs .category-hero-bg,
body.term-spoons .category-hero-bg,
body.term-swimbaits .category-hero-bg,
body.term-topwater-lures .category-hero-bg,
body.term-tackle .category-hero-bg,
body.term-hooks .category-hero-bg,
body.term-weights .category-hero-bg,
body.term-swivels-snaps .category-hero-bg,
body.term-leaders .category-hero-bg,
body.term-line .category-hero-bg,
body.term-fishing-accessories .category-hero-bg,
body.term-fishing-tools .category-hero-bg,
body.term-tools .category-hero-bg,
body.term-fishing-nets .category-hero-bg,
body.term-tackle-boxes-storage .category-hero-bg,
body.term-fishing-electronics .category-hero-bg,
body.term-fishing-apparel .category-hero-bg,
body.term-offshore-fishing .category-hero-bg,
body.term-inshore-fishing .category-hero-bg,
body.term-surf-fishing .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/fishing-banner2.webp') !important;
background-position: center 28% !important;
}
/* SALTWATER FISHING */
body.term-saltwater-fishing .category-hero-bg,
body.term-saltwater-lures .category-hero-bg,
body.term-saltwater-reels .category-hero-bg,
body.term-saltwater-rods .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/saltwater-fishing-header.webp') !important;
background-position: center top !important;
}
/* FLY FISHING */
body.term-fly-fishing .category-hero-bg,
body.term-fly-fishing-tools .category-hero-bg,
body.term-fly-lines .category-hero-bg,
body.term-fly-reels .category-hero-bg,
body.term-fly-rods .category-hero-bg,
body.term-fly-tying-materials .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/fly-fishing-header.webp') !important;
background-position: center center !important;
}
/* BOATING */
body.term-boating .category-hero-bg,
body.term-accessories-boating .category-hero-bg,
body.term-life-jackets .category-hero-bg,
body.term-paddles-oars .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/boating-header.webp') !important;
background-position: center center !important;
}
/* CAMPING */
body.term-camping-gear .category-hero-bg,
body.term-emergency-food .category-hero-bg,
body.term-backpacks-bags-cases .category-hero-bg,
body.term-coolers .category-hero-bg,
body.term-furniture .category-hero-bg,
body.term-handheld-gps .category-hero-bg,
body.term-hand-warmers .category-hero-bg,
body.term-fire-starters .category-hero-bg,
body.term-first-aid .category-hero-bg,
body.term-lighting .category-hero-bg,
body.term-rope-paracord-tie-downs .category-hero-bg,
body.term-survival .category-hero-bg,
body.term-security .category-hero-bg,
body.term-sleeping-bags-pads .category-hero-bg,
body.term-tents-shelters .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/camping-hero.webp') !important;
background-position: center center !important;
}
/* APPAREL */
body.term-clothing .category-hero-bg,
body.term-weatherproof-gear .category-hero-bg,
body.term-youth-clothing .category-hero-bg,
body.term-clothing-accessories .category-hero-bg,
body.term-jewelry-watches .category-hero-bg,
body.term-purses-personal-bags .category-hero-bg,
body.term-caps-hats .category-hero-bg,
body.term-mens-clothing .category-hero-bg,
body.term-mens-hoody .category-hero-bg,
body.term-bow-ties .category-hero-bg,
body.term-belts .category-hero-bg,
body.term-gloves .category-hero-bg,
body.term-mens-jackets .category-hero-bg,
body.term-pants .category-hero-bg,
body.term-shirts .category-hero-bg,
body.term-shorts .category-hero-bg,
body.term-sweaters .category-hero-bg,
body.term-vests .category-hero-bg,
body.term-womens-clothing .category-hero-bg,
body.term-womens-hoody .category-hero-bg,
body.term-gloves-womens-clothing .category-hero-bg,
body.term-womens-jackets .category-hero-bg,
body.term-womens-pants .category-hero-bg,
body.term-womens-shirts .category-hero-bg,
body.term-womens-shorts .category-hero-bg,
body.term-womens-sweaters .category-hero-bg,
body.term-womens-vests .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/apparel-header.webp') !important;
background-position: center center !important;
}
/* PRESERVE GEAR */
body.term-preserve-gear .category-hero-bg,
body.term-hats-caps .category-hero-bg,
body.term-long-sleeve-shirts .category-hero-bg,
body.term-short-sleeve-shirts .category-hero-bg,
body.term-sweaters-preserve-gear .category-hero-bg,
body.term-vests-preserve-gear .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/preserve-gear-header.webp') !important;
background-size: 100% auto !important;
background-position: center center !important;
}
/* RIFLES */
body.term-rifles .category-hero-bg,
body.term-pump .category-hero-bg,
body.term-side-by-side-rifles .category-hero-bg,
body.term-over-under-rifles .category-hero-bg,
body.term-single-shot-rifles .category-hero-bg,
body.term-ak-47 .category-hero-bg,
body.term-ar-10 .category-hero-bg,
body.term-ar-15 .category-hero-bg,
body.term-bolt-action .category-hero-bg,
body.term-break-open .category-hero-bg,
body.term-lever-action .category-hero-bg,
body.term-semi-auto-rifles .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/rifles-header.webp') !important;
background-position: center center !important;
}
/* HANDGUNS */
body.term-handguns .category-hero-bg,
body.term-bolt_action .category-hero-bg,
body.term-bb-pellet-guns .category-hero-bg,
body.term-new .category-hero-bg,
body.term-handgun-sale .category-hero-bg,
body.term-pre-owned .category-hero-bg,
body.term-semi-automatic .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/handguns-header1.webp') !important;
background-position: center center !important;
}
body.term-revolvers .category-hero-bg,
body.term-double-action .category-hero-bg,
body.term-single-double .category-hero-bg,
body.term-single-action .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/handguns-header.webp') !important;
background-position: center center !important;
}
/* GOLF */
body.term-golf .category-hero-bg,
body.term-golf-accessories .category-hero-bg,
body.term-clubs .category-hero-bg,
body.term-gloves-golf .category-hero-bg,
body.term-golf-balls .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/golf-header.webp') !important;
background-position: center center !important;
}
/* GUN CARE */
body.term-gun-cleaning-supplies .category-hero-bg,
body.term-bore-cleaners .category-hero-bg,
body.term-brushes .category-hero-bg,
body.term-gun-cleaning-kits .category-hero-bg,
body.term-gun-cleaning-rods .category-hero-bg,
body.term-gun-cloths .category-hero-bg,
body.term-lubricants-solvents .category-hero-bg {
background-image: url('https://thesportingshoppe.com/wp-content/uploads/2026/05/gun-care-header.webp') !important;
background-position: center center !important;
}
/* category banners tone change */
.shoppe-native-category-hero {
position: relative;
overflow: hidden;
}
.shoppe-native-category-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 92% at 50% 50%, rgba(244,237,224,0.94) 0%, rgba(244,237,224,0.60) 45%, rgba(244,237,224,0.10) 72%, rgba(244,237,224,0) 100%); /* centred scrim — keeps title legible, lets art read at the edges */
pointer-events: none;
z-index: 1;
}
.shoppe-native-category-hero-inner {
position: relative;
z-index: 2;
}
/* — mobile — */
@media only screen and (max-width: 980px) {
.shoppe-native-category-hero-inner { padding-left: 18px !important; padding-right: 18px !important; }
.shoppe-category-description { max-width: 520px; margin-left: auto !important; margin-right: auto !important; line-height: 1.6 !important; }
.category-hero-bg { padding: 28px 14px 26px !important; }
.category-hero-bg h1 { font-size: 32px !important; }
.category-hero-bg .shoppe-category-description,
.category-hero-bg p { font-size: 16px !important; line-height: 1.55 !important; }
}
/* =========================================================
03b · HEADER BACKGROUND
NOTE: the old catch-all that forced every _tb_header section to
bone has been removed — it was overriding (with !important) any
background you set on header sections in the Divi Builder. Set
each header section's background in the builder now.
#wfspb-top-bar is the free-shipping-bar plugin strip (if present).
========================================================= */
#wfspb-top-bar {
background-color: #1c1a17 !important;
}
/* Safety net: keep the logo/search + band header sections bone so a
late-loading stylesheet never flashes white. The flash-proof fix is
setting each section's Background to #f4ede0 in the Divi Builder. */
.et-l--header .et_pb_section:has(.ssh-logo),
.et-l--header .et_pb_section:has(.ssh-search),
.et-l--header .et_pb_section:has(.ssh-band) {
background-color: #f4ede0 !important;
}
#wfspb-top-bar,
#wfspb-top-bar a,
#wfspb-top-bar span {
color: #faf6ed !important;
}
/* =========================================================
03b-2 · HEADER SEARCH FIELD (.ssh-search)
Editorial search input that triggers the Doofinder panel.
Drop the .ssh-search markup into a Text/Code module anywhere in
the header; this styles it. Replaces AJAX Search Pro styling.
========================================================= */
.ssh-search {
position: relative !important;
width: 100% !important;
max-width: 520px !important;
margin: 0 auto !important;
}
.ssh-search .ic {
position: absolute !important;
left: 16px; top: 50%;
transform: translateY(-50%);
color: var(--ss-ink-mute, #6f665c) !important;
font-size: 15px !important;
pointer-events: none;
line-height: 1;
}
.ssh-search input,
.ssh-search input#ss-doofinder-search,
.ssh-search input.ss-doofinder-search {
width: 100% !important;
box-sizing: border-box !important;
height: auto !important;
padding: 13px 58px 13px 40px !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
background: var(--ss-paper, #faf6ed) !important;
font-family: var(--ss-sans, "Montserrat", sans-serif) !important;
font-size: 13px !important;
letter-spacing: 0.01em !important;
color: var(--ss-ink, #1c1a17) !important;
outline: none !important;
box-shadow: none !important;
}
.ssh-search input::placeholder { color: var(--ss-ink-mute, #6f665c) !important; opacity: 1; }
.ssh-search input:focus { border-color: var(--ss-ink, #1c1a17) !important; }
.ssh-search .kbd {
position: absolute !important;
right: 14px; top: 50%;
transform: translateY(-50%);
font-family: var(--ss-mono, "JetBrains Mono", monospace) !important;
font-size: 9px !important;
letter-spacing: 0.08em !important;
color: var(--ss-ink-mute, #6f665c) !important;
padding: 3px 6px !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
line-height: 1;
}
/* The Text module wrapper shouldn't constrain the field */
.et_pb_text_inner > .ssh-search { max-width: 520px; }
@media (max-width: 980px) {
.ssh-search { max-width: 100% !important; }
.ssh-search .kbd { display: none !important; }
}
/* Logo + brand side-by-side in their header column (was stacking) */
.et_pb_column:has(> .et_pb_module.ssh-logo) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 16px !important;
flex-wrap: nowrap !important;
}
.ssh-logo {
margin: 0 !important;
flex: 0 0 auto !important;
width: fit-content !important;
max-width: none !important;
}
.ssh-logo, .ssh-logo .et_pb_image_wrap, .ssh-logo a {
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Logo — controlled in CSS with HEADER-SCOPED specificity so it beats the
header Code module's `.ssh-logo img{height:64px!important}` rule (which
loads inline after this file and was overriding every size we set). */
.ssh-logo { align-self: center !important; }
.et-l--header .ssh-logo .et_pb_image_wrap,
.et-l--header .ssh-logo img,
.ssh-logo .et_pb_image_wrap,
.ssh-logo img {
width: auto !important;
height: 86px !important;
max-width: none !important;
max-height: none !important;
display: block !important;
margin: 0 !important;
align-self: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
object-fit: contain !important;
}
.ssh-brand {
flex: 0 1 auto !important;
border-left: 1px solid var(--ss-rule, #d8d2c8);
padding-left: 18px;
margin: 0 !important;
}
@media (max-width: 980px) {
.et_pb_column:has(> .et_pb_module.ssh-logo) { justify-content: center; }
}
/* Breathing room — loosen the header tiers (targets rows by content) */
.et-l--header .et_pb_row:has(.ssh-ann-l),
.et-l--header .et_pb_row:has(.ssh-band) {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
.et-l--header .et_pb_row:has(.ssh-logo) {
display: flex !important;
align-items: center !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
.et-l--header .et_pb_row:has(.ssh-nav) {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
/* a little more air between elements */
.ssh-band a { margin: 0 9px !important; }
.ssh-nav .et_pb_menu__menu nav > ul > li {
margin: 0 6px !important;
position: relative;
display: inline-flex !important;
align-items: center !important;
}
/* dot separator — small filled circle, flex-centered with the menu text */
.ssh-nav .et_pb_menu__menu nav > ul > li:not(:last-child)::after {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: #6f6453;
margin-left: 12px;
flex: 0 0 auto;
pointer-events: none;
}
/* nav links — 1px larger + underline that SLIDES in from the left on hover */
.ssh-nav .et_pb_menu__menu nav > ul > li > a {
font-size: 13px !important;
vertical-align: middle;
padding: 7px 12px !important;
border-bottom: 0 !important;
background-image: linear-gradient(to right, #8f2418 0 50%, transparent 50% 100%) !important;
background-repeat: no-repeat !important;
background-size: 200% 1.5px !important;
background-position: 100% 100% !important;
transition: background-position .35s ease, color .15s ease !important;
}
.ssh-nav .et_pb_menu__menu nav > ul > li > a:hover {
color: #8f2418 !important;
background-position: 0% 100% !important;
}
.ssh-nav .et_pb_menu__menu nav > ul > li.current-menu-item > a,
.ssh-nav .et_pb_menu__menu nav > ul > li.current_page_item > a,
.ssh-nav .et_pb_menu__menu nav > ul > li.current-menu-parent > a {
color: #8f2418 !important;
background-position: 0% 100% !important;
}
.et_pb_column:has(> .et_pb_module.ssh-logo) { gap: 20px !important; }
/* Header utility icons (phone = logged-in employee phone-orders, house = home).
Targets the icon menu (the Divi Menu that contains FontAwesome icons),
not the text nav. */
.et-l--header .et_pb_menu:has(i[class*="fa-"]) nav > ul {
display: flex !important;
align-items: center !important;
}
.et-l--header .et_pb_menu:has(i[class*="fa-"]) nav > ul > li {
display: flex !important;
align-items: center !important;
height: auto !important;
margin: 0 0 0 18px !important;
}
.et-l--header .et_pb_menu:has(i[class*="fa-"]) nav > ul > li > a { padding: 0 !important; display: flex; align-items: center; }
.et-l--header .et_pb_menu nav li a i.fa-phone,
.et-l--header .et_pb_menu nav li a i[class*="fa-house"] {
color: #4f4a43 !important;
font-size: 18px !important;
transition: color .15s ease, transform .15s ease !important;
}
.et-l--header .et_pb_menu nav li a:hover i.fa-phone,
.et-l--header .et_pb_menu nav li a:hover i[class*="fa-house"] {
color: #8f2418 !important;
transform: translateY(-1px);
}
/* §03b-4 · Header fine-tuning — hairline separators + subtle depth */
.et-l--header .et_pb_section:has(.ssh-band) {
border-bottom: 1px solid rgba(28, 26, 23, 0.05) !important;
}
.et-l--header .et_pb_section:has(.ssh-logo) {
padding-top: 6px !important;
padding-bottom: 6px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(28, 26, 23, 0.06) !important;
}
.ssh-brand { border-left-color: rgba(28, 26, 23, 0.12) !important; }
/* search field — soft inset + focus ring */
.ssh-search input,
.ssh-search input#ss-doofinder-search {
box-shadow: inset 0 1px 2px rgba(28, 26, 23, 0.05) !important;
}
.ssh-search input:focus {
box-shadow: inset 0 1px 2px rgba(28, 26, 23, 0.06),
0 0 0 3px rgba(143, 36, 24, 0.07) !important;
}
/* Vertically center logo / search / icons in the main header row */
.et-l--header .et_pb_row:has(.ssh-search) {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
.et-l--header .et_pb_row:has(.ssh-search) > .et_pb_column {
float: none !important;
align-self: center !important;
}
@media (max-width: 980px) {
.et-l--header .et_pb_row:has(.ssh-search) { flex-wrap: wrap !important; }
}
/* Announcement bar stays black on ALL breakpoints (was tan on mobile) */
.et-l--header .et_pb_section:has(.ssh-ann-l) {
background-color: #1c1a17 !important;
}
/* Mobile: the "STOCK UP … SHOP NOW" announcement text was too large for the
narrow row (wrapped + collided with the fixed drawer hamburger). Shrink it
and reserve right-side space so the ☰ trigger no longer crowds it. */
@media (max-width: 980px) {
.ssh-ann-l,
.ssh-ann-l .et_pb_text_inner,
.ssh-ann-l .et_pb_text_inner * {
font-size: 10px !important;
line-height: 1.35 !important;
letter-spacing: .04em !important;
}
.et-l--header .et_pb_section:has(.ssh-ann-l) .et_pb_row {
padding-right: 54px !important;
}
}
/* Quick-links band — bold "ORDERS OVER $100*" + oxblood links (match rendering) */
.ssh-band { font-weight: 600 !important; }
.ssh-band strong, html body .et-l--header .ssh-band strong { color: #8f2418 !important; font-weight: 700 !important; }
html body .et-l--header .ssh-band a,
html body .ssh-band a,
.ssh-band a { color: #8f2418 !important; font-weight: 600 !important; }
html body .et-l--header .ssh-band a:hover,
.ssh-band a:hover { color: #6f665c !important; }
/* Category banner — soft bottom shadow to ground the content below the hero */
.category-hero-bg {
box-shadow: 0 12px 30px -16px rgba(28, 26, 23, 0.22) !important;
}
/* =========================================================
07b · EDITORIAL "REFINE" SIDEBAR (matches archive rendering)
Header with active count, "Refined by" selection pills, Clear all.
Pairs with the FacetWP chip styling in §04 and pills in §06.
========================================================= */
.ss-refine-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 14px;
margin-bottom: 18px;
border-bottom: 1px solid var(--ss-ink, #1c1a17);
}
.ss-refine-title {
font-family: var(--ss-display, "Playfair Display", Georgia, serif);
font-size: 24px;
font-weight: 500;
color: var(--ss-ink, #1c1a17);
line-height: 1;
}
.ss-refine-count {
font-family: var(--ss-mono, "JetBrains Mono", monospace);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-ink-mute, #6f665c);
}
.ss-refine-selections { margin-bottom: 22px; }
.ss-refine-selections .facetwp-selections:empty { display: none; }
.ss-refine-selections .facetwp-selections::before {
content: "Refined by";
display: block;
font-family: var(--ss-mono, monospace);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-ink-mute, #6f665c);
margin-bottom: 10px;
}
/* Align ALL header tiers to one consistent content width + gutters
(announcement + logo row were full-bleed; band/nav were narrower —
so nothing lined up). This puts logo, STOCK UP text, search, cart,
and nav on the same left/right boundary. Section backgrounds stay
full-width; only the row CONTENT is aligned. */
.et-l--header .et_pb_row {
width: 100% !important;
max-width: 1600px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 36px !important;
padding-right: 36px !important;
box-sizing: border-box !important;
}
@media (max-width: 980px) {
.et-l--header .et_pb_row { padding-left: 20px !important; padding-right: 20px !important; }
}
/* Sticky main-nav on scroll — the nav tier (section 4) pins to the top
while the announcement/band/logo rows scroll away above it. */
.et-l--header .et_pb_section.et_pb_section_4_tb_header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
background-color: #f4ede0 !important;
box-shadow: 0 2px 14px rgba(28, 26, 23, 0.07);
}
/* offset for the WP admin bar when logged in */
body.admin-bar .et-l--header .et_pb_section.et_pb_section_4_tb_header { top: 32px !important; }
@media (max-width: 782px) {
body.admin-bar .et-l--header .et_pb_section.et_pb_section_4_tb_header { top: 46px !important; }
}
/* =========================================================
03c · HOMEPAGE INFO ROW (.ss-section-info)
Column dividers + balanced spacing for the FFL / Driven Shoots
/ Pre-Owned 3-column block merged into the homepage.
========================================================= */
.ss-section-info .et_pb_column { position: relative; padding-top: 0 !important; }
.ss-section-info .et_pb_column:not(:last-of-type)::after {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
right: -1px;
width: 1px;
background: var(--ss-rule, #ddd2bd);
}
.ss-section-info .et_pb_row { padding-top: 44px !important; padding-bottom: 44px !important; }
@media (max-width: 980px) {
/* stack cleanly on mobile — swap the side divider for a bottom hairline */
.ss-section-info .et_pb_column:not(:last-of-type)::after {
top: auto; bottom: -1px; left: 6px; right: 6px; width: auto; height: 1px;
}
}
/* =========================================================
03d · CTA BUTTON HOVER (.ss-cta-btn)
Solid oxblood button that darkens to oxblood-deep and nudges
its arrow on hover — matches the split editorial CTA.
========================================================= */
.ss-cta-btn { transition: background-color 160ms ease, gap 160ms ease; }
.ss-cta-btn:hover { background-color: #5e1a16 !important; gap: 14px !important; }
/* =========================================================
03e · RAM WATERMARK — reusable section background
Add the CSS class "ss-ram-watermark" to any Divi section or row
for the minimal cream + partial ram-on-shield motif.
========================================================= */
.ss-ram-watermark {
background-color: #f4ede0 !important;
background-image: url('//staging.thesportingshoppe.com/wp-content/themes/sporting-shoppe-v2/assets/preserve-watermark.png') !important;
background-repeat: no-repeat !important;
background-position: right center !important;
background-size: auto 92% !important;
}
@media (max-width: 980px) {
.ss-ram-watermark { background-size: auto 55% !important; background-position: right -30px bottom !important; }
}
/* =========================================================
04 · FACETWP CHIPS
========================================================= */
.shoppe-filter-block .facetwp-checkbox,
.archive #sidebar .facetwp-checkbox {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 8px 14px !important;
margin: 0 4px 6px 0 !important;
background: transparent !important;
border: 1px solid var(--ss-rule) !important;
border-radius: 0 !important;
font-family: var(--ss-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
color: var(--ss-ink) !important;
cursor: pointer;
transition: all 140ms ease;
background-image: none !important;
line-height: 1 !important;
}
.shoppe-filter-block .facetwp-checkbox:hover { border-color: var(--ss-ink) !important; background: var(--ss-bone) !important; }
.shoppe-filter-block .facetwp-checkbox.checked { background: var(--ss-ink) !important; color: var(--ss-paper) !important; border-color: var(--ss-ink) !important; }
.shoppe-filter-block .facetwp-checkbox.checked::before { content: "✓"; font-size: 10px; margin-right: 4px; }
.shoppe-filter-block .facetwp-counter,
.archive #sidebar .facetwp-counter {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
color: var(--ss-ink-mute) !important;
margin-left: 2px;
font-weight: 400;
}
.shoppe-filter-block .facetwp-checkbox.checked .facetwp-counter { color: rgba(244,237,224,0.7) !important; }
.shoppe-filter-block .facetwp-toggle,
.archive #sidebar .facetwp-toggle {
font-family: var(--ss-sans) !important;
font-size: 11px !important;
color: var(--ss-oxblood) !important;
text-decoration: underline;
letter-spacing: 0.02em;
font-weight: 500;
margin-top: 8px;
display: inline-block;
}
.archive #sidebar .facetwp-facet-categories .facetwp-checkbox {
display: flex !important;
width: 100%;
padding: 7px 12px !important;
margin: 0 0 4px !important;
background: transparent !important;
border: 0 !important;
border-left: 2px solid transparent !important;
font-size: 13px !important;
border-radius: 0 !important;
justify-content: space-between;
}
.archive #sidebar .facetwp-facet-categories .facetwp-checkbox:hover { background: var(--ss-bone) !important; border-left-color: var(--ss-oxblood) !important; }
.archive #sidebar .facetwp-facet-categories .facetwp-checkbox.checked { background: var(--ss-bone) !important; color: var(--ss-oxblood) !important; border-left-color: var(--ss-oxblood) !important; font-weight: 600; }
.archive #sidebar .facetwp-facet-categories .facetwp-checkbox.checked::before { content: none; }
/* =========================================================
05 · FACETWP SLIDER
========================================================= */
.shoppe-filter-block .facetwp-slider,
.archive #sidebar .facetwp-slider {
background: var(--ss-rule) !important;
height: 4px !important;
margin: 16px 0 12px !important;
}
.shoppe-filter-block .facetwp-slider .noUi-connect,
.shoppe-filter-block .facetwp-slider .ui-slider-range { background: var(--ss-oxblood) !important; }
.shoppe-filter-block .facetwp-slider .noUi-handle,
.shoppe-filter-block .facetwp-slider .ui-slider-handle {
background: #fff !important;
border: 1.5px solid var(--ss-ink) !important;
border-radius: 50% !important;
width: 14px !important; height: 14px !important;
box-shadow: none !important;
top: -5px !important;
}
.shoppe-filter-block .facetwp-slider .noUi-handle::before,
.shoppe-filter-block .facetwp-slider .noUi-handle::after { display: none !important; }
.shoppe-filter-block .facetwp-slider-label {
font-family: var(--ss-mono) !important;
font-size: 11px !important;
color: var(--ss-ink-mute) !important;
}
/* =========================================================
06 · FACETWP APPLIED PILLS / RESET / LOAD MORE
========================================================= */
.facetwp-selections > ul { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; list-style: none !important; }
.facetwp-selections > ul > li { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.facetwp-selection-label {
font-family: var(--ss-mono) !important;
font-size: 9px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-oxblood) !important;
font-weight: 500 !important;
padding: 0 8px 0 0 !important;
background: transparent !important;
border: 0 !important;
}
.facetwp-selection-value {
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
border: 0 !important;
border-radius: 0 !important;
padding: 8px 14px !important;
font-family: var(--ss-sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer;
transition: background 140ms ease;
}
.facetwp-selection-value::after { content: " ×"; opacity: 0.7; font-size: 14px; margin-left: 6px; }
.facetwp-selection-value:hover { background: var(--ss-oxblood) !important; }
/* =========================================================
06b · REFINE TOOLBAR (above the product grid)
"Refined by · pills · Clear all" left; result count + Sort right.
Rendered by the ss_refine_toolbar hook in functions.php using
FacetWP's built-in facetwp_display('selections').
========================================================= */
.ss-refinebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 14px 0;
margin: 0 0 26px;
border-bottom: 1px solid var(--ss-rule, #d8d2c8);
}
.ss-refinebar__left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-height: 30px;
}
.ss-refinebar__label {
font-family: var(--ss-mono, monospace);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ss-ink-mute, #6f665c);
}
/* hide the label + clear when nothing is active */
.ss-refinebar.is-empty .ss-refinebar__label,
.ss-refinebar.is-empty .ss-refinebar__clear { display: none; }
.ss-refinebar__clear {
font-family: var(--ss-mono, monospace);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ss-oxblood, #8f2418);
text-decoration: none;
border-bottom: 1px solid currentColor;
cursor: pointer;
padding-bottom: 1px;
}
.ss-refinebar__clear:hover { color: var(--ss-oxblood-deep, #741b12); }
.ss-refinebar .facetwp-selections { display: inline-block; }
.ss-refinebar__pills { display: inline-flex; align-items: center; }
.ss-refinebar .facetwp-selections > ul { margin: 0 !important; display: inline-flex !important; flex-wrap: wrap; }
.ss-refinebar__left { flex: 0 1 auto; }
.ss-refinebar__right {
display: flex;
align-items: center;
gap: 22px;
margin-left: auto;
}
.ss-refinebar__right .woocommerce-result-count {
margin: 0 !important;
font-family: var(--ss-serif, Georgia, serif) !important;
font-style: italic;
font-size: 14px !important;
color: var(--ss-ink-mute, #6f665c) !important;
}
.ss-refinebar__right .woocommerce-ordering { margin: 0 !important; }
/* hide the duplicate Woo result count that still renders below the bar */
.ss-refinebar ~ p.woocommerce-result-count,
#left-area > p.woocommerce-result-count { display: none !important; }
.facetwp-reset {
background: transparent !important;
color: var(--ss-ink-mute) !important;
border: 1px solid var(--ss-rule) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--ss-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
padding: 11px 14px !important;
transition: all 140ms ease !important;
}
.facetwp-reset:hover { background: var(--ss-ink) !important; color: var(--ss-paper) !important; border-color: var(--ss-ink) !important; box-shadow: none !important; transform: none !important; }
.facetwp-reset:before { content: "↺ " !important; margin-right: 4px; }
.facetwp-load-more {
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
border: 1px solid var(--ss-ink) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--ss-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 16px 36px !important;
transition: all 140ms ease !important;
}
.facetwp-load-more:hover { background: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; transform: none !important; }
/* =========================================================
07 · SIDEBAR
========================================================= */
.archive #sidebar {
background: var(--ss-paper) !important;
border: 1px solid var(--ss-rule) !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 28px 24px !important;
}
.archive #sidebar h4,
.archive .et_pb_widget h4,
.shoppe-filter-block h4 {
font-family: var(--ss-serif) !important;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--ss-ink) !important;
margin: 0 0 14px !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
}
.archive #sidebar h4::after,
.shoppe-filter-block h4::after {
content: ""; display: block; width: 18px; height: 1px;
background: var(--ss-oxblood);
position: absolute; bottom: -6px; left: 0;
}
.shoppe-filter-block { padding: 18px 0 20px !important; border-bottom: 1px solid var(--ss-rule) !important; }
.shoppe-filter-block:last-child { border-bottom: 0 !important; }
/* =========================================================
08 · BREADCRUMB / RESULT / SORT
========================================================= */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
}
.woocommerce-breadcrumb a:hover { color: var(--ss-oxblood) !important; }
.archive p.woocommerce-result-count {
font-family: var(--ss-serif) !important;
font-style: italic;
font-size: 16px !important;
color: var(--ss-ink-mute) !important;
}
.archive .woocommerce-ordering .orderby {
font-family: var(--ss-sans) !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
color: var(--ss-ink) !important;
background: var(--ss-paper) !important;
border: 1px solid var(--ss-rule) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 10px 32px 10px 14px !important;
}
.archive .woocommerce-ordering .orderby:hover,
.archive .woocommerce-ordering .orderby:focus { border-color: var(--ss-ink) !important; color: var(--ss-ink) !important; background: var(--ss-bone) !important; }
/* =========================================================
09 · PRODUCT GRID + CARDS
========================================================= */
.archive ul.products li.product {
padding: 20px 14px !important;
background: var(--ss-paper);
border: 1px solid transparent;
transition: all 200ms ease;
}
.archive ul.products li.product:hover { border-color: var(--ss-rule); background: #fff; }
.archive ul.products li.product a h2.woocommerce-loop-product__title,
.archive ul.products li.product .woocommerce-loop-product__title {
font-family: var(--ss-serif) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: left !important;
color: var(--ss-ink) !important;
padding: 6px 0 !important;
margin: 14px 0 4px !important;
}
.archive ul.products li.product .price,
.archive ul.products li.product .price .woocommerce-Price-amount {
font-family: var(--ss-serif) !important;
font-size: 20px !important;
font-weight: 500 !important;
color: var(--ss-ink) !important;
text-align: left !important;
}
.archive ul.products li.product .price del { color: var(--ss-ink-mute) !important; font-size: 14px !important; margin-right: 6px; }
.archive ul.products li.product .price ins { background: transparent !important; color: var(--ss-oxblood) !important; text-decoration: none !important; font-weight: 500; }
.archive ul.products li.product .button.add_to_cart_button { display: none !important; }
.woocommerce-page span.onsale,
.woocommerce span.onsale {
background: var(--ss-oxblood) !important;
border-radius: 0 !important;
height: auto !important;
width: auto !important;
padding: 4px 10px !important;
font-size: 9px !important;
font-family: var(--ss-mono) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
line-height: 1 !important;
}
.ss-card { display: block; text-decoration: none !important; color: inherit !important; }
.ss-card__top { display: flex; justify-content: space-between; align-items: flex-start; min-height: 18px; }
.ss-card__badge { font-family: var(--ss-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ss-oxblood); border-bottom: 1px solid var(--ss-oxblood); padding-bottom: 2px; }
.ss-card__wish { background: none !important; border: 0 !important; cursor: pointer; color: var(--ss-ink-mute); font-size: 16px; padding: 0 !important; line-height: 1; transition: color 140ms ease; }
.ss-card__wish:hover, .ss-card__wish.is-active { color: var(--ss-oxblood); }
.archive .ss-card__image,
.archive ul.products li.product .ss-card__image {
height: 200px;
display: flex !important;
align-items: center;
justify-content: center;
background: #ffffff !important;
background-image: none !important;
margin-top: 8px;
overflow: hidden;
position: relative;
padding: 14px !important;
}
.ss-card__image img {
max-width: 90% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
aspect-ratio: auto !important;
background: transparent !important;
transition: transform 280ms ease;
}
.ss-card:hover .ss-card__image img { transform: scale(1.04); }
.archive ul.products li.product img { background: transparent !important; mix-blend-mode: normal; }
.ss-card__brand { margin-top: 16px; font-family: var(--ss-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ss-ink-mute); }
.ss-card__name { margin: 6px 0 0 !important; font-family: var(--ss-serif) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.2 !important; color: var(--ss-ink) !important; text-align: left !important; padding: 0 !important; }
.ss-card__spec { margin-top: 8px; font-family: var(--ss-mono); font-size: 10px; color: var(--ss-ink-mute); letter-spacing: 0.06em; }
.ss-card__foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.ss-card__price, .ss-card__price .woocommerce-Price-amount { font-family: var(--ss-serif) !important; font-size: 20px !important; font-weight: 500 !important; color: var(--ss-ink) !important; }
.ss-card__price del { display: none; }
.ss-card__stock { font-family: var(--ss-mono); font-size: 9px; color: var(--ss-moss); letter-spacing: 0.1em; text-transform: uppercase; }
.ss-card__stock.is-out { color: var(--ss-oxblood); }
/* =========================================================
10 · MOBILE FILTER / FLYOUT
========================================================= */
@media only screen and (max-width: 980px) {
button.facetwp-flyout-open.shoppe-mobile-filter-button {
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
border: 1px solid var(--ss-ink) !important;
border-radius: 0 !important;
font-family: var(--ss-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 14px 18px !important;
box-shadow: none !important;
}
button.facetwp-flyout-open.shoppe-mobile-filter-button:hover { background: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; }
button.facetwp-flyout-open.shoppe-mobile-filter-button::before { content: "⟐ "; margin-right: 6px; }
}
.facetwp-flyout-wrap { background: var(--ss-paper) !important; border-left: 3px solid var(--ss-ink) !important; }
.facetwp-flyout-wrap .facetwp-flyout-close { background: transparent !important; color: var(--ss-ink) !important; font-family: var(--ss-mono); font-size: 18px; }
/* =========================================================
11 · NO PRODUCTS FOUND
========================================================= */
.woocommerce-no-products-found {
background: var(--ss-bone) !important;
border: 1px solid var(--ss-rule) !important;
border-left: 3px solid var(--ss-oxblood) !important;
border-radius: 0 !important;
padding: 32px 36px !important;
box-shadow: none !important;
}
.woocommerce-no-products-found .woocommerce-info:before { font-family: var(--ss-display); font-size: 28px !important; font-weight: 500; }
.woocommerce-no-products-found .woocommerce-info:after { font-family: var(--ss-serif); font-style: italic; font-size: 16px !important; }
/* =========================================================
12 · .ss-btn UTILITY BUTTONS
========================================================= */
.ss-btn, a.ss-btn, .et_pb_button.ss-btn {
display: inline-flex !important;
align-items: center; justify-content: center; gap: 8px;
padding: 13px 26px !important;
font-family: var(--ss-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
border: 1px solid var(--ss-ink) !important;
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
border-radius: 0 !important;
transition: all 160ms ease;
}
.ss-btn:hover { background: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; }
.ss-btn--ox { background: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; }
.ss-btn--ox:hover { background: var(--ss-oxblood-deep) !important; border-color: var(--ss-oxblood-deep) !important; }
.ss-btn--ghost { background: transparent !important; color: var(--ss-ink) !important; }
.ss-btn--ghost:hover { background: var(--ss-ink) !important; color: var(--ss-paper) !important; }
/* =========================================================
13 · PDP — TITLE / PRICE / DESCRIPTION / BREADCRUMB
========================================================= */
.single-product #et-boc .et-l .et_pb_section { padding: 0; }
.single-product .et_pb_wc_breadcrumb {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
margin-bottom: 28px !important;
}
.single-product .et_pb_wc_breadcrumb a { color: var(--ss-ink-mute) !important; }
.single-product .et_pb_wc_breadcrumb a:hover { color: var(--ss-oxblood) !important; }
.single-product .et_pb_wc_title h1,
.single-product .product_title.entry-title {
font-family: var(--ss-display) !important;
font-size: clamp(34px, 4vw, 44px) !important;
font-weight: 500 !important;
line-height: 1.1 !important;
letter-spacing: -0.015em !important;
color: var(--ss-ink) !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
.single-product .et_pb_wc_title h1 em,
.single-product .product_title em { font-style: italic; color: var(--ss-oxblood); }
.single-product .et_pb_wc_price p.price,
.single-product .et_pb_wc_price .price {
font-family: var(--ss-display) !important;
font-size: 36px !important;
font-weight: 500 !important;
color: var(--ss-ink) !important;
margin: 0 0 22px !important;
padding-bottom: 22px !important;
border-bottom: 1px solid var(--ss-rule) !important;
}
.single-product .et_pb_wc_price .price del { color: var(--ss-ink-mute) !important; font-size: 22px !important; margin-right: 10px; }
.single-product .et_pb_wc_price .price ins { background: transparent !important; color: var(--ss-oxblood) !important; text-decoration: none !important; }
.single-product .et_pb_wc_description {
font-family: var(--ss-sans) !important;
font-size: 14px !important;
line-height: 1.7 !important;
color: var(--ss-ink-soft) !important;
margin-bottom: 26px !important;
}
.single-product .et_pb_wc_description h2 { font-family: var(--ss-display) !important; font-size: 28px !important; font-weight: 500 !important; color: var(--ss-ink) !important; margin: 32px 0 16px !important; }
.single-product .et_pb_wc_description ul { list-style: none !important; padding-left: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.single-product .et_pb_wc_description ul li { padding: 12px 0 !important; border-bottom: 1px dotted var(--ss-rule) !important; font-size: 13px !important; display: flex !important; justify-content: space-between; align-items: baseline; }
.single-product .et_pb_wc_description ul li strong { font-family: var(--ss-mono) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ss-ink-mute) !important; font-weight: 500 !important; }
/* =========================================================
14 · PDP — IN STOCK PILL
========================================================= */
.single-product .stock::before, .single-product p.stock::before { content: none; }
.single-product .stock.in-stock,
.single-product .stock.out-of-stock {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 14px !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
float: none !important;
background: rgba(74, 83, 64, 0.06) !important;
border: 1px solid var(--ss-moss) !important;
color: var(--ss-moss) !important;
font-family: var(--ss-mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-align: left !important;
margin: 0 0 18px !important;
border-radius: 0 !important;
}
.single-product .stock.in-stock::before { content: "●" !important; display: inline-block !important; color: var(--ss-moss); font-size: 8px; line-height: 1; }
.single-product .stock.out-of-stock { color: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; background: rgba(143, 36, 24, 0.06) !important; }
.single-product .stock.out-of-stock::before { content: "○" !important; color: var(--ss-oxblood) !important; display: inline-block !important; font-size: 8px; line-height: 1; }
/* =========================================================
15 · PDP — FFL FORM
========================================================= */
.single-product .et_pb_wc_add_to_cart {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
}
.single-product .et_pb_wc_add_to_cart::before { content: "" !important; display: none !important; }
.single-product form.cart { position: relative; }
.single-product form.cart::before { content: none !important; }
.single-product form.cart:has(.wc-pao-addons-container) {
background: var(--ss-bone) !important;
border: 1px solid var(--ss-ink) !important;
padding: 28px 30px !important;
margin-top: 24px !important;
}
.single-product form.cart:has(.wc-pao-addons-container)::before {
content: "FEDERAL FIREARMS LICENSE" !important;
position: absolute;
top: -10px; left: 22px;
background: var(--ss-bone);
padding: 0 10px;
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ss-oxblood);
}
.single-product .wc-pao-addons-container,
.wc-pao-addons-container { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 0 !important; }
.wc-pao-addon-container { margin-bottom: 20px !important; }
.wc-pao-addon-heading, .wc-pao-addon-name {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
margin: 0 0 8px !important;
padding: 0 !important;
}
.wc-pao-addon-description, .wc-pao-addon-description p {
font-family: var(--ss-serif) !important;
font-style: italic !important;
font-size: 14px !important;
line-height: 1.5 !important;
color: var(--ss-ink-soft) !important;
margin: 0 0 12px !important;
max-width: 100% !important;
font-weight: 400 !important;
}
.wc-pao-addon-custom-text,
.single-product input[type="text"].wc-pao-addon-field {
width: 100% !important;
height: 44px !important;
line-height: 44px !important;
padding: 0 14px !important;
font-family: var(--ss-sans) !important;
font-size: 13px !important;
color: var(--ss-ink) !important;
background: var(--ss-paper) !important;
border: 1px solid var(--ss-rule) !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.wc-pao-addon-custom-text:focus { border-color: var(--ss-ink) !important; outline: 0; }
.wc-pao-addon-file-upload {
width: 100% !important;
padding: 14px 16px !important;
background: var(--ss-paper) !important;
border: 1px dashed var(--ss-rule) !important;
border-radius: 0 !important;
font-family: var(--ss-sans) !important;
font-size: 13px !important;
color: var(--ss-ink) !important;
cursor: pointer;
transition: border-color 140ms ease;
}
.wc-pao-addon-file-upload:hover { border-color: var(--ss-oxblood) !important; border-style: solid !important; }
.wc-pao-addon-wrap small { font-family: var(--ss-mono) !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ss-ink-mute) !important; margin-top: 8px !important; }
.single-product .quantity input.qty {
width: 64px !important;
height: 50px !important;
background: var(--ss-paper) !important;
border: 1px solid var(--ss-ink) !important;
border-radius: 0 !important;
font-family: var(--ss-mono) !important;
font-size: 14px !important;
color: var(--ss-ink) !important;
text-align: center !important;
box-shadow: none !important;
}
.single-product .single_add_to_cart_button,
.single-product button.single_add_to_cart_button {
padding: 16px 32px !important;
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
border: 1px solid var(--ss-ink) !important;
border-radius: 0 !important;
font-family: var(--ss-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: all 140ms ease;
box-shadow: none !important;
}
.single-product .single_add_to_cart_button:hover { background: var(--ss-oxblood) !important; border-color: var(--ss-oxblood) !important; transform: none !important; }
/* =========================================================
16 · PDP — IMAGES
========================================================= */
.single-product .et_pb_wc_images,
.single-product .woocommerce-product-gallery { background: var(--ss-bone); border: 1px solid var(--ss-rule-soft); padding: 0 !important; }
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce div.product div.images .flex-control-thumbs { background: transparent !important; }
.single-product .woocommerce div.product div.images .flex-control-thumbs li img { border: 1px solid var(--ss-rule-soft) !important; transition: border-color 140ms ease; cursor: pointer; }
.single-product .woocommerce div.product div.images .flex-control-thumbs li img:hover,
.single-product .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--ss-ink) !important; }
.single-product .woocommerce-product-gallery__trigger { background: var(--ss-paper) !important; border: 1px solid var(--ss-rule) !important; color: var(--ss-ink) !important; width: 36px !important; height: 36px !important; border-radius: 0 !important; }
/* =========================================================
17 · PDP — SPECS TABLE
========================================================= */
.single-product .et_pb_wc_additional_info,
.single-product .woocommerce-product-attributes { background: var(--ss-bone) !important; padding: 40px 0 !important; margin-top: 0 !important; }
.single-product .et_pb_wc_additional_info .woocommerce-Tabs-panel--additional_information,
.single-product table.woocommerce-product-attributes,
.single-product table.shop_attributes {
width: 100% !important;
max-width: 860px;
margin: 0 auto !important;
border: 0 !important;
background: transparent !important;
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 56px;
}
.single-product table.woocommerce-product-attributes tbody,
.single-product table.shop_attributes tbody { display: contents !important; }
.single-product table.woocommerce-product-attributes tr,
.single-product table.shop_attributes tr {
display: flex !important;
justify-content: space-between;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px dotted var(--ss-rule) !important;
background: transparent !important;
}
.single-product table.woocommerce-product-attributes th,
.single-product table.shop_attributes th {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
font-weight: 500 !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
width: auto !important;
}
.single-product table.woocommerce-product-attributes td,
.single-product table.shop_attributes td {
font-family: var(--ss-serif) !important;
font-size: 16px !important;
color: var(--ss-ink) !important;
font-weight: 500 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
text-align: right !important;
}
/* =========================================================
18 · PDP — META
========================================================= */
.single-product .et_pb_wc_meta,
.single-product .product_meta { background: var(--ss-paper); padding: 30px 0; border-top: 1px solid var(--ss-rule-soft); }
.single-product .product_meta > span {
display: block !important;
padding: 10px 0 !important;
border-bottom: 1px dotted var(--ss-rule);
font-family: var(--ss-sans);
font-size: 13px;
color: var(--ss-ink-soft);
line-height: 1.6;
}
.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as,
.single-product .product_meta .product_brand {
font-family: var(--ss-sans) !important;
font-size: 13px !important;
color: var(--ss-ink-soft) !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.single-product .product_meta a {
font-family: var(--ss-sans) !important;
font-size: 13px !important;
color: var(--ss-oxblood) !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: inline !important;
text-decoration: underline !important;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: var(--ss-rule);
}
.single-product .product_meta a:hover { color: var(--ss-oxblood-deep) !important; text-decoration-color: var(--ss-oxblood) !important; }
/* =========================================================
19 · PDP — REVIEWS
========================================================= */
.single-product .et_pb_wc_reviews,
.single-product #reviews { background: var(--ss-bone); padding: 50px 30px !important; text-align: center; }
.single-product #reviews h2.woocommerce-Reviews-title,
.single-product #reviews h3 { font-family: var(--ss-display) !important; font-size: 28px !important; font-weight: 500 !important; color: var(--ss-ink) !important; margin-bottom: 8px !important; }
.single-product #reviews .comment-form-rating label,
.single-product #reviews .comment-form label { font-family: var(--ss-mono) !important; font-size: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--ss-ink-mute) !important; font-weight: 500 !important; }
.single-product #reviews .comment-form textarea,
.single-product #reviews textarea {
width: 100% !important;
max-width: 600px;
padding: 14px !important;
border: 1px solid var(--ss-rule) !important;
background: var(--ss-paper) !important;
font-family: var(--ss-sans) !important;
font-size: 13px !important;
border-radius: 0 !important;
box-shadow: none !important;
resize: vertical;
}
.single-product #reviews .comment-form .submit,
.single-product #reviews #submit {
padding: 13px 28px !important;
background: var(--ss-oxblood) !important;
color: var(--ss-paper) !important;
border: 1px solid var(--ss-oxblood) !important;
border-radius: 0 !important;
font-family: var(--ss-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
box-shadow: none !important;
cursor: pointer;
}
.single-product #reviews .star-rating,
.single-product .stars a { color: var(--ss-accent-gold) !important; }
/* =========================================================
20 · PDP — WC TABS
========================================================= */
.single-product .et_pb_wc_tabs { background: var(--ss-bone) !important; padding: 50px 30px !important; margin: 0 !important; border: 0 !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls {
display: flex !important;
justify-content: center !important;
gap: 0 !important;
list-style: none !important;
padding: 0 !important;
margin: 0 0 36px !important;
border: 0 !important;
border-bottom: 1px solid var(--ss-rule) !important;
background: transparent !important;
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls::before,
.single-product .et_pb_wc_tabs .et_pb_tabs_controls::after { display: none !important; content: none !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li { background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; list-style: none !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li a {
display: block !important;
padding: 16px 28px !important;
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px !important;
font-family: var(--ss-sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
text-decoration: none !important;
line-height: 1 !important;
transition: all 140ms ease !important;
}
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.et_pb_tab_active a { border-bottom-color: var(--ss-oxblood) !important; color: var(--ss-oxblood) !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li:not(.et_pb_tab_active) a:hover { color: var(--ss-ink) !important; }
.single-product .et_pb_wc_tabs .et_pb_tabs_controls li.wccpf_fields_tab_tab { display: none !important; }
.single-product .et_pb_wc_tabs .et_pb_all_tabs,
.single-product .et_pb_wc_tabs .et_pb_tab { background: transparent !important; border: 0 !important; padding: 0 !important; }
.single-product .et_pb_wc_tabs .et_pb_tab_content { background: transparent !important; padding: 0 !important; max-width: 880px !important; margin: 0 auto !important; }
.single-product .et_pb_wc_tabs .et_pb_tab_content p,
.single-product .et_pb_wc_tabs .et_pb_tab_content li { font-family: var(--ss-sans) !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--ss-ink-soft) !important; }
.single-product .et_pb_wc_tabs .et_pb_tab_content ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 40px !important;
}
.single-product .et_pb_wc_tabs .et_pb_tab_content ul li { padding: 12px 0 !important; border-bottom: 1px dotted var(--ss-rule) !important; margin: 0 !important; }
.ss-tab-meta { max-width: 600px; margin: 0 auto; }
.ss-tab-meta-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px dotted var(--ss-rule); align-items: baseline; }
.ss-tab-meta-label { font-family: var(--ss-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ss-ink-mute); }
.ss-tab-meta-value { font-family: var(--ss-sans); font-size: 13px; color: var(--ss-ink-soft); }
.ss-tab-meta-value a { color: var(--ss-oxblood) !important; text-decoration: underline; text-underline-offset: 3px; }
.ss-tab-meta-value a:hover { color: var(--ss-oxblood-deep) !important; }
/* --- Stock WooCommerce product tabs → editorial style (centred, oxblood underline).
The live PDP renders .woocommerce-tabs .wc-tabs (NOT Divi's .et_pb_wc_tabs),
so it was falling back to the default grey/boxed/left-aligned look. --- */
.single-product .woocommerce-tabs ul.tabs.wc-tabs,
.single-product .woocommerce-tabs ul.wc-tabs {
display: flex !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 0 !important;
margin: 0 0 48px !important;
padding: 0 !important;
list-style: none !important;
border-bottom: 1px solid var(--ss-rule) !important;
}
.single-product .woocommerce-tabs ul.wc-tabs::before,
.single-product .woocommerce-tabs ul.wc-tabs::after { display: none !important; border: 0 !important; }
.single-product .woocommerce-tabs ul.wc-tabs li {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.single-product .woocommerce-tabs ul.wc-tabs li::before,
.single-product .woocommerce-tabs ul.wc-tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.wc-tabs li a {
display: block !important;
padding: 16px 28px !important;
margin-bottom: -1px !important;
font-family: var(--ss-sans) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute) !important;
border-bottom: 2px solid transparent !important;
transition: color .15s ease, border-color .15s ease !important;
}
.single-product .woocommerce-tabs ul.wc-tabs li a:hover {
color: var(--ss-oxblood) !important;
}
.single-product .woocommerce-tabs ul.wc-tabs li.active a,
.single-product .woocommerce-tabs ul.wc-tabs li[aria-selected="true"] a {
color: var(--ss-oxblood) !important;
border-bottom-color: var(--ss-oxblood) !important;
}
/* panel */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
max-width: 880px !important;
margin: 0 auto !important;
font-family: var(--ss-sans) !important;
color: var(--ss-ink-soft) !important;
}
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
font-family: var(--ss-serif) !important;
font-weight: 400 !important;
color: var(--ss-ink) !important;
}
/* =========================================================
21 · PDP — INDOOR RANGE PROMO (.ss-promo-dark)
========================================================= */
.ss-promo-dark {
background-image: url("data:image/svg+xml;utf8, in the ACF Headline to match
each slide's background art: word .
Plain (no class) stays gold for back-compat. Applies on both hero variants. */
.ss-hero__headline em.gold { color: #c9a159 !important; }
.ss-hero__headline em.red { color: #c0392b !important; }
.ss-hero__headline em.oxblood,
.ss-hero__headline em.crimson { color: #b14233 !important; }
.ss-hero__headline em.cream,
.ss-hero__headline em.white { color: #faf6ed !important; }
.ss-hero__headline em.sage,
.ss-hero__headline em.moss { color: #9caf88 !important; }
.ss-hero__headline em.ink { color: #1c1a17 !important; }
/* Same accent palette available inside the Copy field: …
(Copy is italic serif, so the class shows as a color change on that word). */
.ss-hero__copy em.gold { color: #c9a159 !important; }
.ss-hero__copy em.red { color: #c0392b !important; }
.ss-hero__copy em.oxblood,
.ss-hero__copy em.crimson { color: #b14233 !important; }
.ss-hero__copy em.cream,
.ss-hero__copy em.white { color: #faf6ed !important; }
.ss-hero__copy em.sage,
.ss-hero__copy em.moss { color: #9caf88 !important; }
.ss-hero__copy em.ink { color: #1c1a17 !important; }
/* Per-slide BUTTON COLOR PRESETS — ACF select `primary_button_style` /
`secondary_button_style` outputs `ss-btn--c-{value}` on either button.
Curated fill+text+hover pairings: luxe, contrast-safe, non-restrictive. */
.ss-hero .ss-btn--c-oxblood{ background:#8f2418 !important;color:#faf6ed !important;border-color:#8f2418 !important; }
.ss-hero .ss-btn--c-oxblood:hover{ background:#741b12 !important;border-color:#741b12 !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-ink{ background:#1c1a17 !important;color:#faf6ed !important;border-color:#1c1a17 !important; }
.ss-hero .ss-btn--c-ink:hover{ background:#8f2418 !important;border-color:#8f2418 !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-gold{ background:#c9a159 !important;color:#1c1a17 !important;border-color:#c9a159 !important; }
.ss-hero .ss-btn--c-gold:hover{ background:#1c1a17 !important;border-color:#1c1a17 !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-goldcream{ background:#c9a159 !important;color:#faf6ed !important;border-color:#c9a159 !important; }
.ss-hero .ss-btn--c-goldcream:hover{ background:#1c1a17 !important;border-color:#1c1a17 !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-cream{ background:#faf6ed !important;color:#1c1a17 !important;border-color:#faf6ed !important; }
.ss-hero .ss-btn--c-cream:hover{ background:#c9a159 !important;border-color:#c9a159 !important;color:#1c1a17 !important; }
.ss-hero .ss-btn--c-red{ background:#c0392b !important;color:#faf6ed !important;border-color:#c0392b !important; }
.ss-hero .ss-btn--c-red:hover{ background:#9e2b22 !important;border-color:#9e2b22 !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-creamred{ background:#faf6ed !important;color:#c0392b !important;border-color:#faf6ed !important; }
.ss-hero .ss-btn--c-creamred:hover{ background:#c0392b !important;border-color:#c0392b !important;color:#faf6ed !important; }
.ss-hero .ss-btn--c-ghost-cream{ background:transparent !important;color:#faf6ed !important;border-color:rgba(244,237,224,.6) !important; }
.ss-hero .ss-btn--c-ghost-cream:hover{ background:#faf6ed !important;color:#1c1a17 !important;border-color:#faf6ed !important; }
.ss-hero .ss-btn--c-ghost-ink{ background:transparent !important;color:#1c1a17 !important;border-color:rgba(28,26,23,.5) !important; }
.ss-hero .ss-btn--c-ghost-ink:hover{ background:#1c1a17 !important;color:#faf6ed !important;border-color:#1c1a17 !important; }
.ss-hero__copy {
font-family: var(--ss-serif);
font-style: italic;
font-size: clamp(15px, 1.4vw, 19px);
line-height: 1.5;
opacity: 0.88;
max-width: 480px;
margin: 0 0 32px;
color: var(--ss-paper);
}
.ss-hero__ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* — Buttons — */
.ss-btn {
display: inline-block;
padding: 16px 28px;
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ss-btn--primary {
background: var(--ss-paper);
color: var(--ss-ink);
}
.ss-btn--primary:hover {
background: #fff;
color: var(--ss-oxblood);
}
.ss-btn--ghost {
background: transparent;
color: var(--ss-paper);
border-color: rgba(244,237,224,0.42);
}
.ss-btn--ghost:hover {
border-color: var(--ss-paper);
background: rgba(244,237,224,0.08);
}
/* — Pagination — */
.ss-hero__pagination {
position: absolute;
bottom: 32px;
right: 80px;
display: flex;
align-items: center;
gap: 14px;
z-index: 5;
color: var(--ss-paper);
}
.ss-hero__dots { display: flex; gap: 8px; }
.ss-hero__dot {
width: 18px;
height: 2px;
background: rgba(244,237,224,0.32);
border: 0;
padding: 0;
cursor: pointer;
transition: width .3s ease, background .3s ease;
}
.ss-hero__dot.is-active {
width: 30px;
background: var(--ss-paper);
}
.ss-hero__nav {
width: 36px;
height: 36px;
border: 1px solid rgba(244,237,224,0.32);
border-radius: 999px;
background: transparent;
color: var(--ss-paper);
cursor: pointer;
font-size: 16px;
display: grid;
place-items: center;
transition: border-color .15s ease, background .15s ease;
}
.ss-hero__nav:hover {
border-color: var(--ss-paper);
background: rgba(244,237,224,0.08);
}
.ss-hero__counter {
font-family: var(--ss-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.65;
}
/* — BOLD variant — split type-left, image-right — */
.ss-hero--bold {
height: 780px;
background: var(--ss-bone);
}
.ss-hero--bold .ss-hero__slide {
display: grid;
grid-template-columns: 1fr 1.1fr;
}
.ss-hero--bold .ss-hero__media {
position: relative;
grid-column: 2;
}
.ss-hero--bold .ss-hero__media::after { display: none; }
.ss-hero--bold .ss-hero__content {
position: relative;
inset: auto;
padding: 72px 64px;
color: var(--ss-ink);
display: flex;
flex-direction: column;
justify-content: space-between;
grid-column: 1;
}
.ss-hero--bold .ss-hero__kicker { color: var(--ss-oxblood); opacity: 1; }
.ss-hero--bold .ss-hero__headline {
font-size: clamp(48px, 8vw, 108px);
line-height: 0.92;
letter-spacing: -0.025em;
color: var(--ss-ink);
}
.ss-hero--bold .ss-hero__headline em { color: var(--ss-oxblood); }
.ss-hero--bold .ss-hero__copy {
color: var(--ss-ink-soft);
opacity: 1;
max-width: 460px;
}
.ss-hero--bold .ss-btn--primary { background: var(--ss-ink); color: var(--ss-paper); }
.ss-hero--bold .ss-btn--primary:hover { background: var(--ss-oxblood); color: var(--ss-paper); }
.ss-hero--bold .ss-btn--ghost { color: var(--ss-ink); border-color: var(--ss-ink); }
.ss-hero--bold .ss-btn--ghost:hover { background: var(--ss-ink); color: var(--ss-paper); }
.ss-hero--bold .ss-hero__pagination {
position: static;
margin-top: 36px;
color: var(--ss-ink);
align-self: flex-start;
}
.ss-hero--bold .ss-hero__dot { background: rgba(28,26,23,0.22); }
.ss-hero--bold .ss-hero__dot.is-active { background: var(--ss-ink); }
.ss-hero--bold .ss-hero__nav {
color: var(--ss-ink);
border-color: rgba(28,26,23,0.22);
}
.ss-hero--bold .ss-hero__nav:hover {
border-color: var(--ss-ink);
background: rgba(28,26,23,0.06);
}
/* — Mobile — */
@media (max-width: 980px) {
.ss-hero { height: 560px; }
.ss-hero__content { padding: 0 24px; }
.ss-hero__pagination {
right: 24px;
bottom: 28px;
gap: 10px;
}
.ss-hero__dot { width: 14px; }
.ss-hero__dot.is-active { width: 22px; }
.ss-hero--bold { height: auto; }
.ss-hero--bold .ss-hero__slide {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.ss-hero--bold .ss-hero__media { grid-column: 1; grid-row: 1; height: 380px; }
.ss-hero--bold .ss-hero__content {
grid-column: 1;
grid-row: 2;
padding: 36px 24px;
}
.ss-hero--bold .ss-hero__pagination { margin-top: 24px; }
}
/* — Reduced motion — */
@media (prefers-reduced-motion: reduce) {
.ss-hero__slide,
.ss-hero__dot { transition: none; }
}
/* =========================================================
16 · HERO POLISH — overlay + readability
========================================================= */
.ss-hero__media::after {
background: linear-gradient(90deg,
rgba(28,26,23,0.88) 0%,
rgba(28,26,23,0.72) 35%,
rgba(28,26,23,0.4) 60%,
rgba(28,26,23,0) 85%) !important;
}
.ss-hero__content {
align-items: flex-start !important;
flex-direction: column !important;
justify-content: center !important;
max-width: 640px !important;
padding: 80px 80px 80px 80px !important;
}
.ss-hero__copy {
font-size: 18px !important;
line-height: 1.6 !important;
opacity: 1 !important;
color: #f4ede0 !important;
max-width: 460px !important;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.ss-hero__headline {
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
@media (max-width: 980px) {
.ss-hero__media::after {
background: linear-gradient(180deg,
rgba(28,26,23,0.5) 0%,
rgba(28,26,23,0.85) 60%,
rgba(28,26,23,0.9) 100%) !important;
}
/* Reserve room at the bottom of the text overlay so the
absolutely-positioned pagination cluster doesn't sit on top
of the copy or CTA. ~36px controls + ~60px breathing room. */
.ss-hero__content {
padding: 32px 24px 96px !important;
justify-content: flex-end !important;
align-items: flex-start !important;
}
}
/* — Phones — copy wraps to more lines, needs more room — */
@media (max-width: 600px) {
.ss-hero__content {
padding-bottom: 112px !important;
}
.ss-hero__headline {
font-size: clamp(34px, 8.5vw, 52px) !important;
line-height: 1.05 !important;
}
.ss-hero__copy {
font-size: 16px !important;
line-height: 1.5 !important;
}
/* Hide the inline counter in the kicker — the pagination already
shows 01 / 03, so on phones it's redundant noise. */
.ss-hero__kicker .ss-hero__counter-inline { display: none; }
}
/* — Honor the iPhone home-indicator safe area — */
@supports (padding: max(0px)) {
@media (max-width: 980px) {
.ss-hero__pagination {
bottom: max(28px, env(safe-area-inset-bottom)) !important;
}
}
}
/* =========================================================
END — Editorial Polish Layer v1.5
========================================================= */
/* =========================================================
14 · HOMEPAGE CTAs — hover states
========================================================= */
.ss-cta-dark { background: var(--ss-ink) !important; color: var(--ss-paper) !important; transition: background .15s ease, color .15s ease; }
.ss-cta-dark:hover { background: var(--ss-oxblood) !important; color: var(--ss-paper) !important; }
.ss-cta-dark span { display: inline-block; transition: transform .2s ease; }
.ss-cta-dark:hover span { transform: translateX(3px); }
.ss-cta-ghost { transition: background .15s ease, color .15s ease; }
.ss-cta-ghost:hover { background: var(--ss-ink) !important; color: var(--ss-paper) !important; }
/* =========================================================
15 · SHOPPE SPECIALS — robust grid for any product count (1–6)
========================================================= */
/* Hide any phantom non-product that might be injected by
FacetWP/Divi templates and throw off the grid alignment. */
.ss-section-picks ul.products > li:not(.product),
.ss-section-picks ul.products > li.product:empty {
display: none !important;
}
/* CRITICAL — WooCommerce adds clearfix ::before/::after to ul.products
for its default float layout. In a grid context those pseudo-elements
become grid items and steal cells, pushing real products into the
wrong slots. Kill them. */
.ss-section-picks ul.products::before,
.ss-section-picks ul.products::after,
.et_pb_text_inner > .woocommerce.columns-4 > ul.products.columns-4::before,
.et_pb_text_inner > .woocommerce.columns-4 > ul.products.columns-4::after {
content: none !important;
display: none !important;
}
.ss-section-picks .woocommerce ul.products,
.ss-section-picks ul.products,
.et_pb_section.ss-section-picks ul.products,
/* Fallback: also match the raw [products columns="4"] markup when
the shortcode lives inside a Divi Text module on any page (homepage,
preview, landing page, etc.). The structure is specific enough not
to bleed into archive/shop pages. */
.et_pb_text_inner > .woocommerce.columns-4 > ul.products.columns-4 {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
margin: 0 auto !important;
max-width: 1280px !important;
padding: 0 !important;
list-style: none !important;
justify-content: center !important;
}
.ss-section-picks ul.products li.product {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* Tighten the grid when there are fewer cards so they stay
centered rather than stretched edge-to-edge.
Uses :has() with .product (not just li) so phantom s
don't poison the count. */
.ss-section-picks ul.products:has(li.product:nth-of-type(1):last-of-type) {
grid-template-columns: minmax(280px, 360px) !important;
}
.ss-section-picks ul.products:has(li.product:nth-of-type(2):last-of-type) {
grid-template-columns: repeat(2, minmax(280px, 360px)) !important;
}
.ss-section-picks ul.products:has(li.product:nth-of-type(3):last-of-type) {
grid-template-columns: repeat(3, minmax(280px, 320px)) !important;
}
/* 4 products → default repeat(4, …) above already handles it.
5 or 6 products → 3-column grid keeps rows balanced. */
.ss-section-picks ul.products:has(li.product:nth-of-type(5)) {
grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
}
@media (max-width: 980px) {
.ss-section-picks .woocommerce ul.products,
.ss-section-picks ul.products,
.et_pb_section.ss-section-picks ul.products,
.et_pb_text_inner > .woocommerce.columns-4 > ul.products.columns-4,
.ss-section-picks ul.products:has(li.product:last-of-type) {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 540px) {
.ss-section-picks .woocommerce ul.products,
.ss-section-picks ul.products,
.et_pb_section.ss-section-picks ul.products,
.et_pb_text_inner > .woocommerce.columns-4 > ul.products.columns-4,
.ss-section-picks ul.products:has(li.product:last-of-type) {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
15b · EDITORIAL PRODUCT CARD STYLES (used by content-product.php)
========================================================= */
.ss-card {
display: flex !important;
flex-direction: column !important;
background: var(--ss-paper) !important;
border: 1px solid var(--ss-rule-soft, #e0d8c3) !important;
text-decoration: none !important;
color: var(--ss-ink) !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
position: relative !important;
overflow: hidden !important;
height: 100% !important;
}
.ss-card:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 28px -8px rgba(28,26,23,0.18) !important;
border-color: var(--ss-rule, #d8cdb6) !important;
}
.ss-card__top {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: 14px !important;
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
z-index: 3 !important;
pointer-events: none !important;
}
.ss-card__top > * { pointer-events: auto; }
.ss-card__badge {
background: var(--ss-ink) !important;
color: var(--ss-paper) !important;
padding: 5px 10px !important;
font-family: var(--ss-mono) !important;
font-size: 9px !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
}
.ss-card__wish {
background: transparent !important;
border: 0 !important;
color: var(--ss-ink) !important;
font-size: 22px !important;
line-height: 1 !important;
cursor: pointer !important;
padding: 0 !important;
text-shadow: 0 1px 4px rgba(244,237,224,0.8);
transition: color .15s ease, transform .15s ease !important;
}
.ss-card__wish:hover { transform: scale(1.1); }
.ss-card__wish.is-active { color: var(--ss-oxblood) !important; }
.ss-card__image {
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
position: relative !important;
background: var(--ss-bone-2, #efe7d3) !important;
width: 100% !important;
display: block !important;
}
.ss-card__image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
display: block !important;
transition: transform .5s ease !important;
}
.ss-card:hover .ss-card__image img { transform: scale(1.04); }
.ss-card__quickview {
position: absolute !important;
bottom: 14px !important;
left: 50% !important;
transform: translateX(-50%) translateY(10px) !important;
background: var(--ss-paper) !important;
color: var(--ss-ink) !important;
padding: 8px 16px !important;
font-family: var(--ss-sans) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
opacity: 0 !important;
transition: all .25s ease !important;
pointer-events: none !important;
}
.ss-card:hover .ss-card__quickview {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
.ss-card__brand {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--ss-oxblood) !important;
font-weight: 600 !important;
padding: 18px 18px 6px !important;
margin: 0 !important;
}
.ss-card__name {
font-family: var(--ss-display) !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
color: var(--ss-ink) !important;
padding: 0 18px 6px !important;
margin: 0 !important;
letter-spacing: -0.005em !important;
}
.ss-card__spec {
font-family: var(--ss-mono) !important;
font-size: 10px !important;
letter-spacing: 0.1em !important;
color: var(--ss-ink-soft) !important;
text-transform: uppercase !important;
padding: 0 18px 14px !important;
}
.ss-card__foot {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
padding: 14px 18px 18px !important;
margin-top: auto !important;
border-top: 1px solid var(--ss-rule-soft, #e0d8c3) !important;
}
.ss-card__price {
font-family: var(--ss-display) !important;
font-size: 20px !important;
color: var(--ss-ink) !important;
font-weight: 500 !important;
}
.ss-card__price .woocommerce-Price-amount { font-family: inherit !important; }
.ss-card__stock {
font-family: var(--ss-mono) !important;
font-size: 9px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--ss-oxblood) !important;
}
.ss-card__stock.is-out { color: var(--ss-ink-mute, #7a6f63) !important; }
/* =====================================================================
17 · HOMEPAGE PROMO STRIP (v2)
Powered by [ss_promo slot="top|middle|bottom"] shortcode + ACF Pro
"homepage_promos" Flexible Content field. Four variants:
· ss-promo--ribbon → short transitional band (NEW)
· ss-promo--banner → cinematic magazine cover
· ss-promo--split → editioned print plate
· ss-promo--tricard → museum exhibition wall
===================================================================== */
/* ---------------------------------------------------------------------
Base tokens shared across all variants
--------------------------------------------------------------------- */
.ss-promo-strip { width: 100%; }
.ss-promo {
--pad-y: 110px;
--pad-x: 88px;
--rule: rgba(28,26,23,0.16);
--rule-light: rgba(244,237,224,0.22);
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
}
/* Two stacked promos in the same slot — gentle hairline between them */
.ss-promo-strip > .ss-promo + .ss-promo {
border-top: 1px solid rgba(28,26,23,0.06);
}
/* Tones */
.ss-promo.ss-promo--tone-bone { background: var(--ss-bone, #efe7d3); color: var(--ss-ink, #1c1a17); }
.ss-promo.ss-promo--tone-paper { background: var(--ss-paper, #f4ede0); color: var(--ss-ink, #1c1a17); }
.ss-promo.ss-promo--tone-ink { background: var(--ss-ink, #1c1a17); color: var(--ss-paper, #f4ede0); --rule: var(--rule-light); }
.ss-promo.ss-promo--tone-oxblood { background: var(--ss-oxblood, #7a2520); color: var(--ss-paper, #f4ede0); --rule: var(--rule-light); }
/* Device visibility — for the "Show on" picker */
@media (max-width: 768px) {
.ss-promo--hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
.ss-promo--hide-desktop { display: none !important; }
}
/* Shared type — overridden per-variant where needed */
.ss-promo__kicker {
font-family: var(--ss-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ss-oxblood);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.ss-promo--tone-ink .ss-promo__kicker,
.ss-promo--tone-oxblood .ss-promo__kicker { color: var(--ss-accent-gold, #c9a159); }
.ss-promo__kicker-dot {
width: 5px; height: 5px;
background: currentColor;
transform: rotate(45deg);
flex: 0 0 5px;
opacity: 0.85;
}
.ss-promo__headline {
font-family: var(--ss-display);
font-size: clamp(40px, 5vw, 68px);
line-height: 1.02;
letter-spacing: -0.018em;
font-weight: 400;
margin: 0 0 22px;
text-wrap: balance;
}
.ss-promo__headline em {
font-style: italic;
color: var(--ss-oxblood);
}
/* Force cream-paper headline + body on dark tones (beats Divi h2 default) */
.ss-promo.ss-promo--tone-ink .ss-promo__headline,
.ss-promo.ss-promo--tone-oxblood .ss-promo__headline {
color: var(--ss-paper, #faf6ed) !important;
}
.ss-promo.ss-promo--tone-ink .ss-promo__headline em,
.ss-promo.ss-promo--tone-oxblood .ss-promo__headline em {
color: var(--ss-accent-gold, #c9a159) !important;
}
.ss-promo__copy {
font-family: var(--ss-serif);
font-style: italic;
font-size: 18px;
line-height: 1.55;
margin: 0 0 36px;
max-width: 480px;
opacity: 0.86;
}
.ss-promo.ss-promo--tone-ink .ss-promo__copy,
.ss-promo.ss-promo--tone-oxblood .ss-promo__copy {
color: var(--ss-paper, #faf6ed);
opacity: 0.9;
}
/* Hairline rules */
.ss-promo__rule {
display: block;
width: 64px;
height: 1px;
background: currentColor;
opacity: 0.4;
margin-bottom: 24px;
}
.ss-promo__rule--short { width: 40px; margin: 24px 0; }
.ss-promo__rule--center { margin-left: auto; margin-right: auto; }
.ss-promo.ss-promo--tone-ink .ss-promo__rule,
.ss-promo.ss-promo--tone-oxblood .ss-promo__rule {
background: var(--ss-paper, #faf6ed);
opacity: 0.55;
}
/* CTAs */
.ss-promo__cta {
display: inline-flex;
align-items: baseline;
gap: 14px;
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
text-decoration: none;
color: inherit;
padding-bottom: 6px;
border-bottom: 1px solid currentColor;
transition: gap .25s ease, opacity .2s ease;
}
.ss-promo__cta:hover { gap: 22px; opacity: 0.85; }
.ss-promo__cta-arrow { display: inline-block; transition: transform .25s ease; }
.ss-promo__cta:hover .ss-promo__cta-arrow { transform: translateX(4px); }
.ss-promo__cta--solid {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border: 1px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 11px;
font-weight: 700;
transition: background .2s ease, color .2s ease, gap .25s ease;
text-decoration: none;
color: inherit;
}
.ss-promo__cta--solid:hover { gap: 16px; }
.ss-promo--tone-bone .ss-promo__cta--solid:hover,
.ss-promo--tone-paper .ss-promo__cta--solid:hover {
background: var(--ss-ink); color: var(--ss-paper); border-color: var(--ss-ink);
}
.ss-promo--tone-ink .ss-promo__cta--solid,
.ss-promo--tone-oxblood .ss-promo__cta--solid {
color: var(--ss-paper, #faf6ed);
border-color: var(--ss-paper, #faf6ed);
}
.ss-promo--tone-ink .ss-promo__cta--solid:hover,
.ss-promo--tone-oxblood .ss-promo__cta--solid:hover {
background: var(--ss-paper, #faf6ed);
color: var(--ss-ink, #1c1a17);
border-color: var(--ss-paper, #faf6ed);
}
/* =====================================================================
Variant · EDITORIAL RIBBON (NEW — short transitional band)
===================================================================== */
.ss-promo--ribbon {
padding: 36px 88px;
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 48px;
align-items: center;
min-height: 180px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.ss-promo--ribbon .ss-promo__thumb {
width: 140px;
height: 140px;
position: relative;
overflow: hidden;
display: block;
box-shadow: 0 12px 30px -16px rgba(28,26,23,0.4);
}
.ss-promo--ribbon .ss-promo__thumb::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba(244,237,224,0.5);
mix-blend-mode: overlay;
pointer-events: none;
z-index: 2;
}
.ss-promo--ribbon .ss-promo__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .8s ease;
}
.ss-promo--ribbon .ss-promo__thumb:hover img { transform: scale(1.06); }
.ss-promo--ribbon .ss-promo__center {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.ss-promo--ribbon .ss-promo__kicker { margin-bottom: 4px; }
.ss-promo--ribbon .ss-promo__headline {
font-size: clamp(26px, 2.6vw, 36px);
margin: 0;
line-height: 1.1;
letter-spacing: -0.01em;
}
.ss-promo--ribbon .ss-promo__copy {
font-size: 15px;
margin: 4px 0 0;
max-width: 560px;
opacity: 0.78;
}
.ss-promo--ribbon .ss-promo__cta {
flex-shrink: 0;
align-self: center;
}
/* =====================================================================
Variant · EDITORIAL BANNER
===================================================================== */
.ss-promo--banner {
min-height: 620px;
display: grid;
align-items: end;
padding: var(--pad-y) var(--pad-x);
}
.ss-promo--banner .ss-promo__media {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.02); transition: transform 1.2s ease; z-index: 0;
}
.ss-promo--banner:hover .ss-promo__media { transform: scale(1.06); }
.ss-promo--banner .ss-promo__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(28,26,23,0) 50%, rgba(28,26,23,0.55) 100%),
linear-gradient(90deg, rgba(28,26,23,0.78) 0%, rgba(28,26,23,0.4) 45%, rgba(28,26,23,0) 75%);
}
.ss-promo--banner .ss-promo__rail {
position: absolute;
top: 50%; right: 38px;
transform: rotate(90deg) translateX(50%);
transform-origin: right center;
font-family: var(--ss-mono);
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--ss-accent-gold, #c9a159);
opacity: 0.7;
z-index: 3;
white-space: nowrap;
}
.ss-promo--banner .ss-promo__rail::before {
content: '';
display: inline-block;
width: 48px; height: 1px;
background: currentColor;
vertical-align: middle;
margin-right: 14px;
opacity: 0.6;
}
.ss-promo--banner .ss-promo__overlay {
position: relative;
z-index: 2;
max-width: 620px;
color: var(--ss-paper);
}
.ss-promo--banner .ss-promo__rule {
width: 80px;
background: var(--ss-accent-gold, #c9a159);
opacity: 1;
margin-bottom: 22px;
}
.ss-promo--banner .ss-promo__kicker { color: var(--ss-accent-gold, #c9a159); }
.ss-promo--banner .ss-promo__headline {
font-size: clamp(44px, 5.6vw, 80px);
color: var(--ss-paper);
text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.ss-promo--banner .ss-promo__copy {
color: var(--ss-paper);
text-shadow: 0 1px 10px rgba(0,0,0,0.4);
opacity: 0.94;
}
/* =====================================================================
Variant · EDITORIAL SPLIT
===================================================================== */
.ss-promo--split {
display: grid;
grid-template-columns: 1.05fr 1fr;
min-height: 640px;
align-items: stretch;
}
.ss-promo--split.ss-promo--flip { grid-template-columns: 1fr 1.05fr; }
.ss-promo--split.ss-promo--flip .ss-promo__plate { order: 2; }
.ss-promo--split .ss-promo__plate {
position: relative;
margin: 0;
padding: 56px 56px 56px;
display: flex;
flex-direction: column;
}
.ss-promo--split .ss-promo__plate-mat {
position: relative;
flex: 1;
overflow: hidden;
box-shadow: 0 24px 60px -24px rgba(28,26,23,0.35);
}
.ss-promo--split .ss-promo__plate-mat::before {
content: '';
position: absolute; inset: 14px;
border: 1px solid rgba(244,237,224,0.55);
pointer-events: none; z-index: 2;
mix-blend-mode: overlay;
}
.ss-promo--split .ss-promo__plate-mat img {
width: 100%; height: 100%;
min-height: 460px;
object-fit: cover;
display: block;
transition: transform 1s ease;
}
.ss-promo--split:hover .ss-promo__plate-mat img { transform: scale(1.03); }
.ss-promo--split .ss-promo__caption {
font-family: var(--ss-serif);
font-style: italic;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--ss-ink-soft, #5a4f43);
text-align: center;
padding: 22px 8px 0;
opacity: 0.78;
}
.ss-promo--split.ss-promo--tone-ink .ss-promo__caption,
.ss-promo--split.ss-promo--tone-oxblood .ss-promo__caption {
color: var(--ss-paper);
opacity: 0.65;
}
.ss-promo--split .ss-promo__content {
display: flex;
align-items: center;
padding: var(--pad-y) var(--pad-x);
}
.ss-promo--split .ss-promo__content-inner { max-width: 520px; }
.ss-promo--split .ss-promo__headline { font-size: clamp(36px, 4.2vw, 56px); }
/* =====================================================================
Variant · TRI-CARD
===================================================================== */
.ss-promo--tricard {
padding: var(--pad-y) var(--pad-x);
}
.ss-promo--tricard .ss-promo__head {
text-align: center;
max-width: 720px;
margin: 0 auto 64px;
}
.ss-promo--tricard .ss-promo__head .ss-promo__kicker { justify-content: center; }
.ss-promo--tricard .ss-promo__headline { font-size: clamp(36px, 4vw, 56px); }
.ss-promo--tricard .ss-promo__copy {
margin: 0 auto;
text-align: center;
max-width: 520px;
}
.ss-promo--tricard .ss-promo__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1280px;
margin: 0 auto;
}
.ss-promo__card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform .35s ease;
}
.ss-promo__card:hover { transform: translateY(-4px); }
.ss-promo__card-no {
font-family: var(--ss-mono);
font-size: 10px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ss-oxblood);
opacity: 0.85;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--rule);
}
.ss-promo--tricard.ss-promo--tone-ink .ss-promo__card-no,
.ss-promo--tricard.ss-promo--tone-oxblood .ss-promo__card-no { color: var(--ss-accent-gold, #c9a159); }
.ss-promo__card-media {
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--ss-bone);
position: relative;
}
.ss-promo__card-media::after {
content: '';
position: absolute; inset: 12px;
border: 1px solid rgba(244,237,224,0.45);
mix-blend-mode: overlay;
pointer-events: none;
}
.ss-promo__card-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .8s ease;
}
.ss-promo__card:hover .ss-promo__card-media img { transform: scale(1.05); }
.ss-promo__card-body {
padding: 24px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ss-promo__card-kicker {
font-family: var(--ss-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ss-oxblood);
opacity: 0.9;
}
.ss-promo--tricard.ss-promo--tone-ink .ss-promo__card-kicker,
.ss-promo--tricard.ss-promo--tone-oxblood .ss-promo__card-kicker { color: var(--ss-accent-gold, #c9a159); }
.ss-promo__card-headline {
font-family: var(--ss-display);
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.005em;
color: inherit;
}
.ss-promo__card-headline em { font-style: italic; color: var(--ss-oxblood); }
.ss-promo--tricard.ss-promo--tone-ink .ss-promo__card-headline em,
.ss-promo--tricard.ss-promo--tone-oxblood .ss-promo__card-headline em { color: var(--ss-accent-gold, #c9a159); }
.ss-promo__card-rule {
display: block;
width: 28px;
height: 1px;
background: currentColor;
opacity: 0.35;
margin: 6px 0 4px;
}
.ss-promo__card-link {
font-family: var(--ss-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap .25s ease;
}
.ss-promo__card:hover .ss-promo__card-link { gap: 14px; }
/* =====================================================================
Mobile / Tablet
===================================================================== */
@media (max-width: 1024px) {
.ss-promo { --pad-y: 72px; --pad-x: 36px; }
/* Ribbon — stacks to a tidy card */
.ss-promo--ribbon {
grid-template-columns: 1fr;
gap: 22px;
padding: 32px 36px;
min-height: 0;
text-align: center;
}
.ss-promo--ribbon .ss-promo__thumb {
margin: 0 auto;
width: 120px; height: 120px;
}
.ss-promo--ribbon .ss-promo__center { align-items: center; }
.ss-promo--ribbon .ss-promo__kicker { justify-content: center; }
.ss-promo--ribbon .ss-promo__cta { align-self: center; }
.ss-promo--split { grid-template-columns: 1fr; min-height: 0; }
.ss-promo--split.ss-promo--flip { grid-template-columns: 1fr; }
.ss-promo--split.ss-promo--flip .ss-promo__plate { order: 1; }
.ss-promo--split .ss-promo__plate { padding: 36px 28px 36px; }
.ss-promo--split .ss-promo__plate-mat img { min-height: 360px; }
.ss-promo--split .ss-promo__content { padding: 56px 36px 72px; }
.ss-promo--tricard .ss-promo__cards { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ss-promo--tricard .ss-promo__head { margin-bottom: 44px; }
.ss-promo--banner { min-height: 520px; padding: 64px 36px; }
.ss-promo--banner .ss-promo__rail { display: none; }
}
@media (max-width: 640px) {
.ss-promo { --pad-y: 56px; --pad-x: 24px; }
.ss-promo__headline { font-size: clamp(32px, 8.5vw, 48px) !important; }
.ss-promo__copy { font-size: 16px; line-height: 1.5; }
.ss-promo--ribbon { padding: 28px 24px; }
.ss-promo--ribbon .ss-promo__headline { font-size: clamp(22px, 7vw, 28px) !important; }
.ss-promo--banner { min-height: 460px; padding: 48px 24px; }
.ss-promo--banner .ss-promo__scrim {
background: linear-gradient(180deg, rgba(28,26,23,0.2) 0%, rgba(28,26,23,0.85) 80%);
}
.ss-promo--split .ss-promo__plate { padding: 24px 20px; }
.ss-promo--split .ss-promo__content { padding: 40px 24px 56px; }
.ss-promo--tricard .ss-promo__cards { grid-template-columns: 1fr; gap: 32px; }
.ss-promo--tricard .ss-promo__head { margin-bottom: 36px; }
.ss-promo__card-headline { font-size: 22px; }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
.ss-promo--banner:hover .ss-promo__media,
.ss-promo--split:hover .ss-promo__plate-mat img,
.ss-promo__card:hover .ss-promo__card-media img,
.ss-promo--ribbon .ss-promo__thumb:hover img,
.ss-promo__card:hover { transform: none !important; }
.ss-promo__cta:hover,
.ss-promo__cta--solid:hover,
.ss-promo__card:hover .ss-promo__card-link { gap: inherit !important; }
}
/* =====================================================================
Variant · EDITORIAL COMPACT (postcard-sized — best for overlay slot)
===================================================================== */
.ss-promo--compact {
min-height: 340px;
max-width: 560px;
margin: 0 auto;
display: grid;
align-items: end;
padding: 36px 40px;
position: relative;
}
.ss-promo--compact .ss-promo__media {
position: absolute; inset: 0;
background-size: cover; background-position: center; z-index: 0;
}
.ss-promo--compact .ss-promo__scrim {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(28,26,23,0) 30%, rgba(28,26,23,0.75) 100%),
linear-gradient(90deg, rgba(28,26,23,0.65) 0%, rgba(28,26,23,0.25) 60%, rgba(28,26,23,0) 100%);
}
.ss-promo--compact.ss-promo--tone-oxblood .ss-promo__scrim {
background:
linear-gradient(180deg, rgba(122,37,32,0) 20%, rgba(122,37,32,0.8) 100%),
linear-gradient(90deg, rgba(122,37,32,0.7) 0%, rgba(122,37,32,0.3) 60%, rgba(122,37,32,0) 100%);
}
.ss-promo--compact .ss-promo__overlay { position: relative; z-index: 2; color: var(--ss-paper); max-width: 420px; }
.ss-promo--compact .ss-promo__kicker { color: var(--ss-accent-gold, #c9a159); margin-bottom: 12px; }
.ss-promo--compact .ss-promo__headline {
font-family: var(--ss-display);
font-size: clamp(28px, 4vw, 38px);
line-height: 1.05; letter-spacing: -0.012em;
color: var(--ss-paper) !important;
text-shadow: 0 2px 14px rgba(0,0,0,0.4);
margin: 0 0 22px;
}
.ss-promo--compact .ss-promo__headline em { color: var(--ss-accent-gold, #c9a159) !important; font-style: italic; }
.ss-promo--compact .ss-promo__cta--solid {
color: var(--ss-paper);
border-color: var(--ss-paper);
}
.ss-promo--compact .ss-promo__cta--solid:hover {
background: var(--ss-paper); color: var(--ss-ink); border-color: var(--ss-paper);
}
@media (max-width: 600px) {
.ss-promo--compact { min-height: 280px; padding: 28px 24px; }
.ss-promo--compact .ss-promo__headline { font-size: clamp(22px, 7vw, 28px) !important; }
}
/* =========================================================
30 · MIGRATED FROM DIVI THEME OPTIONS → CUSTOM CSS
Moved here 2026-05-29 so all CSS lives in one file.
NOTE: the old `.category-hero-bg { background:#f8f6f3 !important; ... }`
rule was intentionally DROPPED — it wiped the category banner
background-image. The hero is fully handled in §03 above.
After uploading this file, EMPTY the Divi Custom CSS panel.
========================================================= */
.woocommerce-page span.onsale, .woocommerce span.onsale {
height: 58px!important;
width: 58px!important;
left: unset !important;
position: absolute;
top: 0px!important;
right: 0 !important;
}
.archive .et_pb_widget a.widget_sp_image-image-link img {
margin-bottom: 20px;
}
.facetwp-checkbox.checked {
background-image: url('/wp-content/uploads/2026/05/checked-icon.png') !important;
}
.facetwp-slider-reset {
border: 1px solid #000000 !important;
background: #000000 !important;
box-shadow: none !important;
color: #fff;
padding: 7px 10px !important;
font-size: 14px;
margin-top: 20px;
width: 100%;
}
.facetwp-slider-reset:hover{
background:transparent !important;
color:#000 !important;
}
.et-db #et-boc .et-l .et_pb_column_3_tb_body {
border-left-width: 0px !important;
padding-top: 0vh;
padding-bottom: 0vh;
}
.archive .et_pb_widget h4 {
border-bottom: 1px solid #8f8c8c66;
margin-bottom: 16px;
}
.archive .et_pb_widget .facetwp-facet span{
color:#000;
}
.archive #et-boc .et-l .et_pb_column_2_tb_body{
background: #f8f6f3;
height: max-content;
margin-left: 0px;
}
.archive #et-boc .et-l .et_pb_widget_area_left{
background:transparent !important;
}
.archive .et_pb_widget {
padding-top: 0px;
border-bottom: 0px solid #872518;
padding-bottom: 0px;
}
.tippy-content.tippy-content-centered-horizontal {
background-color: transparent !important;
box-shadow: none !important;
}
.tippy-content.tippy-content-centered-horizontal .dl-noboxshadow > .et_pb_section:first-child {
box-shadow: 1px 1px 9px 0px rgba(219,219,219,0.92) !important;
}
.mega-wrapper{
box-shadow:0 0 10px #ddd !important;
}
.dmmbasic-theme .divimegapro-flexheight {
max-width: 1320px;
margin: auto;
padding: 0 20px;
}
footer{
z-index: 99;
position: relative;
}
.sticky-menu{
position: fixed !important;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
animation: smoothSticky 0.3s ease;
margin: 0 !important;
box-shadow: 0 0 10px 3px #d3d3d3;
}
@keyframes smoothSticky{
from{
transform: translateY(-100%);
}
to{
transform: translateY(0);
}
}
.et-db #et-boc .mega-list-menu .et-menu.nav li:nth-child(1) a{
font-weight: normal !important;
text-transform: capitalize !important;
font-family: Open Sans, Arial, sans-serif !important;
letter-spacing: 0;
}
.head-menu-column {
width: -webkit-fill-available !important;
padding-left: 35px !important;
}
/* Only mega-list-menu mobile hamburger disable */
@media only screen and (max-width: 980px){
.head-main-box {
padding-bottom: 15px !important;
}
.header-main-menus {
background-color: transparent !important;
}
.head-all-menu-section{
position: unset !important;
}
.head-all-menu-row{
position: unset !important;
}
.head-menu-column {
position: absolute !important;
top: 35%;
right: 0px;
left:0px;
padding: 0 !important;
}
.head-main-box .head-menu-col {
width: 50% !important;
order: 2;
}
.head-main-box .head-logo-col {
width: 50% !important;
order:1;
}
.head-main-box .head-search-box {
order: 3;
width: 100%;
}
.mega-list-menu .et_mobile_nav_menu{
display:none !important;
}
.mega-list-menu .et_pb_menu__menu{
display:flex !important;
justify-content: start !important;
width: 100%;
}
.mega-list-menu .et_pb_menu__wrap{
justify-content:flex-start;
}
.mega-list-menu ul.et-menu{
display:flex !important;
flex-wrap:wrap;
}
.mega-wrapper {
height: 80vh;
overflow: scroll;
}
.mega-wrapper .mega-list-menu {
border: none !important;
border-bottom: 1px solid #ddd !important;
padding-bottom: 20px;
}
.mega-wrapper .mega-list-menu:last-child {
border: none !important;
border-bottom: 0px solid #ddd !important;
padding-bottom: 0px;
}
.et-db #et-boc .mega-list-menu .et-menu.nav li:nth-child(1) a {
font-size: 18px !important;
margin-bottom: 0px;
}
.header-main-menus .et_pb_menu__wrap {
justify-content: end !important;
}
ul#mobile_menu40{
top:240% !important;
}
.head-all-menu-row{
padding:0px !important;
}
}
@media only screen and (min-device-width: 981px) and (max-device-width: 1260px){
ul#menu-new-header li {
padding: 0 22px 0 0 !important;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 980px){
.inner-head-wrap{
max-width: 100% !important;
width: 98%;
}
.head-menu-column {
top: 44%;
}
}
@media only screen and (max-width: 767px){
footer .et-popup-login .et_pb_row.et_pb_row_3_tb_footer.et_pb_gutters1 {
height: 100%;
display: flex;
align-items: center;
padding-bottom: 0px !important;
}
footer .et-popup-login .et_pb_column.et_pb_column_4_4.et_pb_column_7_tb_footer{
position:unset;
}
footer .et-popup-login .et_pb_column.et_pb_column_4_4.et_pb_column_7_tb_footer .et_pb_blurb_0_tb_footer.et_pb_blurb {
height: 50px;
margin-bottom: 10px!important;
width: 50px;
position: absolute;
top: 10px;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 766px){
.head-menu-column {
top: 45%;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.head-menu-column {
top: 46% !important;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 980px){
.et_mobile_device .tippy-popper.tippy-trigger-mobilemenu.tippy-reference-header {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
max-width: 92% !important;
margin: auto !important;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0px 0px 10px 1px #ddd;
}
}
/* =========================================================
30 · QUADMENU — navbar centering + kill white gap
QuadMenu Pro mega nav. Center the items, remove the white
strip between the dark bar and the mega panel.
========================================================= */
/* Center the nav items in the dark bar */
.quadmenu-navbar .quadmenu-container > ul.quadmenu,
.quadmenu-navbar ul.quadmenu.quadmenu-nav {
justify-content: center !important;
}
/* Kill the white gap: panel sits flush under the bar */
.quadmenu-navbar .quadmenu-dropdown-menu {
margin-top: 0 !important;
border-top: 0 !important;
}
/* Remove any stray bottom margin/padding on the navbar row that
shows as a white strip under the dark bar */
.et-l--header .et_pb_module:has(.quadmenu-navbar),
.et-l--header .quadmenu-navbar {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* ---- Hide the down-arrow carets ---- */
#quadmenu .quadmenu-caret { display: none !important; }
/* ---- Red dot after items that have a panel ---- */
#quadmenu.quadmenu-is-horizontal > ul > li.quadmenu-item-type-mega > a > .quadmenu-text::after,
#quadmenu.quadmenu-is-horizontal > ul > li.menu-item-has-children > a > .quadmenu-text::after {
content: "";
display: inline-block;
width: 4px; height: 4px; border-radius: 50%;
background: #8f2418;
vertical-align: middle;
margin-left: 8px;
pointer-events: none;
}
/* ---- Left-to-right underline on hover (background-size method —
robust to QuadMenu's DOM nesting; excluded from dropdown panels) ---- */
#quadmenu.quadmenu-is-horizontal li.quadmenu-item > a {
background-image: linear-gradient(#8f2418, #8f2418);
background-repeat: no-repeat;
background-position: 20px 86%;
background-size: 0% 1px;
transition: background-size .28s ease;
}
#quadmenu.quadmenu-is-horizontal li.quadmenu-item > a:hover {
background-size: calc(100% - 40px) 1px;
}
/* never inside the mega panels */
#quadmenu .quadmenu-dropdown-menu a {
background-image: none !important;
}
/* ---- Edge-to-edge mega panel: zero the inner Bootstrap row/column
padding so content reaches the viewport edges. Safe (no position/
transform changes), so the hover bridge stays intact. ---- */
#quadmenu .quadmenu-dropdown-menu {
background: #faf6ed !important;
padding: 0 !important;
border-bottom: 1px solid #d8d2c8 !important;
box-shadow: 0 18px 40px -20px rgba(28,26,23,0.28) !important;
z-index: 99990 !important;
}
/* keep the whole nav bar above page content (category hero title, etc.) */
#quadmenu, .et-l--header .et_pb_section:has(#quadmenu) { position: relative; z-index: 99980 !important; }
/* whole header layout above ALL page content; category hero forced below */
.et-l--header { position: relative; z-index: 100000 !important; }
.category-hero-bg,
.shoppe-native-category-hero,
.shoppe-native-category-hero-inner { z-index: 1 !important; }
#quadmenu .quadmenu-dropdown-menu .quadmenu-row {
padding-left: 0 !important; padding-right: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
#quadmenu .quadmenu-dropdown-menu .quadmenu-item-type-column,
#quadmenu .quadmenu-dropdown-menu .quadmenu-item-type-column > div,
#quadmenu .quadmenu-dropdown-menu .quadmenu-item-type-column > div > ul {
padding-left: 0 !important; padding-right: 0 !important;
padding-top: 0 !important; padding-bottom: 0 !important;
margin: 0 !important;
}
#quadmenu .quadmenu-dropdown-menu .ssmm { width: 100% !important; }
/* Thin hairline above each panel's bottom CTA band (the last block in the
panel). Adds the top border without re-pasting any panel HTML. */
#quadmenu .quadmenu-dropdown-menu .ssmm > div:last-child {
border-top: 1px solid #ece4d3 !important;
}
/* ---- Kill the panel's max-height scrollbar (let it auto-size) ---- */
#quadmenu .quadmenu-dropdown-menu .quadmenu-row,
#quadmenu .quadmenu-dropdown-menu .quadmenu-row.ps-container {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
#quadmenu .quadmenu-dropdown-menu .ps-scrollbar-x-rail,
#quadmenu .quadmenu-dropdown-menu .ps-scrollbar-y-rail {
display: none !important;
}
/* ---- Disable QuadMenu's OWN mobile menu ≤980px ----
The theme-rendered Concept-1 drawer (inc/mobile-nav.php) owns mobile
navigation, so hide QuadMenu's collapsed navbar + hamburger entirely
below 980px. This also prevents the 768–980px gap where QuadMenu is
still in desktop mode while the drawer is already visible (double menu).
Scoped + CSS-only — QuadMenu's settings are left untouched. */
@media only screen and (max-width: 980px) {
#quadmenu,
.quadmenu-navbar,
.quadmenu-navbar-toggle,
.et-l--header .et_pb_module:has(#quadmenu) {
display: none !important;
}
}
/* =========================================================
31 · MAP + DOOFINDER FULLSCREEN
Migrated out of Divi → Theme Options → Custom CSS so all
styling lives in the theme stylesheet (one source of truth).
========================================================= */
.ss-map-fill {
border: 1px solid #ddd2bd !important; /* same hairline as the cards */
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: 0 18px 40px -28px rgba(28,26,23,.40) !important;
background: #f4ede0 !important; /* cream while tiles load */
}
.dfd-fullscreen .dfd-layer,
.dfd-card {
background: #f5f1e6 !important;
}
.dfd-fullscreen .dfd-initial-content .dfd-popular-searches {
background: #f5f1e6 !important;
}
.dfd-fullscreen .dfd-searchbox {
background: #f5f1e6 !important;
border-bottom: 1px solid var(--df-accent-primary, hsl(217, 95%, 52%));
}
/* =========================================================
32 · PHONE ORDERS — Manual/Phone Order page (IgniteWoo OPC)
PURE CSS RE-SKIN. Every rule is scoped to the plugin's own
wrapper `.one_page_checkout_page`, which contains ONLY the
order form (the Divi header/footer sit outside it). No plugin
PHP / markup / JS is touched — the sales team's workflow,
field names, and submit logic are unchanged.
Page: /phone-orders/ · shortcode [woocommerce_manual_phone_order]
========================================================= */
/* ---- 32.0 · canvas + base type ---- */
.one_page_checkout_page {
font-family: var(--ss-sans, "Montserrat", sans-serif);
color: var(--ss-ink, #1c1a17);
}
.one_page_checkout_page h3,
.one_page_checkout_page h4 {
font-family: var(--ss-display, "Playfair Display", Georgia, serif) !important;
font-weight: 500 !important;
color: var(--ss-ink, #1c1a17) !important;
letter-spacing: -0.01em;
}
/* the "(Search by …)" helper note next to a heading */
.one_page_checkout_page .opc_choose_products_desc {
font-family: var(--ss-serif, "Cormorant Garamond", Georgia, serif);
font-style: italic;
font-size: 0.95rem;
color: var(--ss-ink-mute, #6f665c);
}
/* required asterisks + help tips → oxblood */
.one_page_checkout_page .required { color: var(--ss-oxblood, #8f2418) !important; }
.one_page_checkout_page abbr.required { border: 0 !important; text-decoration: none !important; }
/* ---- 32.1 · info bars (load order / coupon toggle) ---- */
.one_page_checkout_page .woocommerce-info {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-left: 3px solid var(--ss-oxblood, #8f2418) !important;
border-radius: 0 !important;
color: var(--ss-ink, #1c1a17) !important;
font-family: var(--ss-sans, "Montserrat", sans-serif);
font-size: 13px;
box-shadow: none !important;
}
.one_page_checkout_page .woocommerce-info::before { display: none !important; }
.one_page_checkout_page .woocommerce-info a {
color: var(--ss-oxblood, #8f2418) !important;
text-decoration: underline;
text-underline-offset: 3px;
}
.one_page_checkout_page .woocommerce-info a:hover { color: var(--ss-oxblood-deep, #741b12) !important; }
/* boxed sub-panels: load existing order + add fees */
.one_page_checkout_page #one_page_load_order,
.one_page_checkout_page .opc_add_fee_wrap {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
}
.one_page_checkout_page .opc_add_fee_wrap p.fee_heading {
font-family: var(--ss-mono, "JetBrains Mono", monospace) !important;
font-size: 11px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute, #6f665c) !important;
font-weight: 500 !important;
}
/* ---- 32.2 · form fields (inputs / selects / textarea / select2) ---- */
.one_page_checkout_page input[type="text"],
.one_page_checkout_page input[type="email"],
.one_page_checkout_page input[type="tel"],
.one_page_checkout_page input[type="number"],
.one_page_checkout_page input[type="password"],
.one_page_checkout_page input[type="search"],
.one_page_checkout_page textarea,
.one_page_checkout_page select,
.one_page_checkout_page .select2-container--default .select2-selection--single,
.one_page_checkout_page .select2-container--default .select2-selection--multiple {
background: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--ss-ink, #1c1a17) !important;
font-family: var(--ss-sans, "Montserrat", sans-serif) !important;
box-sizing: border-box;
}
.one_page_checkout_page input:focus,
.one_page_checkout_page textarea:focus,
.one_page_checkout_page select:focus,
.one_page_checkout_page .select2-container--default.select2-container--focus .select2-selection--single,
.one_page_checkout_page .select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: var(--ss-oxblood, #8f2418) !important;
outline: 0 !important;
box-shadow: 0 0 0 2px rgba(143,36,24,0.12) !important;
}
.one_page_checkout_page .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--ss-ink, #1c1a17) !important;
}
/* ---- 32.3 · buttons ---- */
/* Primary editorial button — used for every OPC .button by default */
.one_page_checkout_page .button,
.one_page_checkout_page input.button,
.one_page_checkout_page button.button,
.one_page_checkout_page #place_order,
.one_page_checkout_page .checkout-button {
background: var(--ss-ink, #1c1a17) !important;
color: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-ink, #1c1a17) !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--ss-sans, "Montserrat", sans-serif) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-shadow: none !important;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
}
.one_page_checkout_page .button:hover,
.one_page_checkout_page input.button:hover,
.one_page_checkout_page button.button:hover,
.one_page_checkout_page #place_order:hover,
.one_page_checkout_page .checkout-button:hover {
background: var(--ss-oxblood, #8f2418) !important;
border-color: var(--ss-oxblood, #8f2418) !important;
color: var(--ss-paper, #faf6ed) !important;
}
/* The committing actions read oxblood so they stand out from utility buttons */
.one_page_checkout_page #place_order,
.one_page_checkout_page .checkout-button,
.one_page_checkout_page input.submit[value="Assign Customer to Order"] {
background: var(--ss-oxblood, #8f2418) !important;
border-color: var(--ss-oxblood, #8f2418) !important;
}
.one_page_checkout_page #place_order:hover,
.one_page_checkout_page .checkout-button:hover {
background: var(--ss-oxblood-deep, #741b12) !important;
border-color: var(--ss-oxblood-deep, #741b12) !important;
}
/* Neutral / cancel utility buttons → ghost */
.one_page_checkout_page .clear_entire_cart.button,
.one_page_checkout_page .opc_arbitrary_cancel.button {
background: transparent !important;
color: var(--ss-ink, #1c1a17) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
}
.one_page_checkout_page .clear_entire_cart.button:hover,
.one_page_checkout_page .opc_arbitrary_cancel.button:hover {
background: var(--ss-ink, #1c1a17) !important;
color: var(--ss-paper, #faf6ed) !important;
border-color: var(--ss-ink, #1c1a17) !important;
}
/* remove-from-cart "×" + fee delete stay oxblood text, no box */
.one_page_checkout_page .opc_remove_from_cart,
.one_page_checkout_page .opc_fee_table .fee_action a {
color: var(--ss-oxblood, #8f2418) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ---- 32.4 · cart + order-review tables ---- */
.one_page_checkout_page #opc_table_layout,
.one_page_checkout_page #order_review,
.one_page_checkout_page .shop_table {
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
background: var(--ss-paper, #faf6ed) !important;
}
.one_page_checkout_page .shop_table thead th,
.one_page_checkout_page #order_review th {
font-family: var(--ss-mono, "JetBrains Mono", monospace) !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--ss-ink-mute, #6f665c) !important;
font-weight: 500 !important;
background: var(--ss-bone, #f4ede0) !important;
}
.one_page_checkout_page #order_review .order-total .amount,
.one_page_checkout_page .shop_table tfoot .order-total .amount {
font-family: var(--ss-serif, "Cormorant Garamond", Georgia, serif) !important;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--ss-oxblood, #8f2418) !important;
}
.one_page_checkout_page .opc_fee_table th {
background: var(--ss-bone, #f4ede0) !important;
font-family: var(--ss-mono, monospace) !important;
font-size: 10px !important;
letter-spacing: 0.14em !important;
}
/* ---- 32.5 · payment box (neutralise default lavender) ---- */
.one_page_checkout_page .woocommerce-checkout-payment,
.one_page_checkout_page #payment {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
}
.one_page_checkout_page #payment ul.payment_methods {
background: transparent !important;
border-bottom: 1px solid var(--ss-rule, #d8d2c8) !important;
}
.one_page_checkout_page #payment div.payment_box {
background: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
color: var(--ss-ink, #1c1a17) !important;
}
/* the little callout arrow on the payment box → match paper */
.one_page_checkout_page #payment div.payment_box::before {
border-bottom-color: var(--ss-paper, #faf6ed) !important;
}
.one_page_checkout_page #payment .wc-saved-payment-methods,
.one_page_checkout_page #payment label { color: var(--ss-ink, #1c1a17) !important; }
/* ---- 32.6 · create-account + misc panels ---- */
.one_page_checkout_page .create-account {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
}
.one_page_checkout_page .opc_cart_is_empty {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
color: var(--ss-ink-soft, #4f4a43) !important;
}
/* ---- 32.7 · DYNAMIC STATES (appear while using the form) ---- */
/* Success notices ("Cart updated", "Customer assigned", etc.) — moss accent */
.one_page_checkout_page .woocommerce-message {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-left: 3px solid var(--ss-moss, #4a5340) !important;
border-radius: 0 !important;
color: var(--ss-ink, #1c1a17) !important;
box-shadow: none !important;
}
.one_page_checkout_page .woocommerce-message::before { color: var(--ss-moss, #4a5340) !important; }
/* Error / validation notices — oxblood accent */
.one_page_checkout_page .woocommerce-error {
background: var(--ss-bone, #f4ede0) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-left: 3px solid var(--ss-oxblood, #8f2418) !important;
border-radius: 0 !important;
color: var(--ss-ink, #1c1a17) !important;
box-shadow: none !important;
}
.one_page_checkout_page .woocommerce-error::before { color: var(--ss-oxblood, #8f2418) !important; }
.one_page_checkout_page .woocommerce-message a,
.one_page_checkout_page .woocommerce-error a { color: var(--ss-oxblood, #8f2418) !important; }
/* Field validation states */
.one_page_checkout_page .woocommerce-invalid input.input-text,
.one_page_checkout_page .woocommerce-invalid select {
border-color: var(--ss-oxblood, #8f2418) !important;
box-shadow: 0 0 0 2px rgba(143,36,24,0.12) !important;
}
.one_page_checkout_page .woocommerce-validated input.input-text,
.one_page_checkout_page .woocommerce-validated select {
border-color: var(--ss-moss, #4a5340) !important;
}
/* OPC cart table — replace the cold grey row stripes with paper / bone */
.one_page_checkout_page #opc_table_layout tr td,
.one_page_checkout_page table.one_page_product_list tr td {
background-color: var(--ss-paper, #faf6ed) !important;
}
.one_page_checkout_page #opc_table_layout tr:nth-child(2n) td {
background-color: var(--ss-bone, #f4ede0) !important;
}
.one_page_checkout_page ul.one_page_product_list li,
.one_page_checkout_page table.one_page_product_list tr {
border-color: var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
}
.one_page_checkout_page ul.one_page_product_list li:hover {
background-color: var(--ss-bone, #f4ede0) !important;
}
/* order-review highlighted/updating rows + shipping rows */
.one_page_checkout_page #order_review tr.cart-subtotal td,
.one_page_checkout_page #order_review tr.shipping td,
.one_page_checkout_page #order_review tr.order-total td { background: transparent !important; }
/* Plugin "cart updated" overlay notice (rendered on , plugin-only class) */
.ign_one_page_cart_updated_wrap {
background: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-ink, #1c1a17) !important;
border-radius: 0 !important;
color: var(--ss-ink, #1c1a17) !important;
font-family: var(--ss-serif, "Cormorant Garamond", Georgia, serif) !important;
}
/* Arbitrary-product popup (rendered on , plugin-only ids/classes) */
.ign-simple-popup-content {
background: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
}
.ign-simple-popup-content .close { background: var(--ss-bone, #f4ede0) !important; }
.ign-simple-popup-content .simple-popup-title {
font-family: var(--ss-display, "Playfair Display", Georgia, serif) !important;
font-weight: 500 !important;
}
.ign-simple-popup-content .arbitrary_error { border-color: var(--ss-oxblood, #8f2418) !important; }
#ign-simple-popup-backdrop { background: rgba(28,26,23,0.6) !important; }
/* =========================================================
33 · SELECT2 — GLOBAL EDITORIAL SKIN (cosmetic only)
Select2 / selectWoo is used site-wide (checkout country &
state, variation pickers, the phone-order product/customer
search, etc.). This skins all of them consistently.
APPEARANCE ONLY — no JS, no minimum-characters change, no
AJAX/behavior touched, so every search keeps working as-is.
Also fixes the collapsed multi-select typing field that made
the phone-order product search feel like it wouldn't accept
input.
========================================================= */
/* Selection boxes (closed state) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background: var(--ss-paper, #faf6ed) !important;
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--ss-ink, #1c1a17) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--ss-oxblood, #8f2418) !important;
box-shadow: 0 0 0 2px rgba(143,36,24,0.12) !important;
}
/* Multi-select: make the inline typing field usably wide (the fix for the
"cursor won't let me type" feel) + editorial chips */
.select2-container--default .select2-selection--multiple { min-height: 46px !important; }
.select2-container--default .select2-selection--multiple .select2-search__field {
width: auto !important;
min-width: 14em !important;
height: 32px !important;
font-size: 15px !important;
font-family: var(--ss-sans, "Montserrat", sans-serif) !important;
color: var(--ss-ink, #1c1a17) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background: var(--ss-ink, #1c1a17) !important;
color: var(--ss-paper, #faf6ed) !important;
border: 0 !important;
border-radius: 0 !important;
padding: 4px 10px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: rgba(244,237,224,0.7) !important;
}
/* Dropdown panel + the search box inside it */
.select2-container--default .select2-dropdown {
border: 1px solid var(--ss-ink, #1c1a17) !important;
border-radius: 0 !important;
box-shadow: 0 18px 40px -20px rgba(28,26,23,0.35) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--ss-rule, #d8d2c8) !important;
border-radius: 0 !important;
font-size: 16px !important; /* 16px also prevents mobile zoom-jump */
padding: 10px 12px !important;
}
/* Typed-text visibility — Divi can render the Select2 search text invisible
(white fill / 0 opacity). Force it readable in BOTH the inline multi-select
field and the dropdown search box. (Ported from the site's prior custom CSS.) */
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search__field {
color: var(--ss-ink, #1c1a17) !important;
-webkit-text-fill-color: var(--ss-ink, #1c1a17) !important;
background: var(--ss-paper, #faf6ed) !important;
opacity: 1 !important;
text-shadow: none !important;
text-indent: 0 !important;
caret-color: var(--ss-oxblood, #8f2418) !important;
}
.select2-search--inline, .select2-search--dropdown { opacity: 1 !important; }
.select2-search__field::placeholder { color: var(--ss-ink-mute, #6f665c) !important; opacity: 1 !important; }
/* Result rows + the highlighted option */
.select2-container--default .select2-results__option { padding: 10px 12px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--ss-oxblood, #8f2418) !important;
color: var(--ss-paper, #faf6ed) !important;
}
/* Status text: "Searching…" / "Please enter 3 or more characters" — make it
clearly visible so reps can tell what the search is doing */
.select2-container--default .select2-results__message {
font-family: var(--ss-mono, "JetBrains Mono", monospace) !important;
font-size: 12px !important;
letter-spacing: 0.06em !important;
color: var(--ss-oxblood, #8f2418) !important;
padding: 14px 12px !important;
}
/* =========================================================
34 · HEADER "SERVICES & MORE" DROPDOWN (.sshd)
Compact editorial dropdown rendered by the [ss_services_menu]
shortcode from a WordPress menu (Appearance → Menus). Not a
mega menu. Links are managed in the Menus UI — no HTML editing.
Add the CSS class `sshd-ext` to a menu item for the mono-caps
treatment (e.g. NRA / USCCA); a hairline rule auto-precedes the
first such item.
========================================================= */
.sshd { display:inline-block; position:relative; font-family: var(--ss-sans, "Montserrat", sans-serif); }
.sshd, .sshd * { box-sizing:border-box; }
.sshd-trigger{
display:inline-flex; align-items:center; gap:8px; cursor:pointer;
background:transparent; border:0; padding:6px 2px; margin:0;
font-family: var(--ss-sans, "Montserrat", sans-serif);
font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
color: var(--ss-ink, #1c1a17); line-height:1; transition:color .14s ease;
}
.sshd-trigger:hover, .sshd-trigger[aria-expanded="true"]{ color: var(--ss-oxblood, #8f2418); }
/* Dark top-bar variant — cream trigger, gold on hover (panel stays light) */
.sshd--on-dark .sshd-trigger{ color: var(--ss-paper, #faf6ed); }
.sshd--on-dark .sshd-trigger:hover, .sshd--on-dark .sshd-trigger[aria-expanded="true"]{ color: var(--ss-accent-gold, #c9a159); }
/* Lock the trigger to the exact size/weight of the "ACCOUNT · LOGIN" text next to it. */
.ssh-ann-r .et_pb_text_inner,
.ssh-ann-r .et_pb_text_inner a,
.sshd-trigger,
.sshd-trigger span{
font-size:12px !important;
letter-spacing:.12em !important;
font-weight:600 !important;
line-height:1 !important;
}
/* --- Header placement + stacking (Divi) ---
Right-align the trigger inside its Code module, and lift the dropdown's
Divi ancestors above the header rows below it so the OPEN panel covers
the cart total / main-nav instead of being overlapped by them. */
.et_pb_code:has(.sshd) { text-align: right; }
.et_pb_section:has(.sshd),
.et_pb_row:has(.sshd),
.et_pb_column:has(.sshd),
.et_pb_module:has(.sshd) { position: relative; z-index: 100200 !important; }
.sshd-panel { z-index: 100300; }
/* Account link + Services trigger on ONE inline row, right of the dark bar */
.et-l--header .et_pb_column:has(.sshd){
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 20px;
}
.et-l--header .et_pb_column:has(.sshd) > .et_pb_module{ margin: 0 !important; width: auto !important; }
/* Trim the quick-links band row (FREE SHIPPING · Resort & Spa …) height */
.et-l--header .et_pb_row:has(.ssh-band){ padding-top: 7px !important; padding-bottom: 7px !important; }
/* =========================================================
35 · FOOTER SOCIAL ICONS (Divi "social media follow")
Editorial monochrome on the dark footer: cream glyphs in
squared hairline tiles, oxblood fill + lift on hover.
Overrides Divi's per-network brand colors.
========================================================= */
.et-l--footer .et_pb_social_media_follow li.et_pb_social_icon { margin: 0 8px 0 0 !important; }
.et-l--footer .et_pb_social_media_follow li.et_pb_social_icon a.icon{
background-color: transparent !important;
border: 1px solid rgba(244,237,224,0.30) !important;
border-radius: 0 !important;
width: 38px !important;
height: 38px !important;
transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}
.et-l--footer .et_pb_social_media_follow li.et_pb_social_icon a.icon::before{
color: #faf6ed !important;
line-height: 38px !important;
}
.et-l--footer .et_pb_social_media_follow li.et_pb_social_icon a.icon:hover{
background-color: #8f2418 !important;
border-color: #8f2418 !important;
transform: translateY(-2px);
}
.et-l--footer .et_pb_social_media_follow li.et_pb_social_icon a.icon:hover::before{ color: #faf6ed !important; }
/* =========================================================
36 · MEGA PANEL LINK HOVER (mellow)
Soft fade to oxblood + a gentle slide on every .ssmm mega-panel
link & section title. Applied via the theme stylesheet, so all
already-pasted QuadMenu panels pick it up with no re-paste.
========================================================= */
.ssmm a { transition: color .22s ease, transform .22s ease !important; }
.ssmm a:hover { color: #8f2418 !important; transform: translateX(3px); }
/* on the dark feature column, fade to the lighter oxblood for contrast */
.ssmm [style*="background:#1c1a17"] a:hover,
.ssmm [style*="background: #1c1a17"] a:hover { color: #b14233 !important; }
/* =========================================================
37 · PAGE HERO — [ss_page_hero] etched-paper banner
Reusable editorial banner for NON-product pages (Contact, info,
etc.) matching the default category hero: bone field + faint
ram-shield watermark, kicker, serif title (italic-accent ),
italic lede. Drop [ss_page_hero] into any page or Divi module.
========================================================= */
/* Guard: the full-bleed hero below uses 100vw, which on Windows (classic scrollbar)
is ~17px wider than the page and creates a horizontal scrollbar. Clipping the x-axis
on the root removes it without breaking position:sticky (clip, not hidden). */
html{ overflow-x:clip; }
.ss-page-hero{ position:relative; overflow:hidden; box-sizing:border-box; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); background:#f4ede0; padding:92px 32px 86px; text-align:center; border-bottom:1px solid rgba(28,26,23,.07); box-shadow:0 16px 26px -18px rgba(28,26,23,.42); }
.ss-page-hero::after{
content:""; position:absolute; right:-30px; bottom:-44px; width:300px; height:300px;
background:url('//staging.thesportingshoppe.com/wp-content/themes/sporting-shoppe-v2/assets/logo-shield.png') no-repeat center / contain; opacity:.05; pointer-events:none;
}
.ss-page-hero > *{ position:relative; z-index:1; }
/* §37 etched-paper layers — fine graphite cross-hatch fading through the centre + hairline frame
(matches the "Etched Paper" category-banner direction; title stays legible via the radial mask). */
.ss-page-hero__tex{ position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
repeating-linear-gradient(45deg, rgba(28,26,23,.05) 0 1px, transparent 1px 8px),
repeating-linear-gradient(-45deg, rgba(28,26,23,.04) 0 1px, transparent 1px 8px);
-webkit-mask:radial-gradient(ellipse 60% 88% at 50% 50%, transparent 0, transparent 34%, #000 78%);
mask:radial-gradient(ellipse 60% 88% at 50% 50%, transparent 0, transparent 34%, #000 78%); }
.ss-page-hero__frame{ position:absolute; inset:14px; z-index:0; pointer-events:none; border:1px solid rgba(28,26,23,.14); }
/* hide etched layers on the photo-backed variants */
.ss-page-hero--rams .ss-page-hero__tex, .ss-page-hero--photo .ss-page-hero__tex,
.ss-page-hero--rams .ss-page-hero__frame, .ss-page-hero--photo .ss-page-hero__frame{ display:none; }
/* §37 art variants — rams photo banner + custom image (hide the faint single-shield watermark) */
.ss-page-hero--rams{ background-image:linear-gradient(rgba(244,237,224,.86),rgba(244,237,224,.86)), url('https://thesportingshoppe.com/wp-content/uploads/2026/05/preserve-gear-header.webp'); background-size:cover; background-position:center 35%; }
.ss-page-hero--rams::after,
.ss-page-hero--photo::after{ display:none; }
/* §37 Banner-Builder toggles — size · tone · frame */
.ss-page-hero.ss-hero-size-short{ padding-top:54px; padding-bottom:50px; }
.ss-page-hero.ss-hero-size-tall{ padding-top:120px; padding-bottom:112px; }
.ss-page-hero.ss-hero-tone-bone{ background:#faf6ed; }
.ss-page-hero.ss-hero-tone-ink{ background:#1c1a17; }
.ss-hero-tone-ink .ss-page-hero__title{ color:#faf6ed !important; }
.ss-hero-tone-ink .ss-page-hero__kicker{ color:#c9a159; }
.ss-hero-tone-ink .ss-page-hero__lede{ color:rgba(244,237,224,.82) !important; }
.ss-hero-tone-ink .ss-page-hero__frame{ border-color:rgba(244,237,224,.18); }
.ss-hero-tone-ink .ss-page-hero__tex{ background-image:repeating-linear-gradient(45deg,rgba(244,237,224,.06) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,rgba(244,237,224,.05) 0 1px,transparent 1px 8px); }
.ss-hero-noframe .ss-page-hero__frame{ display:none; }
/* §37c — subtle bottom edge so the hero separates from the page content
below it. Hairline + soft downward shadow; works on every tone (light
hairline override for the dark ink tone). box-shadow isn't clipped by
the hero's overflow:hidden, so the lift shows cleanly. */
.ss-page-hero{
border-bottom:1px solid rgba(28,26,23,.12);
box-shadow:0 14px 22px -16px rgba(28,26,23,.30);
}
.ss-page-hero.ss-hero-tone-ink{
border-bottom-color:rgba(244,237,224,.16);
box-shadow:0 14px 26px -16px rgba(0,0,0,.42);
}
/* =========================================================
43 · GRAVITY FORMS buttons — match the .ss-btn editorial system
Submit + Next = oxblood fill · Previous = ghost · progress = oxblood
========================================================= */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer .gform_next_button{
font-family:var(--ss-sans,"Montserrat",sans-serif) !important;
font-size:12px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important;
background:var(--ss-oxblood,#8f2418) !important; color:#faf6ed !important;
border:1px solid var(--ss-oxblood,#8f2418) !important; border-radius:0 !important;
padding:14px 32px !important; box-shadow:none !important; cursor:pointer; transition:background .15s ease,border-color .15s ease; width:auto !important;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer .gform_next_button:hover{ background:#741b12 !important; border-color:#741b12 !important; color:#faf6ed !important; }
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_page_footer .gform_previous_button{
font-family:var(--ss-sans,"Montserrat",sans-serif) !important;
font-size:12px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important;
background:transparent !important; color:var(--ss-ink,#1c1a17) !important;
border:1px solid rgba(28,26,23,.42) !important; border-radius:0 !important;
padding:14px 32px !important; box-shadow:none !important; cursor:pointer; transition:.15s ease; width:auto !important;
}
.gform_wrapper .gform_previous_button:hover{ background:var(--ss-ink,#1c1a17) !important; color:#faf6ed !important; border-color:var(--ss-ink,#1c1a17) !important; }
.gform_wrapper .gf_progressbar_title{ font-family:var(--ss-sans,"Montserrat",sans-serif) !important; text-transform:uppercase !important; letter-spacing:.1em !important; font-size:11px !important; color:var(--ss-oxblood,#8f2418) !important; }
.gform_wrapper .gf_progressbar{ background:#ece4d3 !important; border-radius:0 !important; }
.gform_wrapper .gf_progressbar_percentage{ background:var(--ss-oxblood,#8f2418) !important; border-radius:0 !important; }
.gform_wrapper .gf_progressbar_percentage span{ color:#faf6ed !important; }
/* §43b — GF field inputs to the editorial system: bone fields, ink text, oxblood focus */
.gform_wrapper .gfield_label{
font-family:var(--ss-mono,'JetBrains Mono',monospace) !important;
font-size:10px !important; font-weight:600 !important; letter-spacing:.14em !important; text-transform:uppercase !important;
color:var(--ss-ink,#1c1a17) !important; margin-bottom:6px !important;
}
.gform_wrapper .gfield_required{ color:var(--ss-oxblood,#8f2418) !important; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea{
font-family:var(--ss-sans,'Montserrat',sans-serif) !important;
font-size:15px !important; color:var(--ss-ink,#1c1a17) !important;
background:var(--ss-bone,#f4ede0) !important;
border:1px solid var(--ss-rule,#e3d8c2) !important; border-radius:0 !important;
padding:12px 14px !important; box-shadow:none !important; transition:border-color .15s ease, background .15s ease;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
border-color:var(--ss-oxblood,#8f2418) !important;
background:#fff !important; outline:none !important;
box-shadow:0 0 0 2px rgba(143,36,24,.12) !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{ color:rgba(28,26,23,.4) !important; }
.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules{ font-family:var(--ss-serif,'Cormorant Garamond',serif) !important; font-style:italic !important; font-size:13px !important; color:var(--ss-ink-mute,#6f665c) !important; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
font-family:var(--ss-sans,'Montserrat',sans-serif) !important; font-size:12px !important;
color:var(--ss-oxblood,#8f2418) !important; background:rgba(143,36,24,.06) !important;
border:0 !important; border-left:2px solid var(--ss-oxblood,#8f2418) !important; padding:6px 10px !important; border-radius:0 !important;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea{ border-color:var(--ss-oxblood,#8f2418) !important; }
.gform_wrapper .gform_validation_errors{ border-radius:0 !important; border-left:3px solid var(--ss-oxblood,#8f2418) !important; }
/* =========================================================
44 · [ss_brands] — modern brand grid / marquee
========================================================= */
.ss-brands--grid{ display:grid; grid-template-columns:repeat(var(--ss-brands-cols,6),1fr); gap:1px; background:#e3d8c2; border:1px solid #e3d8c2; }
.ss-brands__track,.ss-brands__run{ display:flex; }
.ss-brand{ display:flex; align-items:center; justify-content:center; min-height:104px; padding:20px 22px; background:#faf6ed; text-decoration:none; transition:background .15s ease; }
.ss-brands--grid .ss-brand:hover{ background:#f4ede0; }
.ss-brand__logo{ max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain; filter:saturate(.05) opacity(.82); transition:filter .2s ease, transform .2s ease; }
.ss-brand:hover .ss-brand__logo{ filter:saturate(1) opacity(1); transform:scale(1.04); }
.ss-brand__wordmark{ font-family:var(--ss-display,"Playfair Display",Georgia,serif); font-size:20px; font-weight:500; color:#1c1a17; letter-spacing:.01em; text-align:center; }
/* marquee */
.ss-brands--marquee{ overflow:hidden; position:relative; border-block:1px solid #e3d8c2; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ss-brands--marquee .ss-brands__track{ width:max-content; animation:ss-brands-scroll var(--ss-brands-speed,36s) linear infinite; }
.ss-brands--marquee:hover .ss-brands__track{ animation-play-state:paused; }
.ss-brands--marquee .ss-brand{ flex:0 0 auto; min-width:180px; border-right:1px solid #ece4d3; }
@keyframes ss-brands-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media(max-width:782px){ .ss-brands--grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:480px){ .ss-brands--grid{ grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion:reduce){ .ss-brands--marquee .ss-brands__track{ animation:none; } }
/* =========================================================
45 · Staff-only "Phone Orders" menu item (CSS class: phone-orders)
Reads as a privileged internal action: oxblood tint panel, left accent
bar, phone glyph, and a small monospace STAFF badge. The services
dropdown ([ss_services_menu]) puts the menu CSS class on the .
========================================================= */
.sshd-panel a.phone-orders,
li.phone-orders > a{
position:relative !important;
display:flex !important; align-items:center; gap:8px;
background:rgba(143,36,24,.06) !important;
border-left:2px solid #8f2418 !important;
padding-left:14px !important;
}
.sshd-panel a.phone-orders::before,
li.phone-orders > a::before{
content:"\260E"; /* ☎ */
font-size:13px; line-height:1; color:#8f2418; opacity:.9;
}
.sshd-panel a.phone-orders::after,
li.phone-orders > a::after{
content:"Staff";
margin-left:auto;
font-family:var(--ss-mono,'JetBrains Mono',monospace);
font-size:8px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:#faf6ed; background:#8f2418;
padding:2px 6px; border-radius:2px;
}
.sshd-panel a.phone-orders:hover,
li.phone-orders > a:hover{ background:rgba(143,36,24,.12) !important; padding-left:14px !important; }
/* Keep the ☎ glyph on hover — the generic `.sshd-panel a:hover::before` turns every
services link's ::before into an oxblood dot (content:""), which was wiping the phone.
Restore the glyph + cancel the dot styling; deepen the color for hover feedback. */
.sshd-panel a.phone-orders:hover::before,
li.phone-orders > a:hover::before{
content:"\260E" !important; position:static !important; left:auto !important; top:auto !important;
width:auto !important; height:auto !important; background:none !important; border-radius:0 !important;
transform:none !important; color:var(--ss-oxblood-deep,#6f1d12) !important; opacity:1 !important;
}
.ss-page-hero__kicker{ font-family:var(--ss-sans,"Montserrat",sans-serif); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ss-oxblood,#8f2418); margin-bottom:14px; }
.ss-page-hero__title{ font-family:var(--ss-display,"Playfair Display",Georgia,serif) !important; font-weight:500 !important; font-size:clamp(38px,5.5vw,64px) !important; line-height:1.05 !important; letter-spacing:-.015em !important; color:var(--ss-ink,#1c1a17) !important; margin:0 !important; }
.ss-page-hero__title em{ font-style:italic; color:var(--ss-oxblood,#8f2418); }
.ss-page-hero__title b, .ss-page-hero__title .ox{ color:var(--ss-oxblood,#8f2418) !important; font-style:normal; font-weight:inherit; }
.ss-page-hero__ornament{ display:block; width:40px; height:1px; background:var(--ss-accent-gold,#c9a159); margin:16px auto 0; }
.ss-page-hero__lede{ font-family:var(--ss-serif,"Cormorant Garamond",Georgia,serif) !important; font-style:italic; font-size:21px !important; line-height:1.5 !important; color:var(--ss-ink-soft,#4f4a43) !important; max-width:620px; margin:18px auto 0 !important; }
@media (max-width:980px){
.ss-page-hero{ padding:44px 18px 40px; }
.ss-page-hero__title{ font-size:34px !important; }
.ss-page-hero__lede{ font-size:17px !important; }
}
/* =========================================================
38 · MY ACCOUNT (WooCommerce)
========================================================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none;margin:0;padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0 0 8px !important; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{
display:block;background:var(--ss-ink,#1c1a17);color:var(--ss-paper,#faf6ed) !important;
font-family:var(--ss-sans,"Montserrat",sans-serif);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
padding:13px 18px;border:1px solid var(--ss-ink,#1c1a17);border-radius:0 !important;text-decoration:none;
transition:background .14s ease,border-color .14s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--ss-oxblood,#8f2418) !important;border-color:var(--ss-oxblood,#8f2418) !important;color:#faf6ed !important; }
.woocommerce-account .woocommerce-MyAccount-content{ background:var(--ss-paper,#faf6ed);border:1px solid var(--ss-rule,#d8d2c8);padding:26px 28px; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{ font-family:var(--ss-display,"Playfair Display",Georgia,serif) !important;font-weight:500 !important;color:var(--ss-ink,#1c1a17) !important; }
.woocommerce-account .woocommerce-MyAccount-content a{ color:var(--ss-oxblood,#8f2418); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message{
background:var(--ss-bone,#f4ede0) !important;border:1px solid var(--ss-rule,#d8d2c8) !important;border-left:3px solid var(--ss-oxblood,#8f2418) !important;
color:var(--ss-ink,#1c1a17) !important;border-radius:0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button{ background:var(--ss-ink,#1c1a17) !important;color:#faf6ed !important;border-radius:0 !important; }
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button:hover{ background:var(--ss-oxblood,#8f2418) !important; }
/* =========================================================
39 · FUNNELKIT FLYOUT CART — palette retune (vars, cosmetic)
========================================================= */
:root{
--fkcart-primary-bg-color:#8f2418 !important;
--fkcart-toggle-count-bg-color:#8f2418 !important;
--fkcart-toggle-bg-color:#1c1a17 !important;
--fkcart-toggle-icon-color:#faf6ed !important;
--fkcart-accent-color:#8f2418 !important;
--fkcart-progressbar-active-color:#4a5340 !important;
--fkcart-progress-bar-active-color:#4a5340 !important;
--fkcart-progress-bar-bg-color-active-icon:#4a5340 !important;
--fkcart-border-radius:0px !important;
--fkcart-toggle-border-radius:0% !important;
}
#fkcart-modal *{ font-family:var(--ss-sans,"Montserrat",sans-serif); }
#fkcart-modal .fkcart-drawer-heading,
#fkcart-modal .fkcart-title,
#fkcart-modal .fkcart-heading{ font-family:var(--ss-display,"Playfair Display",Georgia,serif) !important; }
#fkcart-modal .fkcart-checkout-btn,
#fkcart-modal a.fkcart-checkout,
#fkcart-modal .fkcart-add-product-button{ border-radius:0 !important; }
#fkcart-modal .fkcart-add-product-button{ color:#8f2418 !important;border-color:#8f2418 !important; }
/* =========================================================
40 · FUNNELKIT CHECKOUT (wfacp) — brand Place Order + headings
Scoped to the funnel checkout; no markup/logic touched.
========================================================= */
#wfacp-e-form #place_order,
.wfacp-main-wrapper #place_order,
.wfacp_next_step_wrapper #place_order{
background:var(--ss-oxblood,#8f2418) !important;background-image:none !important;
border:1px solid var(--ss-oxblood,#8f2418) !important;border-radius:0 !important;color:#faf6ed !important;
font-family:var(--ss-sans,"Montserrat",sans-serif) !important;font-weight:600 !important;letter-spacing:.12em !important;text-transform:uppercase !important;
box-shadow:none !important;
}
#wfacp-e-form #place_order:hover,
.wfacp-main-wrapper #place_order:hover{ background:var(--ss-oxblood-deep,#741b12) !important;border-color:var(--ss-oxblood-deep,#741b12) !important; }
.wfacp-main-wrapper .wfacp-section-heading,
.wfacp-main-wrapper h2.wfacp-section-title,
#wfacp-e-form .wfacp-section-title{ font-family:var(--ss-display,"Playfair Display",Georgia,serif) !important;font-weight:500 !important;color:var(--ss-ink,#1c1a17) !important; }
/* =========================================================
41 · EDITORIAL POLICY / LONG-FORM PAGE (.ss-policy)
Paste-in body that pairs with [ss_page_hero]. Calm, roomy,
serif lead + oxblood fees callout + sectioned headings.
========================================================= */
.ss-policy{ max-width:820px; margin:0 auto; padding:56px 24px 76px; font-family:var(--ss-sans,"Montserrat",sans-serif); color:var(--ss-ink,#1c1a17); position:relative; background:var(--ss-paper,#faf6ed); box-shadow:0 0 0 100vmax var(--ss-paper,#faf6ed); clip-path:inset(0 -100vmax); }
.ss-policy p{ font-size:16px; line-height:1.85; color:#3a352e; margin:0 0 20px; }
.ss-policy__lead{ font-family:var(--ss-serif,"Cormorant Garamond",Georgia,serif) !important; font-size:23px !important; line-height:1.55 !important; font-style:italic; color:var(--ss-ink,#1c1a17) !important; margin-bottom:34px !important; }
.ss-policy__h{ font-family:var(--ss-display,"Playfair Display",Georgia,serif); font-weight:500; font-size:24px; color:var(--ss-ink,#1c1a17); margin:40px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--ss-rule,#d8d2c8); }
.ss-policy__callout{ background:var(--ss-bone,#f4ede0); border-left:3px solid var(--ss-oxblood,#8f2418); padding:24px 28px; margin:0 0 38px; }
.ss-policy__callout .ss-policy__h{ margin:0; border:0; padding:0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; font-family:var(--ss-mono,"JetBrains Mono",monospace); color:var(--ss-oxblood,#8f2418); }
.ss-policy__fees{ list-style:none; margin:16px 0 0; padding:0; }
.ss-policy__fees li{ display:flex; flex-direction:column; padding:11px 0; border-bottom:1px solid rgba(28,26,23,.08); }
.ss-policy__fees li:last-child{ border-bottom:0; padding-bottom:0; }
.ss-policy__fees span{ font-weight:600; font-size:16px; color:var(--ss-ink,#1c1a17); }
.ss-policy__fees em{ font-style:italic; color:#6f665c; font-size:14px; font-family:var(--ss-serif,Georgia,serif); margin-top:3px; }
.ss-policy__list{ margin:0 0 22px; padding-left:20px; }
.ss-policy__list li{ font-size:16px; line-height:1.8; color:#3a352e; margin-bottom:11px; }
.ss-policy__note{ font-family:var(--ss-serif,Georgia,serif) !important; font-style:italic; color:#6f665c !important; font-size:15px !important; }
.ss-policy__rev{ font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; color:#9a9286 !important; margin-top:36px !important; }
@media (max-width:680px){ .ss-policy{ padding:36px 18px 56px; } .ss-policy__lead{ font-size:20px !important; } .ss-policy__h{ font-size:21px; } }
.sshd-caret{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .2s ease; }
.sshd-trigger[aria-expanded="true"] .sshd-caret{ transform:rotate(-135deg) translateY(-1px); }
/* Theme version stamp at the foot of the Services dropdown panel */
.sshd-ver{ margin-top:14px; padding-top:10px; border-top:1px solid rgba(28,26,23,.08); text-align:center; font-family:var(--ss-mono,"JetBrains Mono",monospace); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#b8b0a4; }
/* =========================================================
42 · FINE GUN ROOM — editorial video block (fine-firearms archive foot)
========================================================= */
.ss-gunroom{ background:var(--ss-ink,#1c1a17); margin-top:48px; padding:56px 24px 64px; }
.ss-gunroom__inner{ max-width:1100px; margin:0 auto; }
.ss-gunroom__head{ text-align:center; margin-bottom:30px; }
.ss-gunroom__kicker{ font-family:var(--ss-mono,"JetBrains Mono",monospace); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--ss-accent-gold,#c9a159); }
.ss-gunroom__title{ font-family:var(--ss-display,"Playfair Display",Georgia,serif); font-weight:500; font-size:40px; color:var(--ss-paper,#faf6ed); margin:12px 0 0; }
.ss-gunroom__title em{ font-style:italic; color:var(--ss-accent-gold,#c9a159); }
.ss-gunroom__lede{ font-family:var(--ss-serif,"Cormorant Garamond",Georgia,serif); font-style:italic; font-size:19px; color:rgba(244,237,224,.72); max-width:600px; margin:14px auto 0; line-height:1.5; }
.ss-gunroom__frame{ margin:0; border:1px solid rgba(201,161,89,.35); background:#000; }
.ss-gunroom__frame video{ display:block; width:100%; height:auto; }
@media(max-width:680px){ .ss-gunroom{ padding:40px 16px 46px; } .ss-gunroom__title{ font-size:30px; } }
.sshd-panel{
position:absolute; top:calc(100% + 10px); right:0; z-index:100050;
width:268px; background: var(--ss-paper, #faf6ed); border:1px solid var(--ss-rule, #d8d2c8);
box-shadow:0 22px 48px -22px rgba(28,26,23,.45);
padding:10px 0 12px; opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.sshd-panel::before{ content:""; position:absolute; top:-6px; right:22px; width:10px; height:10px; background: var(--ss-paper, #faf6ed); border-left:1px solid var(--ss-rule, #d8d2c8); border-top:1px solid var(--ss-rule, #d8d2c8); transform:rotate(45deg); }
.sshd:hover .sshd-panel, .sshd-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.sshd-panel__head{
font-family: var(--ss-mono, "JetBrains Mono", monospace);
font-size:9px; letter-spacing:.22em; text-transform:uppercase; color: var(--ss-oxblood, #8f2418);
padding:6px 22px 10px; margin-bottom:4px; border-bottom:1px solid var(--ss-rule-soft, #ece4d3);
}
.sshd-panel a{
display:block; text-decoration:none;
font-family: var(--ss-sans, "Montserrat", sans-serif);
font-size:11.5px; font-weight:500; letter-spacing:.08em; color: var(--ss-ink-soft, #4f4a43);
padding:8px 22px; line-height:1.3; position:relative;
transition:color .14s ease, background .14s ease, padding-left .14s ease;
}
.sshd-panel a:hover{ color: var(--ss-oxblood, #8f2418); background: transparent; padding-left:28px; }
.sshd-panel a:hover::before{ content:""; position:absolute; left:18px; top:50%; width:4px; height:4px; background: var(--ss-oxblood, #8f2418); border-radius:50%; transform:translateY(-50%); }
.sshd-rule{ height:1px; background: var(--ss-rule-soft, #ece4d3); margin:8px 22px; }
.sshd-panel a.sshd-ext{ font-family: var(--ss-mono, "JetBrains Mono", monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--ss-ink-mute, #6f665c); }
.sshd-panel a.sshd-ext:hover{ color: var(--ss-oxblood, #8f2418); }
@media (max-width:980px){
.sshd-panel{ right:auto; left:0; width:240px; }
.sshd-panel::before{ right:auto; left:22px; }
}
/* =========================================================
46 · FacetWP FLYOUT — editorial filter panel (mobile)
Styles the FacetWP Flyout add-on + the .shoppe-mobile-filter-button
trigger to Concept 1: bone field, oxblood accents, mono headings,
active-filter chips, sticky Apply/Reset bar. Scoped to FacetWP classes.
========================================================= */
.shoppe-mobile-filter-button{
display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
font-family:var(--ss-mono,"JetBrains Mono",monospace); font-size:11px; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--ss-paper,#faf6ed) !important;
background:var(--ss-oxblood,#8f2418) !important; border:0 !important; border-radius:0 !important;
padding:15px !important; cursor:pointer;
}
.shoppe-mobile-filter-button::before{ content:"\2630"; font-size:13px; }
.shoppe-mobile-filter-button .facetwp-flyout-count{
background:var(--ss-paper,#faf6ed); color:var(--ss-oxblood,#8f2418);
border-radius:2px; padding:1px 7px; font-size:10px;
}
/* the sliding panel */
.facetwp-flyout{ background:var(--ss-paper,#faf6ed) !important; }
.facetwp-flyout-content{ padding:0 !important; }
.facetwp-flyout .facetwp-flyout-header,
.facetwp-flyout-content > .facetwp-flyout-title{
font-family:var(--ss-display,"Playfair Display",Georgia,serif) !important;
font-size:21px !important; font-weight:500 !important; color:var(--ss-ink,#1c1a17) !important;
padding:16px 18px !important; border-bottom:1px solid var(--ss-rule,#e3d8c2) !important;
}
.facetwp-flyout-close{ color:var(--ss-ink-mute,#6f665c) !important; }
/* each facet block */
.facetwp-flyout .facetwp-facet{ margin:0 !important; padding:14px 18px !important; border-bottom:1px solid var(--ss-rule,#e3d8c2) !important; }
.facetwp-flyout .facetwp-facet-label,
.facetwp-flyout .facet-label{
font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:9px !important;
letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--ss-oxblood,#8f2418) !important;
margin-bottom:10px !important; display:block;
}
/* checkbox rows */
.facetwp-flyout .facetwp-checkbox{
font-family:var(--ss-sans,"Montserrat",sans-serif) !important; font-size:13px !important;
color:#4f4a43 !important; padding:7px 0 !important; background:none !important;
display:flex; align-items:center; gap:9px;
}
.facetwp-flyout .facetwp-checkbox:before,
.facetwp-flyout .facetwp-checkbox .facetwp-checkbox-icon{
width:15px; height:15px; border:1px solid var(--ss-rule,#e3d8c2); background:#fff; flex:0 0 auto;
}
.facetwp-flyout .facetwp-checkbox.checked:before{ background:var(--ss-oxblood,#8f2418) !important; border-color:var(--ss-oxblood,#8f2418) !important; }
.facetwp-flyout .facetwp-counter{ color:var(--ss-ink-mute,#6f665c) !important; font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:10px !important; margin-left:auto; }
/* range slider */
.facetwp-flyout .facetwp-slider-wrap .noUi-connect,
.facetwp-flyout .fs-wrap .noUi-connect{ background:var(--ss-oxblood,#8f2418) !important; }
.facetwp-flyout .facetwp-slider-wrap .noUi-handle,
.facetwp-flyout .fs-wrap .noUi-handle{ border:1.5px solid var(--ss-oxblood,#8f2418) !important; border-radius:50% !important; background:#fff !important; box-shadow:none !important; }
/* active-filter chips (FacetWP "selections" facet) */
.facetwp-flyout .facetwp-selections li,
.facetwp-selections li{
font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:9px !important;
letter-spacing:.06em !important; text-transform:uppercase !important;
background:var(--ss-oxblood,#8f2418) !important; color:var(--ss-paper,#faf6ed) !important;
padding:4px 9px !important; border-radius:0 !important; margin:0 6px 6px 0 !important;
}
/* sticky apply/reset bar */
.facetwp-flyout-footer,
.facetwp-flyout .facetwp-flyout-apply-wrap{
position:sticky; bottom:0; display:flex; gap:10px; padding:14px 18px !important;
background:var(--ss-paper,#faf6ed) !important; border-top:1px solid var(--ss-rule,#e3d8c2) !important;
}
.facetwp-flyout .facetwp-flyout-apply,
.facetwp-flyout button.facetwp-apply{
flex:1 !important; background:var(--ss-oxblood,#8f2418) !important; color:var(--ss-paper,#faf6ed) !important;
border:0 !important; border-radius:0 !important; padding:13px !important;
font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:10px !important;
letter-spacing:.1em !important; text-transform:uppercase !important; cursor:pointer;
}
.facetwp-flyout .facetwp-flyout-reset,
.facetwp-flyout button.facetwp-reset{
background:transparent !important; color:var(--ss-ink,#1c1a17) !important;
border:1px solid var(--ss-ink,#1c1a17) !important; border-radius:0 !important; padding:13px 16px !important;
font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:10px !important;
letter-spacing:.1em !important; text-transform:uppercase !important; cursor:pointer;
}
/* =========================================================
47 · MOBILE NAV DRAWER — Concept 1 "Editorial" (off-canvas, <=980px)
========================================================= */
.ssmob-trigger,.ssmob,.ssmob-scrim{ display:none; }
@media (max-width:980px){
.ssmob-trigger{ display:flex; flex-direction:column; gap:4px; position:fixed; top:12px; right:12px; z-index:100400;
width:42px; height:42px; align-items:center; justify-content:center; background:var(--ss-ink,#1c1a17); border:0; cursor:pointer; }
.ssmob-trigger span{ width:20px; height:2px; background:var(--ss-paper,#faf6ed); display:block; }
.ssmob-scrim{ display:block; position:fixed; inset:0; background:rgba(28,26,23,.5); z-index:100450; }
.ssmob-scrim[hidden]{ display:none; }
.ssmob{ display:flex; flex-direction:column; position:fixed; top:0; right:0; height:100%; width:min(86vw,360px);
background:var(--ss-paper,#faf6ed); z-index:100500; transform:translateX(100%); transition:transform .28s ease;
overflow-y:auto; box-shadow:-24px 0 60px -20px rgba(28,26,23,.5); }
.ssmob.is-open{ transform:translateX(0); }
.ssmob-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--ss-ink,#1c1a17); }
.ssmob-wm{ font-family:var(--ss-display,"Playfair Display",serif); font-size:18px; color:var(--ss-paper,#faf6ed); }
.ssmob-x{ background:0; border:0; color:var(--ss-paper,#faf6ed); font-size:26px; line-height:1; cursor:pointer; }
.ssmob-ship{ background:var(--ss-bone,#f4ede0); text-align:center; padding:8px; font-family:var(--ss-mono,"JetBrains Mono",monospace);
font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ss-oxblood,#8f2418); border-bottom:1px solid var(--ss-rule,#e3d8c2); }
.ssmob-li{ border-bottom:1px solid var(--ss-rule,#e3d8c2); }
.ssmob-top{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:0; border:0;
padding:16px 20px; cursor:pointer; text-decoration:none; text-align:left; }
.ssmob-top span:first-child{ font-family:var(--ss-display,"Playfair Display",serif); font-size:20px; color:var(--ss-ink,#1c1a17); }
.ssmob-pl{ font-family:var(--ss-mono,"JetBrains Mono",monospace); color:var(--ss-oxblood,#8f2418); font-size:15px; transition:transform .25s; }
.ssmob-li.open .ssmob-pl{ transform:rotate(45deg); }
.ssmob-sub{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--ss-bone,#f4ede0); }
.ssmob-li.open .ssmob-sub{ max-height:480px; }
.ssmob-sub a{ display:block; padding:11px 20px 11px 32px; text-decoration:none; color:#4f4a43; font-size:13.5px; border-top:1px solid rgba(227,216,194,.55); }
.ssmob-brand{ padding:16px 20px; }
.ssmob-lbl{ font-family:var(--ss-mono,"JetBrains Mono",monospace); font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--ss-oxblood,#8f2418); margin-bottom:12px; }
.ssmob-brandgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ssmob-brandgrid a{ border:1px solid var(--ss-rule,#e3d8c2); background:#fff; height:40px; display:flex; align-items:center; justify-content:center;
font-family:var(--ss-display,"Playfair Display",serif); font-size:12px; color:var(--ss-ink,#1c1a17); text-decoration:none; text-align:center; padding:0 4px; }
.ssmob-ball{ background:var(--ss-bone,#f4ede0) !important; color:var(--ss-oxblood,#8f2418) !important; font-family:var(--ss-mono,"JetBrains Mono",monospace) !important; font-size:9px !important; letter-spacing:.1em; text-transform:uppercase; }
.ssmob-svc{ padding:16px 20px; background:var(--ss-ink,#1c1a17); margin-top:auto; }
.ssmob-svc .ssmob-lbl{ color:var(--ss-accent-gold,#c9a159); }
.ssmob-svc a{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; text-decoration:none; color:var(--ss-paper,#faf6ed);
font-family:var(--ss-serif,"Cormorant Garamond",serif); font-style:italic; font-size:15px; }
.ssmob-svc a span{ font-family:var(--ss-mono,"JetBrains Mono",monospace); color:var(--ss-accent-gold,#c9a159); font-size:11px; }
}