/*bizco-head:bizco-carousel-hint-v4*/ /* 3. no rubber-band overscroll, all widths (see note B in the header) */ .bizco-pp .bizco-pp-track, .bizco-pp .bizco-cats{ overscroll-behavior-x: none !important; } @media (max-width: 767.98px), (hover: none) and (pointer: coarse) { /* 1. edge bars off */ .bizco-pp .bizco-pp-arrow{ display:none !important; } /* 2. give the reserved bar width back to the tiles */ .bizco-pp .bizco-pp-track, .bizco-pp .bizco-cats{ scroll-padding:0 !important; } } /* 4 + 5. no sticky :hover on touch (see note C in the header). Values below are the measured RESTING computed values, so a stuck :hover is indistinguishable from no hover at all. */ @media (hover: none), (pointer: coarse) { /* categories: no lift, no shadow */ .bizco-cat:hover .bizco-cat-circle{ transform:none !important; box-shadow:none !important; } /* categories: scrim stays at its resting .82/.55, never deepens */ .bizco-cat:hover .bizco-cat-label{ background:linear-gradient( to top, rgba(12, 24, 17, .82) 0%, rgba(12, 24, 17, .55) 45%, rgba(12, 24, 17, 0) 100%) !important; } /* products: no card tint, no title darkening */ .bizco-pp-card:hover{ background:#ffffff !important; } .bizco-pp-card:hover .bizco-pp-title{ color:#0F5230 !important; } /* 6. nothing inside a carousel is selectable (see note C6). The -webkit- prefix is the load-bearing part: iOS Safari below 16.4 ignores the unprefixed property entirely. */ .bizco-pp .bizco-pp-track, .bizco-pp .bizco-pp-track *{ -webkit-user-select:none !important; user-select:none !important; -webkit-touch-callout:none !important; } } /* NO ::selection override here on purpose - see note C6 in the header. It was tried and REVERTED: it hid the product titles and prices. */ /*bizco-head:bizco-account-pill*/ @media (max-width: 999.98px) { .ct-header [data-device="mobile"] .ct-header-text:has(.bizco-account), .ct-header [data-device="mobile"] .ct-header-text:has(.bizco-account) .entry-content { display: flex !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; } .ct-header [data-device="mobile"] .bizco-account { position: relative; display: inline-flex; align-items: center; } /* Doubled class so nothing else in the cascade can repaint the control. Width is AUTO now: the glyph, the 3px gap, the caret and 6px of side padding come to ~49px, and the end column is 80px. The padding exists at rest so the press plate has a shape to fill and the control never changes width between states. */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-btn { width: auto !important; height: 40px !important; padding: 0 6px !important; border: 0 !important; border-radius: 8px !important; background: none !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px; position: relative; cursor: pointer; color: #2D2D2D; transition: background-color .15s; -webkit-tap-highlight-color: transparent; } /* Lifts the tap target to 44px without growing the glyph. */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-btn::after { content: ""; position: absolute; inset: -2px; } .ct-header [data-device="mobile"] .bizco-account .bizco-avatar { display: block; width: 24px; height: 24px; flex: 0 0 auto; fill: none !important; } /* THE OPEN STATE. Same rotate and same .15s as snippet 143's member control. Nothing here touches colour. */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-caret { display: block; flex: 0 0 auto; transition: transform .15s; } .ct-header [data-device="mobile"] .bizco-account.is-open .bizco-account-caret { transform: rotate(180deg); } /* PRESS. The plate is the search field's own fill, so the header gains no new value. Hover is the same plate but fenced: on touch the last-tapped element keeps :hover, and an unfenced plate would sit there after the panel closed. */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-btn:active { background: #F2F5F7 !important; } @media (hover: hover) and (pointer: fine) { .ct-header [data-device="mobile"] .bizco-account .bizco-account-btn:hover { background: #F2F5F7 !important; } } .ct-header [data-device="mobile"] .bizco-account .bizco-account-btn:focus-visible { outline: 2px solid #0C7A47; outline-offset: 2px; } /* ==== dropdown panel: the site dropdown family, mirroring snippet 143 ==== */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; background: #fff; border: 1px solid #E3E3E3; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px !important; z-index: 100000; display: flex; flex-direction: column; } .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu[hidden] { display: none; } /* (0,4,1) + !important beats post 89's promo-bar rule `.ct-header .ct-header-text .entry-content a {text-decoration:underline !important}` (0,3,1), and beats the mobile band's white --theme-link-initial-color on this header item. */ .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu a { display: block !important; padding: 9px 12px !important; border-radius: 6px; font-size: 15px !important; font-weight: 500 !important; line-height: 1.5; text-align: left !important; white-space: nowrap; color: #2D2D2D !important; text-decoration: none !important; } .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu a::after { content: none !important; } @media (hover: hover) and (pointer: fine) { .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu a:hover { background: #F2F5F7; } } .ct-header [data-device="mobile"] .bizco-account .bizco-account-menu a:focus-visible { outline: 2px solid #0C7A47; outline-offset: -2px; } /* ==== the trigger's "Menu" label (label markup is native Blocksy) ==== */ .ct-header [data-device="mobile"] .ct-header-trigger { color: #2D2D2D; } .ct-header [data-device="mobile"] .ct-header-trigger .ct-label { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: .01em; color: #2D2D2D; } } /*bizco-head:bizco-wcas-thumbs*/ .dgwt-wcas-si{width:56px !important;min-width:56px !important;height:56px !important;padding:0 !important;overflow:hidden;flex:0 0 56px !important;display:flex !important;align-items:center;justify-content:center;}.dgwt-wcas-si img{width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:contain !important;background:#fff;border:1px solid #e8e8e8;border-radius:6px;padding:2px;box-sizing:border-box;margin:0 !important;} /*bizco-head:bizco-ptb*/ /* ---- shared tokens + atoms ---------------------------------- */ /* The band's inner column IS the theme container (.ct-container uses exactly these two vars), so the breadcrumb/title left edge lands on the product grid left edge at every breakpoint instead of on a hand-picked 1290px. SPECIFICITY NOTE: post 89's phone rule :is(body.tax-product_cat, body.post-type-archive-product) .hero-section[data-type="type-2"] .entry-header { margin:0 !important } scores (0,4,1). A shared (0,3,1) rule here loses to it and the band goes flush to the viewport edge on phones, so the container declarations are repeated inside the rail/media rules below, which score (0,4,1)+. */ body.bizco-ptb .bizco-ptb-crumbs{ margin:0; padding:0; width:100%; } body.bizco-ptb .bizco-ptb-crumbs .ct-breadcrumbs{ display:block; margin:0 !important; padding:0 !important; border:none !important; font-size:13px !important; line-height:18px !important; font-weight:400 !important; text-align:left !important; text-transform:none !important; letter-spacing:normal !important; } body.bizco-ptb .bizco-ptb-crumbs .ct-breadcrumbs *{ text-transform:none !important; letter-spacing:normal !important; } body.bizco-ptb .bizco-ptb-crumbs .ct-breadcrumbs a{ text-decoration:none; } body.bizco-ptb .bizco-ptb-crumbs .ct-breadcrumbs a:hover{ text-decoration:underline; text-underline-offset:2px; } body.bizco-ptb .bizco-ptb-crumbs .ct-separator{ margin:0 7px; vertical-align:0; opacity:.5; } body.bizco-ptb .bizco-ptb-crumbs .last-item{ font-weight:500 !important; } body.bizco-ptb .bizco-ptb-kicker{ margin:12px 0 0 !important; padding:0; font-size:11px !important; line-height:16px !important; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; text-align:left !important; } /* ---- RAIL: deep green + a dot field where the photograph would be ---- Same anatomy as the media band: flat #0F5230 across the left, texture revealed on the right. NO section-type label here on purpose; these pages get no copy they did not already have. Any supporting line the page already carried (post 89 renders it as .entry-header::after) is kept and recoloured back onto dark. CONTRAST NOTE: a dot at rgba(255,255,255,.38) over #0F5230 composites to rgb(106,148,127), where white text would be 2.9:1. So the mask is fully transparent until 46% and the text column is capped at 46%: no glyph ever sits on a dot. Off the dots, white on #0F5230 is 9.25:1. */ body.bizco-ptb.bizco-ptb--rail .site-main > .ct-container-full{ padding-top:0 !important; } body.bizco-ptb.bizco-ptb--rail .hero-section{ position:relative !important; width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; margin-top:0 !important; margin-bottom:clamp(24px, 3vw, 40px) !important; padding:0 !important; background:#0F5230 !important; background-image:none !important; border-radius:0 !important; box-shadow:none !important; border-bottom:none !important; text-align:left !important; overflow:hidden !important; } body.bizco-ptb.bizco-ptb--rail .hero-section::before{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; z-index:0 !important; pointer-events:none !important; background-image:radial-gradient(rgba(255,255,255,.38) 1.5px, transparent 1.6px) !important; background-size:16px 16px !important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 56%,#000 84%,#000 100%) !important; mask-image:linear-gradient(90deg,transparent 0%,transparent 56%,#000 84%,#000 100%) !important; } body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header{ position:relative !important; inset:auto !important; z-index:1 !important; width:var(--theme-container-width) !important; max-width:var(--theme-normal-container-max-width) !important; margin-inline:auto !important; padding-inline:0 !important; /* Band height, >=768px. Was 24/28 padding on a 200px floor, which left ~80px of dead space on the short pages (My Account, Help Center). 140px is the floor now and the padding is tighter; pages whose own text is taller than that still grow (Contact/Policies ~163px, Referral ~205px - their title and supporting line set the height, not this rule). Phone is untouched: the <=767.98px block below already overrides min-height to 0. */ padding-block:18px 22px !important; height:auto !important; min-height:140px !important; border:none !important; text-align:left !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; } /* real title (pages without a ::before swap) */ body.bizco-ptb.bizco-ptb--rail:not(.bizco-ptb--swap) .page-title{ color:#FFFFFF !important; font-weight:600 !important; font-size:clamp(26px, 2.55vw, 36px) !important; line-height:1.16 !important; letter-spacing:-.012em !important; text-shadow:none !important; margin:6px 0 0 !important; text-align:left !important; max-width:56% !important; text-wrap:balance; } /* swapped title: restyle the pseudo element, leave the hidden h1 hidden */ body.bizco-ptb.bizco-ptb--rail.bizco-ptb--swap .page-title::before{ color:#FFFFFF !important; font-weight:600 !important; font-size:clamp(26px, 2.55vw, 36px) !important; line-height:1.16 !important; letter-spacing:-.012em !important; text-shadow:none !important; margin:6px 0 0 !important; max-width:none !important; text-align:left !important; } body.bizco-ptb.bizco-ptb--rail.bizco-ptb--swap .page-title{ max-width:56% !important; } /* the supporting line these pages already had, back onto dark */ body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header::after{ color:rgba(255,255,255,.82) !important; font-size:15px !important; line-height:24px !important; font-weight:400 !important; /* 46% -> 56% (2026-08-22). The cap is a CONTRAST budget, not a margin: a dot is white at .38 over #0F5230 and white text on one falls to 3.4:1. So the DOT MASK moves with the text and the invariant holds - no glyph ever sits on a dot, and white off the dots stays 9.25:1. These are the same numbers the <=999.98px block has always used; desktop and tablet now share one geometry. 2026-08-22 again, 56% -> 67%: the 56% was doing NOTHING above ~1440 because 70ch (688px) was the binding half of the min() at every width from 1440 down. Both halves had to move. 88ch is what the longest of these lines needs on one line at 15px; it stays as a guard against a much longer sentence later. The DOT MASK deliberately stays at 56%: moving it in step would keep white at 9.25:1 but shrink the full-strength dot field from 16%% of the band to 5%%, which kills the texture. So the line now crosses the ramp instead, and the budget is contrast: dot alpha at 67%% is .149, where .82 white reads 4.78:1. AA passes to 68.9%%; do not push past that without lifting the text alpha. */ margin:8px 0 0 !important; max-width:min(88ch, 67%) !important; text-align:left !important; } body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .ct-breadcrumbs, body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .ct-breadcrumbs a{ color:rgba(255,255,255,.86) !important; } body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .ct-breadcrumbs a:hover{ color:#FFFFFF !important; } body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .last-item{ color:#FFFFFF !important; } /* ---- MEDIA: photograph + left-to-right green scrim --------- */ body.bizco-ptb.bizco-ptb--media .site-main > .ct-container-full{ padding-top:0 !important; } body.bizco-ptb.bizco-ptb--media .hero-section, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"]{ position:relative !important; /* bizco-ptb-media-height-v2: 200 -> 140, matching the rail. */ height:auto !important; min-height:140px !important; width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; margin-top:0 !important; margin-bottom:0 !important; padding:0 !important; display:block !important; overflow:hidden !important; border-radius:0 !important; background-color:#0F5230 !important; background-size:60% auto !important; background-position:right center !important; background-repeat:no-repeat !important; text-align:left !important; } /* the photograph fills the band behind the scrim */ body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] figure{ position:absolute !important; top:0 !important; bottom:0 !important; right:0 !important; left:40% !important; width:auto !important; height:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; z-index:0 !important; overflow:hidden !important; } /* the media container FILLS the window above. Do not repeat the left inset here: figure is position:absolute, so it is the containing block and a second 40% would compound to 64% and expose a hard seam. */ body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] .ct-media-container{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] .ct-media-container img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center !important; } /* the scrim: dark green left, photograph right */ body.bizco-ptb.bizco-ptb--media .hero-section::before{ content:"" !important; display:block !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; background:linear-gradient(90deg, #0F5230 0%, #0F5230 42%, rgba(15,82,48,.97) 50%, rgba(15,82,48,.86) 60%, rgba(15,82,48,.60) 72%, rgba(15,82,48,.26) 85%, rgba(15,82,48,.04) 97%, rgba(15,82,48,0) 100%) !important; } body.bizco-ptb.bizco-ptb--media .hero-section .entry-header, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] .entry-header{ position:relative !important; inset:auto !important; z-index:2 !important; height:auto !important; min-height:140px !important; width:var(--theme-container-width) !important; max-width:var(--theme-normal-container-max-width) !important; margin-inline:auto !important; padding-inline:0 !important; /* Same 18/22 the rail uses. With the breadcrumb, the metadata line and a one-line title the content measures ~134px, so the 140px floor is what sets the height on most categories; a two-line name grows past it. */ padding-block:18px 22px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; border:none !important; text-align:left !important; } body.bizco-ptb.bizco-ptb--media .page-title{ color:#FFFFFF !important; font-weight:600 !important; font-size:clamp(26px, 2.55vw, 36px) !important; line-height:1.16 !important; letter-spacing:-.012em !important; text-shadow:none !important; margin:6px 0 0 !important; text-align:left !important; max-width:46% !important; text-wrap:balance; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-kicker{ color:rgba(255,255,255,.72) !important; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-crumbs .ct-breadcrumbs, body.bizco-ptb.bizco-ptb--media .bizco-ptb-crumbs .ct-breadcrumbs a{ color:rgba(255,255,255,.86) !important; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-crumbs .ct-breadcrumbs a:hover{ color:#FFFFFF !important; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-crumbs .last-item{ color:#FFFFFF !important; } /* ---- the listing size, on the metadata line ------------------- It started life trailing the h1 at half the title's size. That reads as an afterthought next to a 36px name, and on a wrapped title it lands in a different place on every category, so it moved up to the kicker - the band's existing metadata slot. One line, no new type sizes, no band height, and nothing that interacts with how the title wraps. Inside that line the label stays at .72 white and the number goes to .92, so the fact outranks the label without introducing a second size or a fourth green. Both clear AA on #0F5230 (5.67:1 and 8.4:1). */ body.bizco-ptb.bizco-ptb--media .bizco-ptb-kicker .bizco-ptb-count{ color:rgba(255,255,255,.92) !important; white-space:nowrap; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-kicker-sep{ display:inline-block; margin:0 .5em; color:rgba(255,255,255,.45) !important; } /* Woo's own count row. The ordering select is already display:none site-wide (post 89), so the row holds nothing else - hiding just the

would leave its 25px bottom margin behind. */ body.bizco-ptb.bizco-ptb--media .woo-listing-top{ display:none !important; } /* That row was carrying 46px of the stack (21px of text plus its own 25px bottom margin), so with it gone the first row of products sat tight under the band. Post 89 sets 1.25rem here and 2.5rem on the subcategory-tile variant; this selector TIES it on specificity (0,3,2) and wins on print order (wp_head 200 vs wp_custom_css_cb 101), so both land on 40px. */ body.bizco-ptb.bizco-ptb--media ul.products{ margin-top:40px !important; } /* the old standalone breadcrumb strip above the hero is now inside it */ body.bizco-ptb .bizco-cat-breadcrumbs{ display:none !important; } /* ---- tablet ------------------------------------------------- */ @media (max-width: 999.98px){ body.bizco-ptb.bizco-ptb--media .page-title{ max-width:56% !important; } body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] figure{ left:34% !important; } body.bizco-ptb.bizco-ptb--media .hero-section, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"]{ background-size:66% auto !important; } body.bizco-ptb.bizco-ptb--media .hero-section::before{ background:linear-gradient(90deg, #0F5230 0%, #0F5230 38%, rgba(15,82,48,.96) 56%, rgba(15,82,48,.70) 70%, rgba(15,82,48,.30) 86%, rgba(15,82,48,0) 100%) !important; } /* rail: text gets more room, so the dots start further right */ body.bizco-ptb.bizco-ptb--rail:not(.bizco-ptb--swap) .page-title, body.bizco-ptb.bizco-ptb--rail.bizco-ptb--swap .page-title{ max-width:56% !important; } body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header::after{ max-width:min(88ch, 67%) !important; } body.bizco-ptb.bizco-ptb--rail .hero-section::before{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 56%,#000 84%,#000 100%) !important; mask-image:linear-gradient(90deg,transparent 0%,transparent 56%,#000 84%,#000 100%) !important; } } /* ---- phone -------------------------------------------------- */ @media (max-width: 767.98px){ body.bizco-ptb.bizco-ptb--media .hero-section, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"]{ min-height:0 !important; } body.bizco-ptb.bizco-ptb--media .hero-section .entry-header, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] .entry-header{ /* No floor on a phone, exactly like the rail: the three lines set the height and nothing pads it out. */ min-height:0 !important; padding-block:18px 22px !important; } /* text spans full width on a phone, so the scrim rotates to vertical */ /* Same structure as desktop, scaled down: flat green across the left, the photo inset behind it, the fade revealing the photo on the right. The band used to run a VERTICAL scrim here, which left no flat green zone at all and washed the photo out evenly across the whole width. The type is capped so no line can reach past the point where the scrim is still dense: at 375px the title tops out at 69.6% of the viewport and the breadcrumb at 73%, where alpha is >= .84 and >= .78 respectively, i.e. 6.1:1 and 5.2:1 against a worst-case white photograph. */ body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"] figure{ left:30% !important; width:auto !important; } body.bizco-ptb.bizco-ptb--media .hero-section, body.bizco-ptb.bizco-ptb--media .hero-section[data-type="type-2"]{ background-size:70% auto !important; background-position:right center !important; } body.bizco-ptb.bizco-ptb--media .hero-section::before{ background:linear-gradient(90deg, #0F5230 0%, #0F5230 34%, rgba(15,82,48,.96) 54%, rgba(15,82,48,.86) 68%, rgba(15,82,48,.56) 80%, rgba(15,82,48,.20) 92%, rgba(15,82,48,0) 100%) !important; } body.bizco-ptb.bizco-ptb--media .page-title{ max-width:72% !important; } body.bizco-ptb.bizco-ptb--media .bizco-ptb-crumbs{ max-width:76% !important; } /* Phone keeps the same reading as desktop: flat green on the left, resolving into the dot field on the right, on the same geometry the media band uses at this width (flat to ~34%). It cannot use the desktop approach of keeping text off the dots entirely: capping the supporting line to clear a right-hand field would push the band past 230px on a 375px screen. So here the text is allowed to cross the field and the DOT ALPHA is what gets constrained instead. At .20 a dot composites to rgb(63,117,89); the title reads 5.4:1 and the secondary text, lifted to .90 white for this breakpoint, reads 4.7:1. Both clear the 4.5:1 floor with the text running full width. .20 is the ceiling: .24 drops the secondary text to 4.3:1. */ body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header{ padding-block:18px 22px !important; min-height:0 !important; } body.bizco-ptb.bizco-ptb--rail:not(.bizco-ptb--swap) .page-title, body.bizco-ptb.bizco-ptb--rail.bizco-ptb--swap .page-title{ max-width:none !important; } body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header::after{ max-width:none !important; } body.bizco-ptb.bizco-ptb--rail .hero-section::before{ background-image:radial-gradient(rgba(255,255,255,.20) 1.4px, transparent 1.5px) !important; background-size:13px 13px !important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,#000 68%,#000 100%) !important; mask-image:linear-gradient(90deg,transparent 0%,transparent 32%,#000 68%,#000 100%) !important; } /* secondary text lifted for the textured background, see the note above */ body.bizco-ptb.bizco-ptb--rail .hero-section .entry-header::after{ color:rgba(255,255,255,.90) !important; } body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .ct-breadcrumbs, body.bizco-ptb.bizco-ptb--rail .bizco-ptb-crumbs .ct-breadcrumbs a{ color:rgba(255,255,255,.90) !important; } body.bizco-ptb .bizco-ptb-crumbs .ct-breadcrumbs{ font-size:12.5px !important; } body.bizco-ptb .bizco-ptb-kicker{ margin-top:10px !important; } body.bizco-ptb.bizco-ptb--media ul.products{ margin-top:28px !important; } } /* ---- bizco-ptb-search v1: the catalog band on the search page ---- The search page IS a product archive as far as the body classes go (post-type-archive-product), so the media state above already gives it the deep green, the shop photograph from post 89 and the metadata line. What is left is the furniture the old layout needed and this one does not. Post 89 hides the hero on .search-results (0,2,0 !important); the media rules are (0,3,1) !important and print at wp_head 200, so they win. */ body.bizco-ptb.bizco-ptb--search .bizco-search-header{ display:none !important; } body.bizco-ptb.bizco-ptb--search .woocommerce-products-header, body.bizco-ptb.bizco-ptb--search .hero-section .page-description{ display:none !important; } /* The term is the fact in the heading; the lead-in is scaffolding. Same relationship the old results bar had between .bizco-search-label and .bizco-search-term, carried over rather than re-invented. */ body.bizco-ptb.bizco-ptb--search .page-title .bizco-ptb-term{ font-weight:700; } /* The related-categories strip stands where the grid stands on a category page, so it takes the band's 40px of air and the grid falls in behind it. */ body.bizco-ptb.bizco-ptb--search .bizco-search-cats{ margin-top:40px !important; } body.bizco-ptb.bizco-ptb--search .bizco-search-cats + .woocommerce-notices-wrapper + .woo-listing-top + ul.products, body.bizco-ptb.bizco-ptb--search .bizco-search-cats ~ ul.products{ margin-top:28px !important; } @media (max-width: 767.98px){ body.bizco-ptb.bizco-ptb--search .bizco-search-cats{ margin-top:28px !important; } body.bizco-ptb.bizco-ptb--search .bizco-search-cats ~ ul.products{ margin-top:20px !important; } } /*bizco-head:bizco-header-account*/ /* ==== shared cart section (phone + desktop) ==== */ .ct-header .bizco-cart { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid #9CA9B7; border-radius: 10px; overflow: hidden; background: #fff; text-decoration: none !important; flex: 0 0 auto; -webkit-tap-highlight-color: transparent; } .ct-header .bizco-cart .bizco-cart-ic { display: flex; align-items: center; justify-content: center; width: 46px; background: #0F9558; color: #fff; transition: background .15s; } .ct-header .bizco-cart .bizco-cart-count { display: flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 9px; font-size: 15.5px; font-weight: 700; color: #161A1C; background: #fff; } @media (hover: hover) and (pointer: fine) { .ct-header .bizco-cart:hover { border-color: #0F9558; } .ct-header .bizco-cart:hover .bizco-cart-ic { background: #0F5230; } } .ct-header .bizco-cart:focus-visible { outline: 2px solid #0C7A47; outline-offset: 2px; } .ct-header .bizco-cart:active .bizco-cart-ic { background: #0F5230; } /* underline-hardening v2 */ /* Post 89's promo-bar rule underlines ANY anchor inside a header text item (.ct-header .ct-header-text .entry-content a, (0,3,1) !important). These outrank it on specificity rather than relying on print order. */ .ct-header .ct-header-text .entry-content a.bizco-cart { text-decoration: none !important; } .ct-header .ct-header-text .entry-content .bizco-hdracct-menu a { text-decoration: none !important; color: #2D2D2D !important; } .ct-header .ct-header-text .entry-content .bizco-hdracct-menu a.bizco-hdracct-title { color: #161A1C !important; border-radius: 6px; } @media (hover: hover) and (pointer: fine) { .ct-header .bizco-hdracct .bizco-hdracct-menu a.bizco-hdracct-title:hover { background: #F2F5F7; } } /* phone size + the right-align job post 89 does for .bizco-account */ .ct-header [data-device="mobile"] .bizco-cart { height: 38px; border-radius: 9px; } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-ic { width: 40px; } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-ic svg { width: 20px; height: 20px; } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-count { min-width: 30px; padding: 0 8px; font-size: 15px; } .ct-header [data-device="mobile"] .ct-header-text:has(.bizco-cart), .ct-header [data-device="mobile"] .ct-header-text:has(.bizco-cart) .entry-content { display: flex !important; justify-content: flex-end !important; width: 100% !important; margin: 0 !important; } /* phone cart taper v1 */ /* Under 380px the cart section scales with the viewport instead of holding its 72x38 size - the same move the header logo makes under 420px. Every clamp reaches its MAX at 380px, so 380 and up is byte-identical to before and nothing steps at the breakpoint. At 320px the pill is ~61 x 32. Guests never render .bizco-cart (snippet 74 gives them the person glyph), so this only touches the member states that actually have the section. */ @media (max-width: 379.98px) { .ct-header [data-device="mobile"] .bizco-cart { height: clamp(32px, 10vw, 38px); border-radius: clamp(7.5px, 2.37vw, 9px); } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-ic { width: clamp(33px, 10.53vw, 40px); } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-ic svg { width: clamp(17px, 5.26vw, 20px); height: clamp(17px, 5.26vw, 20px); } .ct-header [data-device="mobile"] .bizco-cart .bizco-cart-count { min-width: clamp(25px, 7.9vw, 30px); padding: 0 clamp(6px, 2.1vw, 8px); font-size: clamp(13.5px, 3.95vw, 15px); } } /* ==== desktop: member header swap ==== */ body.bizco-member .ct-header [data-device="desktop"] :is([data-id="button"], [data-id="OvC7um"]) { display: none !important; } body:not(.bizco-member) .ct-header .ct-header-text[data-id="bizcoA"] { display: none !important; } .ct-header .ct-header-text[data-id="bizcoA"], .ct-header .ct-header-text[data-id="bizcoA"] .entry-content { display: flex; align-items: center; margin: 0; } /* acct-right v4 */ /* The end group still spans from the search bar's right edge (the bar paints out of flow at 50vw + barW/2, barW = clamp(240px,45vw,700px) for members) to the container's right edge (95vw), and the wrapper keeps its width so the name's ellipsis clamp and the dropdown's right:0 anchor are unchanged. What changed (owner, 2026-08-15): the button no longer CENTRES in that zone - centred, it read as floating between the bar and the cart. It now sits hard against the cart (v3's justify-content:center on .bizco-hdracct became flex-end) with a 12px gap; the button's own 8px of padding makes that ~20px of optical air. All the slack now falls on the bar side, so a long name has MORE room before it can crowd the bar, not less - the fit constraint from v3 only gets looser. */ /* acct-right v5: the owner wanted the button a touch further from the cart. The gap CANNOT be a flat larger number: the free space between bar and button bottoms out at 5.4px at exactly 950px and 6.7px at exactly 1000px (the two band edges where the word reappears / the bar stops growing), so anything above 12px there would push the button onto the bar's green cap. A vw clamp floors at the old 12px through that pinch and only opens up where there is slack to spend: 12px <=1000, ~16 at 1280, ~18 at 1440, 20 from 1600 up. Measured bar->button clearance stays positive at every width 768-1920. If the member bar width formula changes, re-measure the 950/1000 pinch before raising either end of this clamp. */ .ct-header .ct-header-text[data-id="bizcoA"] .bizco-hdrend { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 20px); justify-content: flex-end; width: calc(45vw - clamp(120px, 22.5vw, 350px)); } /* member: the search column track hugs the bar instead of the 700px box, so the wider end content cannot push the bar off-centre. The VISIBLE bar width is unchanged: it was already min(45vw, 700px) inside the 700px box. */ body.bizco-member .ct-header [data-device="desktop"] .ct-search-box { width: clamp(240px, 45vw, 700px) !important; } /* ==== desktop: account trigger ==== */ .ct-header .bizco-hdracct { position: relative; flex: 1 1 auto; min-width: 0; display: flex; /* acct-right v4: flex-end, not center - the button hugs the cart. */ justify-content: flex-end; } .ct-header .bizco-hdracct .bizco-hdracct-btn { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 5px 8px; margin: 0; cursor: pointer; border-radius: 8px; color: #2D2D2D; -webkit-tap-highlight-color: transparent; } .ct-header .bizco-hdracct .bizco-hdracct-person { flex: 0 0 auto; display: block; } .ct-header .bizco-hdracct .bizco-hdracct-lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; text-align: left; } .ct-header .bizco-hdracct .bizco-hdracct-name { font-size: 12.5px; font-weight: 500; color: #2D2D2D; /* name-everywhere v4: the free zone between bar and cart is 45vw - clamp(120px,22.5vw,350px) wide incl the 84px cart; icon+gap+padding eat 51px more, so this cap is zone - 160px (135px consumed + ~12px air per side). Floor 75px = the width of "Account v" (a shorter name line never adds button width), ceiling 220px so a novel of a name cannot crowd the bar on huge screens. */ max-width: clamp(75px, calc(45vw - clamp(120px, 22.5vw, 350px) - 160px), 220px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ct-header .bizco-hdracct .bizco-hdracct-word { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: #161A1C; white-space: nowrap; } .ct-header .bizco-hdracct .bizco-hdracct-chev { transition: transform .15s; } .ct-header .bizco-hdracct.is-open .bizco-hdracct-chev { transform: rotate(180deg); } @media (hover: hover) and (pointer: fine) { .ct-header .bizco-hdracct .bizco-hdracct-btn:hover { background: #F2F5F7; } } .ct-header .bizco-hdracct .bizco-hdracct-btn:focus-visible { outline: 2px solid #0C7A47; outline-offset: 2px; } /* ==== desktop: dropdown panel (site dropdown family) ==== */ .ct-header .bizco-hdracct .bizco-hdracct-menu { position: absolute; top: calc(100% + 10px); right: 0; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid #E3E3E3; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); padding: 8px; z-index: 100000; min-width: 430px; } .ct-header .bizco-hdracct .bizco-hdracct-menu[hidden] { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-col { padding: 8px 6px; min-width: 0; } .ct-header .bizco-hdracct .bizco-hdracct-col + .bizco-hdracct-col { border-left: 1px solid #EEF1F0; } .ct-header .bizco-hdracct .bizco-hdracct-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: 15px; font-weight: 700; color: #161A1C; } .ct-header .bizco-hdracct .bizco-hdracct-title svg { color: #0F9558; flex: 0 0 auto; display: block; } .ct-header .bizco-hdracct .bizco-hdracct-title--2 { margin-top: 12px; } /* 38px left inset = title icon 18 + gap 8 + title padding 12, so rows align under their title text. (0,4,1) + !important beats post 89's promo-bar underline rule at (0,3,1). */ .ct-header .bizco-hdracct .bizco-hdracct-menu a { display: block; padding: 9px 12px 9px 38px; border-radius: 6px; font-size: 15px; font-weight: 500; color: #2D2D2D !important; text-decoration: none !important; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .ct-header .bizco-hdracct .bizco-hdracct-menu a:hover { background: #F2F5F7; } } .ct-header .bizco-hdracct .bizco-hdracct-menu a:focus-visible { outline: 2px solid #0C7A47; outline-offset: -2px; } /* title-as-link v6: "My Account" is an , so the row rule above (.bizco-hdracct-menu a, (0,3,1)) OUT-SPECIFIES the title rule (.bizco-hdracct-title, (0,3,0)) and was giving it display:block - which dropped the icon out of the flex row - plus weight 500 and the 38px row indent. This selector is (0,4,1) and restores the title box. Colour is handled by the entry-content override further up. */ .ct-header .bizco-hdracct .bizco-hdracct-menu a.bizco-hdracct-title { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; font-size: 15px; font-weight: 700; } /* bizco-hdr-refcode v1: the referral-code bar spans both grid columns at the top of the panel. It is a BUTTON, not a link, because it copies rather than navigates - so every inherited button style (theme background, radius, shadow, uppercase, letter-spacing) has to be named back to nothing here. justify-self is explicit: a grid item stretches by default, but the theme sets width:auto on buttons and one !important there would leave the bar shrink-wrapped. */ .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode { grid-column: 1 / -1; justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 6px; padding: 10px 14px; border: 0; border-radius: 8px; background: #DFF0E6; color: #0F5230; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; text-align: left; white-space: nowrap; cursor: pointer; box-shadow: none; min-height: 0; transition: background .15s ease, color .15s ease; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode-v { display: inline-flex; align-items: center; gap: 8px; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode strong { font-weight: 800; font-size: 15.5px; letter-spacing: .05em; } /* The glyph is DECORATION - the whole bar is the target, so it gets no fill of its own. It had a tinted chip in v1 and the owner read it as a second button sitting inside the bar (2026-08-15); it now carries only the colour it inherits, which the .is-copied rule flips to white with everything else. */ .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode-ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; background: none; border-radius: 0; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode-ic svg { display: block; flex: 0 0 auto; } /* copied state: the handler only toggles .is-copied (it cannot rewrite the label without destroying the svg), so the swap is done in CSS. THE GLYPH RULES ALL CARRY svg.: the `-ic svg` rule above is (0,5,1) and is printed first, so a bare `.bizco-hdracct-refcode-k{display:none}` at (0,4,1) LOSES to it and both glyphs paint at once (seen 2026-08-15). Every rule that hides or shows a glyph has to out-specify that one. */ .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode-l2 { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode-ic svg.bizco-hdracct-refcode-k { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied { background: #0F5230; color: #fff; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied .bizco-hdracct-refcode-l1 { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied .bizco-hdracct-refcode-l2 { display: inline; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied .bizco-hdracct-refcode-ic svg.bizco-hdracct-refcode-c { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied .bizco-hdracct-refcode-ic svg.bizco-hdracct-refcode-k { display: block; } /* hover stays a tint: the dark-green fill now MEANS copied, so hover must not borrow it. */ @media (hover: hover) and (pointer: fine) { .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode:hover { background: #CFE7DA; } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode.is-copied:hover { background: #0F5230; } } .ct-header .bizco-hdracct .bizco-hdracct-menu .bizco-hdracct-refcode:focus-visible { outline: 2px solid #0C7A47; outline-offset: 2px; } .ct-header .bizco-hdracct .bizco-hdracct-sep { height: 1px; background: #EEF1F0; margin: 6px 12px; } /* ==== 768-999.98 tablet band (desktop header, tight row): drop the name line, keep "Account v" ==== */ @media (max-width: 999.98px) { /* name stays visible: stacked above "Account" it only adds width when longer than the word, so cap it AT the word's width */ .ct-header .bizco-hdracct .bizco-hdracct-name { max-width: 75px; } .ct-header .bizco-hdracct .bizco-hdracct-btn { gap: 7px; padding: 5px 6px; } .ct-header .ct-header-text[data-id="bizcoA"] .bizco-hdrend { width: 22.5vw; } .ct-header .bizco-cart { height: 40px; } .ct-header .bizco-cart .bizco-cart-ic { width: 42px; } } /* tablet word-hide v2 */ /* Below 920px the centred search bar (45vw, painted out of flow at the exact viewport centre) leaves under 0.225vw per side; "Account" + chevron + cart need 206px, which fits from 916px; cut at 950 so the word never reappears glued to the bar. font-size:0 keeps the chevron (an svg with width/height attributes) while the word collapses; the person icon + chevron + cart need only ~143px. */ @media (min-width: 768px) and (max-width: 949.98px) { .ct-header .bizco-hdracct .bizco-hdracct-word { font-size: 0; gap: 4px; } .ct-header .bizco-hdracct .bizco-hdracct-name { display: none; } .ct-header .bizco-hdracct .bizco-hdracct-btn { gap: 5px; } } /* ==== bizco-cart-field-stroke v1 (2026-08-16) ==== Brings the cart section into the search bar's v9 grammar (post 89, `bizco-search-field-stroke v9`). Two things had been out of sync since the bar moved to a pill with the stroke on the FIELD: 1. THE STROKE WRAPPED THE GREEN. The 1px #9CA9B7 ran around the whole control, so it framed the green icon cell as though the cell were sitting inside the count box. It now lives on the COUNT cell with `border-left:0` and stops dead where the green starts - exactly what v9 did to the search field with `border-right:0`. 2. HOVER MOVED TWO THINGS AT ONCE. The old pair of rules darkened the icon cell to #0F5230 AND recoloured the border to #0F9558, so the outline went light green while the fill went dark - the "everything but the outline" the owner reported. The search cap moves alone (#0F9558 -> #0F5230, stroke untouched) and the cart now does the same; with no border left on the wrapper there is nothing for the old border-color rule to act on. Also taken from v9: the #DCE3E9 stroke, the #F2F5F7 field fill and #0F5230 for focus. NOT the radius. v1 shipped the bar's 999px pill to match it exactly and the owner rejected it the same day as too round, so the corners are back to the original 10 / 9 / clamp(7.5px, 2.37vw, 9px). Those now live in `--bizco-cart-r`, declared next to the strip width so ONE value per band feeds both the wrapper and the count cell's corner. THE COUNT CELL'S RADIUS MUST MATCH THE WRAPPER'S EXACTLY AND THE ICON CELL'S MUST UNDER-SHOOT IT - the two cells differ because of what sits behind each one. The count carries the visible stroke, so its arc IS the control's outer corner; pull it in and the stroke stops following the shape (this is new in v1.1 - before the stroke moved to the cell, the wrapper's own border drew that corner and the cells could be square). The icon carries no stroke and sits over the green strip, so a smaller 6px lets `overflow:hidden` draw its corner instead and every boundary pixel there is green over green. 6px clears the smallest band's 7.5px floor, so one value covers every band. This is v7's cap-radius lesson from the search bar: AT or ABOVE the clip, the element's own arc sits outside it and the wrapper's fill shows through between the two as a pale hairline. OUTER GEOMETRY IS UNCHANGED at every band: the wrapper gives up its 1px border and the cells grow into it, the same swap v9 made when the form's border moved to the input. Heights and cell widths are deliberately NOT restated here, so the size rules above keep owning them. THE GREEN STRIP IS v8.1's BACKSTOP, mirrored. `overflow:hidden` on the wrapper clips both cells to the pill, and a clipped boundary pixel resolves as alpha*(cell) + (1-alpha)*(whatever the WRAPPER paints there). Painting the wrapper green under the icon cell - and 2px past its right edge, under the count cell's left edge - makes every seam pixel in that half green over green. `--bizco-cart-strip` is that width per band (cell width + 2px) and must stay UNDER the cell's own width, or a green sliver shows to the right of the icon. `background-origin: border-box` is set for the same reason as in v8.1: a background IMAGE is otherwise positioned against the padding box. ==================================================== */ .ct-header .bizco-cart { --bizco-cart-strip: 48px; /* 46px icon cell + 2px */ --bizco-cart-r: 10px; border: 0 none; border-radius: var(--bizco-cart-r); background-color: transparent; background-image: linear-gradient(to right, #0F9558 0, #0F9558 var(--bizco-cart-strip), rgba(0,0,0,0) var(--bizco-cart-strip)); background-origin: border-box; background-repeat: no-repeat; transition: background-image .15s; } .ct-header .bizco-cart .bizco-cart-ic { border-radius: 6px 0 0 6px; } .ct-header .bizco-cart .bizco-cart-count { box-sizing: border-box; border: 1px solid #DCE3E9; border-left: 0 none; border-radius: 0 var(--bizco-cart-r) var(--bizco-cart-r) 0; background: #F2F5F7; } /* hover / active: the green moves, the stroke never does */ @media (hover: hover) and (pointer: fine) { .ct-header .bizco-cart:hover { background-image: linear-gradient(to right, #0F5230 0, #0F5230 var(--bizco-cart-strip), rgba(0,0,0,0) var(--bizco-cart-strip)); } } .ct-header .bizco-cart:active { background-image: linear-gradient(to right, #0F5230 0, #0F5230 var(--bizco-cart-strip), rgba(0,0,0,0) var(--bizco-cart-strip)); } .ct-header .bizco-cart:focus-visible { outline: 2px solid #0F5230; outline-offset: 2px; } /* the strip tracks each band's icon-cell width. ORDER IS THE CASCADE HERE: the mobile twins are (0,3,0) so they beat the 999.98px band's (0,2,0) for the phone header instance, and each later same-specificity rule beats the phone taper's earlier one regardless of its media query. */ @media (max-width: 999.98px) { .ct-header .bizco-cart { --bizco-cart-strip: 44px; } /* 42px cell + 2px */ } .ct-header [data-device="mobile"] .bizco-cart { --bizco-cart-strip: 42px; /* 40px cell + 2px */ --bizco-cart-r: 9px; border-radius: var(--bizco-cart-r); } @media (max-width: 379.98px) { .ct-header [data-device="mobile"] .bizco-cart { --bizco-cart-strip: calc(clamp(33px, 10.53vw, 40px) + 2px); --bizco-cart-r: clamp(7.5px, 2.37vw, 9px); border-radius: var(--bizco-cart-r); } } /*bizco-head:bizco-hover-green*/ :root{ --bizco-hover-green:#0F5230; --theme-button-background-hover-color:#0F5230; --theme-link-hover-color:#0F5230; } /* The guest desktop header "Sign Up" button carries its own hover colour from the Customizer (headerButtonForeground.hover = #0f9458, one digit off its own #0F9558 resting fill - i.e. today it has no visible hover at all). The generated rule is [data-header*="type-1"] .ct-header [data-id="OvC7um"] so the token is restated at the same element to outrank it. Stated as CSS rather than written back into theme_mods because the Customizer owns that option and would overwrite it on the next save. */ /* bizco-ctl-v1 GUEST HEADER BUTTONS. Sign Up = [data-id="OvC7um"], Blocksy button type-1 (filled). Sign in = [data-id="button"], Blocksy button type-2 (ghost). Both were bright green, which read as two unrelated shapes. Sign in also had headerButtonForeground.hover = rgba(255,255,255,0), so its outline went fully transparent on hover and the button looked like it had vanished. Now there is one coloured object in the header, and it is the dark one. */ /* Sign Up: solid deep green, one shade darker on hover. Driven through the theme tokens so the fill and hover machinery keeps working. */ [data-header*="type-1"] .ct-header [data-id="OvC7um"]{ /* #0F9558 is the search bar submit cap at rest, and #0F5230 is that cap on hover - the header now speaks the same green as the control beside it. */ --theme-button-background-initial-color:#0F9558; --theme-button-background-hover-color:#0F5230; --theme-button-text-initial-color:#ffffff; --theme-button-text-hover-color:#ffffff; --theme-button-border-radius:999px; } [data-header*="type-1"] .ct-header [data-id="OvC7um"] :is(.ct-button,.ct-button-ghost), [data-header*="type-1"] .ct-header [data-id="OvC7um"] > a{ font-weight:600; } /* Sign in: DEEP GREEN outline, never fills. TWO THINGS TO KNOW BEFORE EDITING THIS: 1. A Blocksy type-2 header button gets the class `ct-button-ghost` INSTEAD of `ct-button` (theme inc/panel-builder/header/button/view.php line 140), so a `.ct-button` selector silently misses it. Both are listed below. 2. The ghost hover token drives the FILL as well as the border, so the hover is written as plain declarations. It deepens to #0F5230 rather than filling, which keeps a hovered Sign in from looking exactly like a resting Sign Up. Both greens are the search bar submit cap: #0F9558 at rest, #0F5230 on hover. */ [data-header*="type-1"] .ct-header [data-id="button"]{ --theme-button-border-radius:999px; } [data-header*="type-1"] .ct-header [data-id="button"] :is(.ct-button,.ct-button-ghost), [data-header*="type-1"] .ct-header [data-id="button"] > a{ background-color:#ffffff !important; border:1px solid #0F9558 !important; color:#0F9558 !important; font-weight:600; transition:color .15s ease,border-color .15s ease,box-shadow .15s ease; } [data-header*="type-1"] .ct-header [data-id="button"] :is(.ct-button,.ct-button-ghost):hover, [data-header*="type-1"] .ct-header [data-id="button"] > a:hover{ background-color:#ffffff !important; border-color:#0F5230 !important; color:#0F5230 !important; box-shadow:inset 0 0 0 1px #0F5230; } /*bizco-head:bizco-hover-guard*/ /* Mouse only. On a touch screen :hover sticks to the last thing tapped, so an ungated overlay would leave a tappable margin hanging around it - and there is no flicker to fix there in the first place, because nothing is chasing a pointer. Same gate the FAQ rows and the loop cards use. */ @media (hover: hover){ /* Everything on the site that lifts under its own :hover. Wrapped in :where() so the guard carries no specificity of its own and can never win a fight it was not meant to be in. */ :where( .button, .ct-button, .entry-tags a, .added_to_cart, [type="submit"], .wp-element-button, .wp-block-button__link, button.regform-button, button[class*="ajax"], .woocommerce button.button, .woocommerce-message .showlogin, .woocommerce-message .restore-item, .bizco-footer-banner__cta, .bizco-cmp-cta, .bizco-svb-cta, a.bizco-cta-green, button.bizco-cta-green, .bizco-mx-cta, .bizco-mxp-cta, .bizco-help-card, .bizco-mb-tile, .bizco-pol-card, .bizco-ref-tile ):where(:not(.bizco-faq-btn a, .bizco-faq-btn .wp-block-button__link)):hover::after{ content:""; display:block; position:absolute; inset:-4px; border-radius:0; z-index:-1; margin:0; padding:0; border:0; width:auto; height:auto; background:none; box-shadow:none; filter:none; transform:none; opacity:1; pointer-events:auto; } /* Our own cards and CTAs are position:static; give the strip something to anchor to. Hover-only, so the resting page is untouched. */ :where( .bizco-footer-banner__cta, .bizco-cmp-cta, .bizco-svb-cta, a.bizco-cta-green, button.bizco-cta-green, .bizco-mx-cta, .bizco-mxp-cta, .bizco-help-card, .bizco-mb-tile, .bizco-pol-card, .bizco-ref-tile ):hover{ position:relative; } /* The one element whose ::after is already spoken for (its "→"), so its strip goes on ::before. Written at full specificity because it has to outrank Blocksy's own ::before rule; every property that rule sets is restated here so nothing of the glow leaks through. */ .bizco-faq-section .bizco-faq-btn a:hover::before, .bizco-faq-section .bizco-faq-btn .wp-block-button__link:hover::before{ content:""; display:block; position:absolute; inset:-4px; border-radius:0; z-index:-1; margin:0; padding:0; border:0; width:auto; height:auto; background:none; box-shadow:none; filter:none; transform:none; opacity:1; pointer-events:auto; } } /*bizco-head:bizco-safe-area*/ html{background-color:#ffffff;background-image:linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #FAFBFC 50%, #FAFBFC 100%);background-repeat:no-repeat;}body{min-height:100vh;overscroll-behavior-y:none;}#footer{padding-bottom:env(safe-area-inset-bottom, 0px);}@supports (animation-timeline: scroll()) {@keyframes bizco-sac{0%{background-color:#ffffff;}3%{background-color:#FAFBFC;}97%{background-color:#FAFBFC;}100%{background-color:#FAFBFC;}}@media (max-width: 999.98px){body{animation-name:bizco-sac,bizco-sac;animation-duration:1s,1s;animation-timing-function:linear,linear;animation-fill-mode:both,both;animation-timeline:scroll(self),scroll(root);}body[data-panel]{animation-play-state:paused,paused;}}} /*bizco-head:bizco-mm-css*/ /* bizco-mm-v8 v1: css (owner's 2026-09-16 picks: Open Rows on white, Green Card, Status pill) */ /* ---- panel chrome: white, no spill shadow, no phantom actions bar ---- */ #offcanvas .ct-panel-inner{box-shadow:none !important;background-color:#ffffff !important;} #offcanvas .ct-panel-actions{display:none !important;} #offcanvas .ct-panel-content[data-device="mobile"]{background-color:#ffffff !important;} /* ---- iOS swipe fix v2 (2026-08-18, simulator-verified, UNCHANGED): Blocksy's body-scroll-lock targets container.querySelector('.ct-panel-content') (which even matched the EMPTY desktop div first) and reads scroll geometry from that target, while the real scroller is .ct-panel-content-INNER - so on iOS every panel swipe got preventDefault-ed (latent until the v7 menu outgrew the panel). Moving the scroller up broke scrolling entirely on real WebKit, so v2 uses the lock's own escape hatch instead: its allowTouchMove passes anything inside a .select2-container, and the companion JS adds that class to the panel's inner scroller. Panel touches scroll natively; page-behind touches stay locked. The rules below re-assert the inner's layout against Woo's select2 stylesheet and keep gestures vertical with no chaining. ---- */ #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner{overscroll-behavior:contain;touch-action:pan-y;} /* the approved panel gutter is 20px (the theme's default is 25px); the vertical padding is the theme's */ #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner{padding-left:20px !important;padding-right:20px !important;} #offcanvas .ct-panel-content-inner.select2-container{display:flex !important;flex-direction:column !important;position:static !important;margin:0 !important;width:auto !important;vertical-align:baseline !important;} /* ---- shared pieces: block containers, the thin line, group headings, icons ---- */ #offcanvas .mobile-menu .bizco-mm{display:block;margin:14px 0 0;} #offcanvas .mobile-menu .bizco-mm-ql{display:block;margin:0;} #offcanvas .mobile-menu .bizco-mm-sep{display:block;height:1px;background:#EDF0F3;margin:22px 0 20px;} #offcanvas .mobile-menu .bizco-mm-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px;} #offcanvas .mobile-menu .bizco-mm-h{display:block;font-size:18px;font-weight:700;line-height:1.35;color:#192A3D;} #offcanvas .mobile-menu .bizco-mm-ic{display:block;flex:none;} /* something in the cascade paints fill:#0F5230 onto svgs inside menu links; these are stroke icons, so every shape is fill:none except the dots that declare fill="currentColor" themselves */ #offcanvas .mobile-menu .bizco-mm svg *,#offcanvas .mobile-menu .bizco-mm-ql svg *,#offcanvas .mobile-menu .bizco-mm-cv svg *{fill:none !important;} #offcanvas .mobile-menu .bizco-mm svg *[fill="currentColor"],#offcanvas .mobile-menu .bizco-mm-ql svg *[fill="currentColor"]{fill:currentColor !important;} /* ---- rows: 48px, 34px lead column, label, chevron at the right edge; no lines between rows, no press colour (snippet 144's touch fence) ---- */ #offcanvas .mobile-menu .bizco-mm-rows{display:block;} #offcanvas .mobile-menu .bizco-mm-rows a{display:flex;align-items:center;gap:14px;height:48px;margin:0;padding:0;font-size:16.5px !important;font-weight:500 !important;line-height:1.2 !important;color:#2D2D2D !important;text-decoration:none !important;-webkit-tap-highlight-color:transparent;} #offcanvas .mobile-menu .bizco-mm-lead{flex:none;width:34px;display:flex;align-items:center;justify-content:center;color:#0F5230;} #offcanvas .mobile-menu .bizco-mm-lbl{flex:1 1 auto;min-width:0;} #offcanvas .mobile-menu .bizco-mm-cv{flex:none;margin-left:auto;display:flex;align-items:center;color:#CDD4DA;} /* ---- the green card (trial / Reactivate): #0F5230, radius 14, dot pattern masked in from the right, inverted MAX logo above the words, white arrow disc; pressed #082F1B. Deliberately NOT an existing button style (owner 2026-09-16, this surface only). ---- */ #offcanvas .mobile-menu .bizco-mm-card{position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;width:100%;box-sizing:border-box;margin:0;padding:14px 14px 14px 16px;background:#0F5230;border-radius:14px;color:#ffffff !important;font-size:17.5px !important;line-height:1.2 !important;text-decoration:none !important;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease;} #offcanvas .mobile-menu .bizco-mm-card::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.34) 1.5px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 38%,#000 100%);pointer-events:none;} #offcanvas .mobile-menu .bizco-mm-card-tx{position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;} #offcanvas .mobile-menu .bizco-mm-card img.bizco-mm-maxmark{display:block;height:18px;width:auto;margin:0;} #offcanvas .mobile-menu .bizco-mm-card-t{display:block;font-size:17.5px !important;font-weight:700 !important;line-height:1.2 !important;color:#ffffff;} #offcanvas .mobile-menu .bizco-mm-card-s{display:block;font-size:13.5px !important;font-weight:400 !important;line-height:1.2 !important;color:rgba(255,255,255,.8);} #offcanvas .mobile-menu .bizco-mm-go{position:relative;z-index:1;flex:none;width:38px;height:38px;border-radius:50%;background:#ffffff;color:#0F5230;display:grid;place-items:center;} #offcanvas .mobile-menu .bizco-mm-card:active{background:#082F1B;} /* a card at the top of a signed-in panel keeps 18px before the account block */ #offcanvas .mobile-menu .bizco-mm-card + .bizco-mm-acct2{margin-top:18px;} /* ---- guest: the sign-in line under the card ---- */ #offcanvas .mobile-menu .bizco-mm-authline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:11px 0 0;font-size:13.5px;line-height:1.3;color:#6B7780;text-align:center;} #offcanvas .mobile-menu .bizco-mm-authline a{color:#0C7A47 !important;font-size:13.5px !important;font-weight:700 !important;line-height:1.3 !important;white-space:nowrap;text-decoration:none !important;margin:0;} /* the flex row drops the text node's trailing space, so the first link carries it; the dot has 6px each side */ #offcanvas .mobile-menu .bizco-mm-authline a:first-of-type{margin-left:5px;} #offcanvas .mobile-menu .bizco-mm-authline span{margin:0 6px;color:#A3ADB5;} /* ---- account header: avatar, name with the status mark under it, Sign out ---- */ #offcanvas .mobile-menu .bizco-mm-who{display:flex;align-items:center;gap:12px;padding:2px 0 12px;} #offcanvas .mobile-menu .bizco-mm-av{flex:none;width:44px;height:44px;border-radius:50%;background:#0F5230;color:#ffffff;display:grid;place-items:center;font-size:19px;font-weight:600;line-height:1;} #offcanvas .mobile-menu .bizco-mm-wn{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;} #offcanvas .mobile-menu .bizco-mm-nm{display:block;font-size:19px;font-weight:700;line-height:1.2;color:#192A3D;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;} #offcanvas .mobile-menu .bizco-mm-mark{display:block;line-height:0;} #offcanvas .mobile-menu .bizco-mm-mark img.bizco-maxbadge{display:block;height:15px;width:auto;} #offcanvas .mobile-menu .bizco-mm-pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.4;padding:3px 9px;border-radius:999px;white-space:nowrap;} #offcanvas .mobile-menu .bizco-mm-pill--dark{background:#0F5230;color:#ffffff;} #offcanvas .mobile-menu .bizco-mm-pill--warn{background:#F6C344;color:#16211B;} /* bizco-ui-boldpills v1: e01 */ #offcanvas .mobile-menu .bizco-mm-signout{flex:none;font-size:13px !important;font-weight:700 !important;line-height:1.2 !important;color:#0C7A47 !important;text-decoration:none !important;white-space:nowrap;} /* ---- the referral code card: the same card language, smaller ---- */ #offcanvas .mobile-menu .bizco-mm-refcard{position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;width:100%;box-sizing:border-box;margin:14px 0 0;padding:12px 12px 12px 16px;background:#0F5230;border:0;border-radius:14px;color:#ffffff;text-align:left;font-family:inherit;cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;} #offcanvas .mobile-menu .bizco-mm-refcard:hover,#offcanvas .mobile-menu .bizco-mm-refcard:focus,#offcanvas .mobile-menu .bizco-mm-refcard:active{background:#0F5230;color:#ffffff;box-shadow:none;} #offcanvas .mobile-menu .bizco-mm-refcard:focus-visible{outline:2px solid #0F9558;outline-offset:2px;} #offcanvas .mobile-menu .bizco-mm-refcard::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.34) 1.5px,transparent 1.6px);background-size:16px 16px;-webkit-mask-image:linear-gradient(90deg,transparent 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 38%,#000 100%);pointer-events:none;} #offcanvas .mobile-menu .bizco-mm-refcard-tx{position:relative;z-index:1;flex:1 1 auto;min-width:0;display:block;} #offcanvas .mobile-menu .bizco-mm-refcard-l{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:rgba(255,255,255,.74);} #offcanvas .mobile-menu .bizco-mm-refcard-l .bizco-mm-refcard-l2{display:none;} #offcanvas .mobile-menu .bizco-mm-refcard-code{display:block;margin-top:1px;font-size:21px;font-weight:700;letter-spacing:.03em;line-height:1.2;color:#ffffff;} #offcanvas .mobile-menu .bizco-mm-refcard .bizco-mm-go svg.bizco-mm-ref-t{display:none;} #offcanvas .mobile-menu .bizco-mm-refcard.is-copied .bizco-mm-refcard-l1{display:none;} #offcanvas .mobile-menu .bizco-mm-refcard.is-copied .bizco-mm-refcard-l2{display:inline;} #offcanvas .mobile-menu .bizco-mm-refcard.is-copied .bizco-mm-go svg.bizco-mm-ref-c{display:none;} #offcanvas .mobile-menu .bizco-mm-refcard.is-copied .bizco-mm-go svg.bizco-mm-ref-t{display:block;} /* ---- Product Categories: the nav's own list as open rows (heading 18px/700, View All Products on the heading line, 34px round photos, chevron) ---- */ #offcanvas .mobile-menu > ul > li{margin-bottom:0 !important;} #offcanvas .mobile-menu > ul > li#menu-item-2325{display:none !important;} #offcanvas .mobile-menu > ul > li#menu-item-2317{position:relative;} #offcanvas .mobile-menu #menu-item-2317 > .ct-sub-menu-parent > .ct-menu-link{font-size:18px !important;font-weight:700 !important;line-height:1.35 !important;color:#192A3D !important;padding-top:0 !important;padding-bottom:4px !important;} /* bizco-mm-v8a v1: subwidth (TEST-MENU-1a, owner re-test 2026-09-16): Blocksy's offcanvas sub-menu is calc(100% + 10px) wide, which pushed the category chevrons and View All Products 10px past every other row; pinned to the list item's width */ #offcanvas .mobile-menu #menu-item-2317 > .sub-menu{display:block !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;padding:0 !important;margin:0 !important;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li{margin:0 !important;min-width:0;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li:not(#menu-item-3138) > .ct-menu-link{display:flex !important;align-items:center !important;justify-content:flex-start !important;gap:14px;height:48px;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;overflow:visible;box-sizing:border-box;color:#2D2D2D !important;font-size:16.5px !important;font-weight:500 !important;line-height:1.2 !important;text-decoration:none !important;transition:none !important;-webkit-tap-highlight-color:transparent;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link::after{content:none !important;} #offcanvas .mobile-menu .bizco-mm-catimg{flex:none;display:block;width:34px;height:34px;margin:0;border-radius:50%;overflow:hidden;background:#F2F5F7;} #offcanvas .mobile-menu .bizco-mm-catimg img{width:100%;height:100%;object-fit:cover;display:block;} #offcanvas .mobile-menu .bizco-mm-catlabel{flex:1 1 auto;min-width:0;display:block;margin:0;padding:0;max-width:none;background:transparent;box-shadow:none;border-radius:0;font-size:16.5px;font-weight:500;line-height:1.2;color:inherit;text-align:left;white-space:normal;} /* View All Products sits on the Product Categories heading line, right-aligned, in the site's inline text-link style (13px/700 #0C7A47). The .sub-menu is position:relative in the offcanvas, so the li hangs above the list. */ #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138{position:absolute;top:auto;bottom:calc(100% + 6px);right:0;width:auto;margin:0 !important;z-index:1;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link{display:flex !important;align-items:center !important;justify-content:flex-end !important;position:static;width:auto;height:20px;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;overflow:visible;color:#0C7A47 !important;font-size:13px !important;font-weight:700 !important;line-height:1.2 !important;text-decoration:none !important;white-space:nowrap;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link::after{content:none !important;} /* the header trigger must never keep its green hover/focus tint after a tap */ @media (hover:none), (pointer:coarse){ #header [data-device="mobile"] .ct-header-trigger:hover, #header [data-device="mobile"] .ct-header-trigger:focus, #header [data-device="mobile"] .ct-header-trigger:focus-visible, #header [data-device="mobile"] .ct-header-trigger:active{color:#2D2D2D !important;} #header [data-device="mobile"] .ct-header-trigger:hover .ct-icon, #header [data-device="mobile"] .ct-header-trigger:focus .ct-icon, #header [data-device="mobile"] .ct-header-trigger:focus-visible .ct-icon, #header [data-device="mobile"] .ct-header-trigger:active .ct-icon{fill:#2D2D2D !important;} #header [data-device="mobile"] .ct-header-trigger:hover .ct-label, #header [data-device="mobile"] .ct-header-trigger:focus .ct-label, #header [data-device="mobile"] .ct-header-trigger:active .ct-label{color:#2D2D2D !important;} /* a finger on a category row must not paint post 89's light green fill */ #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:hover, #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li > .ct-menu-link:active{background:transparent !important;color:#2D2D2D !important;} } /* hover states fenced to real pointers only (sticky-hover rule) */ @media (hover:hover) and (pointer:fine){ #offcanvas .mobile-menu .bizco-mm-rows a:hover{color:#0F5230 !important;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li:not(#menu-item-3138) > .ct-menu-link:hover{background:transparent !important;color:#0F5230 !important;} #offcanvas .mobile-menu #menu-item-2317 > .sub-menu > li#menu-item-3138 > .ct-menu-link:hover, #offcanvas .mobile-menu .bizco-mm-signout:hover, #offcanvas .mobile-menu .bizco-mm-authline a:hover{color:#0F5230 !important;text-decoration:underline !important;text-underline-offset:2px;} #offcanvas .mobile-menu .bizco-mm-card:hover{background:#0C4227;} } /*bizco-head:bizco-touch-fence*/ #offcanvas .mobile-menu .ct-menu-link::before{content:none !important;display:none !important;}@media (hover: none), (pointer: coarse){.woocommerce ul.products li:hover .ct-media-container img,.woocommerce ul.products li .ct-media-container:hover img,.woocommerce ul.products li .ct-media-container:focus-visible img{transform:none !important;}.woocommerce ul.products li:hover .ct-media-container{box-shadow:none !important;}.woocommerce ul.products li:hover .woocommerce-loop-product__title,.woocommerce ul.products li:hover .woocommerce-loop-category__title{color:#2D2D2D !important;}.woocommerce ul.products li .ct-media-container{-webkit-tap-highlight-color:transparent;}} /*bizco-head:bizco-control-system*/ /* ===================================================================== 0) BUTTON CORNER Blocksy has no Customizer field for this, so every theme/Woo button fell back to its built-in 3px - including the PDP Add to cart, which sat at 3px next to an 8px stepper and an 8px secondary in the same row. One corner. Buttons that set their own radius (header pills, MAX CTA, form submits, FAQ) declare it at higher specificity and are unaffected. ===================================================================== */ :root{ --theme-button-border-radius:8px; } /* ===================================================================== 0b) ONBOARDING BAND TITLE The post-subscription onboarding is a My Account endpoint, so Blocksy paints "My account" in the title band. The endpoint already declares its own title ("Getting started with MAX", snippet 134) but only the document title uses it. Swapped here rather than in 134 because snippet 139 paints the band at wp_head 200 and outranks anything printed earlier. Same technique 139 uses for Help Center: the real h1 stays in the DOM for screen readers. ===================================================================== */ body.bizco-onboarding .hero-section h1.page-title{ font-size:0 !important; line-height:0 !important; } body.bizco-onboarding .hero-section h1.page-title::before{ content:"Getting started with "; display:inline; /* size, colour and spacing come from snippet 139 bizco-ptb--swap, the same rules Help Center and the Referral page use. Setting them here would fork the band type ramp. */ } /* The word MAX is the inverted wordmark, set on the cap height of the title and sitting on its baseline - the same treatment the MAX modal and the registration headline use. 200x95 is the real file, so the box is kept at that ratio rather than guessed. */ body.bizco-onboarding .hero-section h1.page-title::after{ content:""; display:inline-block; /* The h1 itself is font-size:0 (that is how the swap hides the real text), so an em height here would resolve to zero. The mark restates the band ramp from snippet 139 so it tracks the title at every width. */ font-size:clamp(26px, 2.55vw, 36px); height:.74em; aspect-ratio:200 / 95; margin-left:.16em; vertical-align:baseline; position:relative; top:.06em; /* home_url() keeps this correct on staging and production, not just local. The file is 400x190, the same 200:95 ratio as the box above. */ background:url("https://bizcowholesale.com/images/bizco-max-logo-white-cutout.png") left center / contain no-repeat; } /* ===================================================================== 1) VARIATION SWATCH PILLS (product page) Blocksy paints these from three custom properties, set in its generated stylesheet from the theme palette: --swatch-button-background-color / -text-color / -border-color Overriding the properties (rather than the declarations) keeps its own transitions and out-of-stock handling intact. Size and font come from snippet 79 (36px / 14px). ===================================================================== */ [data-swatches-type="button"] .ct-swatch{ border-width:1px; --swatch-button-background-color:#ffffff; --swatch-button-text-color:#3F4A46; --swatch-button-border-color:#D9E0DB; } [data-swatches-type="button"] :where(:not(.ct-out-of-stock)):hover .ct-swatch{ --swatch-button-background-color:#ffffff; --swatch-button-text-color:#0F5230; --swatch-button-border-color:#0F5230; box-shadow:inset 0 0 0 1px #0F5230; } /* bizco-test-pilltap1 v1 (chosen) (case PILL-TAP-1, owner report 2026-10-01 from a phone): Blocksy Companion Pro 2.1.57 (installed 2026-09-19) marks the chosen pill aria-pressed="true" and no longer adds .active, so these rules had stopped matching: the chosen pill showed Blocksy's brighter fill, and on a phone (which keeps hover on the last pill tapped) only the hover ring. :is() carries the weight of .active, so the cascade is unchanged, and .active still counts if the plugin is ever rolled back. */ [data-swatches-type="button"] :is(.active,[aria-pressed="true"]) .ct-swatch{ --swatch-button-background-color:#0F5230; --swatch-button-text-color:#ffffff; --swatch-button-border-color:#0F5230; box-shadow:none; } [data-swatches-type="button"] :is(.active,[aria-pressed="true"]):hover .ct-swatch{ --swatch-button-background-color:#0C4227; --swatch-button-border-color:#0C4227; box-shadow:none; } /* On a touch screen (the site's touch query) the darker mouse-over green would stay on the pill just tapped; it shows the plain chosen green, as a computer does once the mouse moves away. Before the sold-out rules below, which stay heavier, so a sold-out pill never fills. */ @media (hover: none), (pointer: coarse){ [data-swatches-type="button"] :is(.active,[aria-pressed="true"]):hover .ct-swatch{ --swatch-button-background-color:#0F5230; --swatch-button-border-color:#0F5230; } } /* A sold-out size must never look chosen (owner 2026-09-02). Selecting one still works - the shopper can read its price and specs, and the buy row reports it is unavailable - but filling the pill deep green reads as "this is going in my cart", which it can never be. So the out-of-stock pill holds its resting colours in every state: selected, hovered and both. Blocksy's own 0.4 opacity on .ct-swatch-content is untouched, so it still reads as unavailable, and the red SOLD OUT badge on the gallery image (snippet 194) is what confirms the selection landed. Listed after the .active rules and one class heavier, so it wins on both specificity and order. */ [data-swatches-type="button"] .ct-out-of-stock .ct-swatch, [data-swatches-type="button"] .ct-out-of-stock:hover .ct-swatch, /* bizco-test-pilltap1 v1 (sold out): chosen = .active or aria-pressed, as above */ [data-swatches-type="button"] .ct-out-of-stock:is(.active,[aria-pressed="true"]) .ct-swatch, [data-swatches-type="button"] .ct-out-of-stock:is(.active,[aria-pressed="true"]):hover .ct-swatch{ --swatch-button-background-color:#ffffff; --swatch-button-text-color:#3F4A46; --swatch-button-border-color:#D9E0DB; box-shadow:none; } .ct-swatch-container:focus-visible, .ct-swatch-container .ct-swatch:focus-visible{ outline:2px solid #0F9558; outline-offset:2px; } /* ===================================================================== 4) NATIVE elements, styled per-snippet at four different heights with 10px corners and, in several places, a green focus glow. The browser owns the open list, so only the closed control can be skinned - it gets the identical box to the custom listbox so the two families read as one control. Scoped to our own components by class prefix, so WooCommerce and theme selects (the shop "Sort by", for one) are left alone. `appearance` is deliberately NOT reset here: several of these already sit behind a hand-placed chevron and set it themselves, and the rest need to keep the browser's own arrow. ===================================================================== */ :is([class^="bizco-"], [class*=" bizco-"]) select:not(.bizco-select__native), select[id^="bizco-"]:not(.bizco-select__native){ height:48px !important; min-height:48px !important; border:1px solid #D9E0DB !important; border-radius:8px !important; background-color:#ffffff !important; font-family:Outfit, sans-serif !important; font-size:16px !important; color:#1F2A24 !important; line-height:1 !important; box-shadow:none !important; transition:border-color .15s ease, box-shadow .15s ease; } :is([class^="bizco-"], [class*=" bizco-"]) select:not(.bizco-select__native):hover, select[id^="bizco-"]:not(.bizco-select__native):hover{ border-color:#BFCCC4 !important; } /* Crisp ring, never a glow - and Blocksy reserves its own 2px outline on form fields, so that has to be turned off by name. */ :is([class^="bizco-"], [class*=" bizco-"]) select:not(.bizco-select__native):focus, select[id^="bizco-"]:not(.bizco-select__native):focus{ outline:0 none !important; outline-offset:0 !important; border-color:#0F5230 !important; box-shadow:inset 0 0 0 1px #0F5230 !important; } /* ===================================================================== 3) QUANTITY STEPPER — STABLE STATES Clicking + or - was leaving pieces of the control highlighted. Three separate causes, all of them here so every stepper on the site is fixed once rather than four times: a. The +/- controls were SELECTABLE. Blocksy's are s and the loop-card ones are