/** * USAR WC Bridge — Package product-page layout (v0.9.43) * Compact type scale. Scoped to body.usar-pkg-page (registration packages) * and body.usar-simple-product-page (floating cart only). Two-column on * desktop; single column under 1000px. */ /* ---- hide the elements our enhanced blocks replace (package pages only) ---- */ body.usar-pkg-page .entry-summary > .price, body.usar-pkg-page .summary > .price { display: none !important; } body.usar-pkg-page .usar-wc-reg-addons-title, body.usar-pkg-page .usar-wc-reg-included { display: none !important; } /* the "What's in the package" contents card is replaced by the Included list * that now leads the add-ons block (§12); hide it here. */ body.usar-pkg-page .usar-pkg-contents { display: none !important; } /* the sticky application panel (§4) needs NO scroll-container ancestor. The * theme sets overflow-x:hidden on #page + body, which forces overflow-y to * auto (a scroll container) and breaks position:sticky. overflow-x:clip stops * the same horizontal scroll without creating a scroll container. Package pages * only. */ body.usar-pkg-page { overflow-x: clip !important; overflow-y: visible !important; } body.usar-pkg-page #page.container { overflow-x: clip !important; overflow-y: visible !important; } /* ---- 1. price header ---- */ .usar-pkg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; } .usar-pkg-price-now { font-size: 25px; font-weight: 800; color: #1c2431; line-height: 1; } .usar-pkg-price-was { font-size: 15px; color: #7a828f; text-decoration: line-through; } .usar-pkg-price-save { background: #fdecec; color: #c8202f; font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 999px; } .usar-pkg-price-note { color: #5b6472; font-size: 12.5px; margin: 3px 0 12px; } .usar-pkg-price-note strong { color: #1c2431; } /* ---- 2. contents card ---- */ .usar-pkg-contents { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .usar-pkg-contents-title { font-size: 14px; color: #0d2149; margin: 0 0 12px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .usar-pkg-contents-flag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #c8202f; padding: 2px 7px; border-radius: 4px; } .usar-pkg-contents-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .usar-pkg-contents-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #5b6472; font-weight: 700; margin: 0 0 6px; } .usar-pkg-contents-list { list-style: none; margin: 0; padding: 0; } .usar-pkg-contents-list li { position: relative; padding: 3px 0 3px 20px; font-size: 12.5px; line-height: 1.4; color: #1c2431; border-bottom: 1px dashed #eef0f4; } .usar-pkg-contents-list li:last-child { border-bottom: 0; } .usar-pkg-check { position: absolute; left: 0; top: 3px; color: #1f9d55; font-weight: 800; font-size: 12px; } /* ---- 3. compare table ---- */ .usar-pkg-compare { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; padding: 14px 16px; margin: 14px 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .usar-pkg-compare-title { font-size: 14px; color: #0d2149; margin: 0 0 10px; display: flex; align-items: center; gap: 7px; } .usar-pkg-compare-flag { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: #0d2149; padding: 2px 7px; border-radius: 4px; } .usar-pkg-compare-scroll { overflow-x: auto; } .usar-pkg-compare-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 440px; } .usar-pkg-compare-table th, .usar-pkg-compare-table td { padding: 6px 6px; text-align: center; border-bottom: 1px solid #e4e7ec; } .usar-pkg-compare-table th:first-child, .usar-pkg-compare-table td:first-child { text-align: left; color: #1c2431; } .usar-pkg-compare-table thead th { font-size: 11px; color: #5b6472; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; } .usar-pkg-compare-table th.is-current { background: #0d2149; color: #fff; border-radius: 6px 6px 0 0; } .usar-pkg-compare-table td.is-current { background: #fbf7ec; } .usar-pkg-compare-pop { display: block; font-size: 8.5px; color: #b8912f; letter-spacing: .03em; margin-top: 1px; } .usar-pkg-y { color: #1f9d55; font-weight: 800; } .usar-pkg-n { color: #c3cad4; } .usar-pkg-compare-price td { border-top: 2px solid #e4e7ec; } .usar-pkg-compare-foot { font-size: 11px; color: #8b94a2; margin: 8px 0 0; } /* ---- 4. two-column layout (desktop only) ---- */ @media (min-width: 1000px) { body.usar-pkg-page form.cart.usar-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; align-items: start; } /* package image sits at the top of the left column, beside the application */ body.usar-pkg-page form.cart.usar-2col > .woocommerce-product-gallery { grid-column: 1; margin: 0 0 14px !important; max-width: 360px; float: none !important; width: auto !important; } body.usar-pkg-page form.cart.usar-2col > .woocommerce-product-gallery img { border-radius: 12px; } body.usar-pkg-page form.cart.usar-2col > .usar-pkg-contents, body.usar-pkg-page form.cart.usar-2col > .usar-wc-reg-addons, body.usar-pkg-page form.cart.usar-2col > .usar-pkg-desc, body.usar-pkg-page form.cart.usar-2col > .usar-pkg-compare { grid-column: 1; margin-left: 0; margin-right: 0; } body.usar-pkg-page form.cart.usar-2col > .usar-two-col-right { grid-column: 2; grid-row: 1 / span 30; /* area spans the full left-column height so… */ align-self: start; position: sticky; top: 96px; /* …the panel can stick while you scroll past the left items */ display: flex; flex-direction: column; gap: 14px; margin: 0; } body.usar-pkg-page form.cart.usar-2col > .usar-two-col-right > * { margin: 0 !important; } } /* ---- 5. floating order/cart bar ---- */ .usar-pkg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background: #fff; border-top: 1px solid #e4e7ec; box-shadow: 0 -6px 24px rgba(13,33,73,.12); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px max(16px, calc((100% - 1120px) / 2)); transform: translateY(110%); transition: transform .22s ease; } .usar-pkg-bar.is-visible { transform: translateY(0); } .usar-pkg-bar-info { min-width: 0; } .usar-pkg-bar-label { font-size: 11px; color: #5b6472; font-weight: 600; } .usar-pkg-bar-total { font-size: 17px; font-weight: 800; color: #0d2149; } .usar-pkg-bar-total small { font-size: 11px; font-weight: 500; color: #5b6472; margin-left: 5px; } .usar-pkg-bar-btn { background: #c8202f; color: #fff; border: 0; border-radius: 9px; padding: 11px 22px; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; } .usar-pkg-bar-btn:hover { background: #a81a26; } body.usar-pkg-page, body.usar-simple-product-page { padding-bottom: 68px; } @media (max-width: 640px) { .usar-pkg-bar { padding: 9px 12px; } .usar-pkg-bar-total { font-size: 15px; } .usar-pkg-bar-btn { padding: 10px 16px; font-size: 13px; } } /* ---- 6. compact the pre-existing add-on rows + upgrade cards on package pages ---- * These blocks are rendered/styled by the base bridge module; here we only * tighten their scale on the enhanced package layout so they sit in proportion * with the new compact cards. Scoped to body.usar-pkg-page; regular pages * keep the original sizing. */ body.usar-pkg-page .usar-wc-reg-addons-summary { padding: 9px 14px !important; } body.usar-pkg-page .usar-wc-reg-addons-summary-count { font-size: 11.5px !important; } body.usar-pkg-page .usar-wc-reg-addon-label { padding-top: 5px !important; padding-bottom: 5px !important; } body.usar-pkg-page .usar-wc-reg-addon-thumb { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; } body.usar-pkg-page .usar-wc-reg-addon-name { font-size: 12.5px !important; line-height: 1.35 !important; } body.usar-pkg-page .usar-wc-reg-addon-included, body.usar-pkg-page .usar-wc-reg-addon-price, body.usar-pkg-page .usar-wc-reg-addon-price-now, body.usar-pkg-page .usar-wc-reg-addon-price-strike, body.usar-pkg-page .usar-wc-reg-addon-price-save, body.usar-pkg-page .usar-wc-reg-addon-bundle-tag, body.usar-pkg-page .usar-wc-reg-addon-rec { font-size: 10.5px !important; } body.usar-pkg-page .usar-wc-reg-addons-help { font-size: 11.5px !important; } body.usar-pkg-page #usar-wc-upgrades { font-size: 13px !important; } body.usar-pkg-page .usar-wc-upgrades-heading { font-size: 15px !important; } body.usar-pkg-page .usar-wc-upgrade-card { padding: 11px 13px !important; } body.usar-pkg-page .usar-wc-upgrade-title { font-size: 13.5px !important; } body.usar-pkg-page .usar-wc-upgrade-price { font-size: 12.5px !important; } body.usar-pkg-page .usar-wc-upgrade-sub { font-size: 11.5px !important; } body.usar-pkg-page .usar-wc-wallet-opt { padding: 9px 10px !important; } body.usar-pkg-page .usar-wc-wallet-opt-body { font-size: 11.5px !important; } body.usar-pkg-page .usar-wc-wallet-opt-pill { font-size: 9px !important; } /* ---- 7. header order + right-size oversized titles/widgets (package pages) ---- * Header stack matches the approved mockup: title (normal), a simple review * line directly below it, the short description, then the price header — the * package image drops into the left column beside the application (see §4). * The reviews widget (usar-reviews-manager) shipped a 58px "4.9" + big stars; * here it's a single normal-size line. Scoped to body.usar-pkg-page. */ body.usar-pkg-page h1.product_title { font-size: 24px !important; line-height: 1.25 !important; margin: 0 0 6px !important; } body.usar-pkg-page .usar-rm-wc-toprating { margin: 2px 0 10px !important; } body.usar-pkg-page .usar-rm-wc-toprating__link { text-decoration: none !important; } /* one clean, borderless, baseline-aligned line: 4.9 ★★★★★ 34 reviews. * v0.9.47 — scope ONLY to the compact header pill (.usar-rm-summary--compact). * The full "What USAR handlers say" histogram uses the bare .usar-rm-summary * (a CSS grid); earlier we matched that too and forced it inline-flex, which * collapsed the distribution bars' 1fr track to 0. Leave the full block alone. */ body.usar-pkg-page .usar-rm-summary--compact { display: inline-flex !important; align-items: center !important; gap: 7px !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; } body.usar-pkg-page .usar-rm-summary--compact .usar-rm-summary__avg { font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; } body.usar-pkg-page .usar-rm-summary--compact .usar-rm-summary__stars { display: inline-flex !important; align-items: center !important; font-size: 14px !important; line-height: 1 !important; } body.usar-pkg-page .usar-rm-summary--compact .usar-rm-star { font-size: 14px !important; line-height: 1 !important; } body.usar-pkg-page .usar-rm-summary--compact .usar-rm-summary__count { font-size: 13px !important; line-height: 1 !important; color: #5b6472 !important; } body.usar-pkg-page .woocommerce-product-details__short-description { font-size: 13.5px !important; color: #4b5563 !important; margin: 0 0 12px !important; } body.usar-pkg-page .woocommerce-product-details__short-description p { margin: 0 0 6px !important; } body.usar-pkg-page .usar-wc-product-form-title { font-size: 16px !important; } body.usar-pkg-page .usar-wc-reg-addons-summary-label strong, body.usar-pkg-page .usar-wc-reg-addons-summary strong { font-size: 13.5px !important; } body.usar-pkg-page .usar-wc-reg-addons-summary-arrow { font-size: 13px !important; } body.usar-pkg-page .usar-wc-upgrades-heading { font-size: 14px !important; } /* ---- 8. mobile / small-screen cleanup ---- * Below the two-column breakpoint everything stacks; tidy it so it reads * clean on a phone and the floating bar doesn't collide with the site's * existing "View cart" pill + Help bubble. */ @media (max-width: 820px) { /* the in-flow Add-to-Cart button is right there on mobile; the floating * bar only collides with the corner widgets, so drop it under 820px */ .usar-pkg-bar { display: none !important; } body.usar-pkg-page, body.usar-simple-product-page { padding-bottom: 0 !important; } } @media (max-width: 600px) { .usar-pkg-contents-cols { grid-template-columns: 1fr !important; gap: 2px !important; } .usar-pkg-contents-col + .usar-pkg-contents-col { margin-top: 12px; } .usar-pkg-contents { padding: 13px 14px !important; } .usar-pkg-compare { padding: 13px 14px !important; } .usar-pkg-compare-table { min-width: 0 !important; font-size: 11px !important; } .usar-pkg-compare-table th, .usar-pkg-compare-table td { padding: 5px 4px !important; } .usar-pkg-price-now { font-size: 23px !important; } body.usar-pkg-page h1.product_title { font-size: 21px !important; } body.usar-pkg-page form.cart .woocommerce-product-gallery { max-width: 320px !important; margin: 0 auto 14px !important; } } /* ---- 9. compact the application form on package pages ---- * The photo dropzones carried a 200px min-height + 56px icons + generous * padding, stacking to ~331px each and wasting vertical space. Tighten the * uploaders and inputs; still comfortably tappable. Scoped to package pages. */ body.usar-pkg-page .usar-wc-product-form-uploader { min-height: 0 !important; padding: 12px !important; } body.usar-pkg-page .usar-wc-uploader-dropzone { padding: 11px 10px !important; } body.usar-pkg-page .usar-wc-uploader-icon { width: 38px !important; height: 38px !important; } body.usar-pkg-page .usar-wc-uploader-icon svg, body.usar-pkg-page .usar-wc-uploader-icon img { width: 18px !important; height: 18px !important; } body.usar-pkg-page .usar-wc-uploader-title { font-size: 12px !important; } body.usar-pkg-page .usar-wc-uploader-cta { font-size: 13px !important; margin-top: 6px !important; } body.usar-pkg-page .usar-wc-uploader-sub { font-size: 11px !important; line-height: 1.35 !important; } body.usar-pkg-page #usar-wc-product-form input[type="text"], body.usar-pkg-page #usar-wc-product-form input:not([type]), body.usar-pkg-page #usar-wc-product-form .usar-breed-cb-input { padding: 8px 12px !important; font-size: 14px !important; min-height: 0 !important; } body.usar-pkg-page .usar-wc-product-form-help { font-size: 12.5px !important; margin-bottom: 10px !important; } /* ---- 10. denser add-on rows + upgrade/wallet cards ---- * Second pass: smaller type across the add-on list and the Optional-upgrades * block so far more fits per screen without long scrolling. Overrides the * lighter compacting in sections 6/7 above. Scoped to package pages. */ body.usar-pkg-page .usar-wc-reg-addon-label { padding: 2px 8px !important; gap: 8px !important; } body.usar-pkg-page .usar-wc-reg-addon-thumb { width: 26px !important; height: 26px !important; min-width: 26px !important; flex: 0 0 26px !important; } body.usar-pkg-page .usar-wc-reg-addon-name { font-size: 11.5px !important; line-height: 1.25 !important; } body.usar-pkg-page .usar-wc-reg-addon-included, body.usar-pkg-page .usar-wc-reg-addon-price, body.usar-pkg-page .usar-wc-reg-addon-price-now, body.usar-pkg-page .usar-wc-reg-addon-price-strike, body.usar-pkg-page .usar-wc-reg-addon-price-save, body.usar-pkg-page .usar-wc-reg-addon-bundle-tag, body.usar-pkg-page .usar-wc-reg-addon-rec { font-size: 9.5px !important; } body.usar-pkg-page .usar-wc-reg-addon-included, body.usar-pkg-page .usar-wc-reg-addon-bundle-tag { padding: 1px 6px !important; } body.usar-pkg-page .usar-wc-reg-addons-group-title, body.usar-pkg-page [class*="reg-addons-group"], body.usar-pkg-page [class*="reg-addons-cat"] { font-size: 10px !important; margin-bottom: 2px !important; padding-bottom: 2px !important; } body.usar-pkg-page [class*="reg-addons-section"] { font-size: 12px !important; } body.usar-pkg-page .usar-wc-reg-addons-help { font-size: 11px !important; margin: 6px 0 !important; } body.usar-pkg-page .usar-wc-reg-addons-summary-label strong { font-size: 13px !important; } body.usar-pkg-page .usar-wc-reg-addons-summary-count { font-size: 11px !important; } body.usar-pkg-page .usar-wc-upgrades-heading { font-size: 13px !important; margin-bottom: 8px !important; } body.usar-pkg-page .usar-wc-upgrade-card { padding: 8px 12px !important; margin-bottom: 8px !important; } body.usar-pkg-page .usar-wc-upgrade-title { font-size: 12.5px !important; } body.usar-pkg-page .usar-wc-upgrade-price { font-size: 11.5px !important; } body.usar-pkg-page .usar-wc-upgrade-sub { font-size: 10.5px !important; line-height: 1.3 !important; } body.usar-pkg-page .usar-wc-wallet-opt { padding: 7px 9px !important; } body.usar-pkg-page .usar-wc-wallet-opt-body { font-size: 10px !important; line-height: 1.3 !important; } body.usar-pkg-page .usar-wc-wallet-opt-pill { font-size: 8.5px !important; padding: 1px 6px !important; } body.usar-pkg-page [class*="upgrade-wallet-head"] { font-size: 11.5px !important; } body.usar-pkg-page [class*="upgrades-fine"] { font-size: 10.5px !important; } /* ---- 11. swipeable package gallery ---- * The WooCommerce gallery is rebuilt (by the JS) into a horizontal scroll-snap * strip: swipe on touch, prev/next arrows on desktop. Each photo carries a soft * shadow so it reads as a distinct image. Tight padding — no wasted box. */ body.usar-pkg-page .woocommerce-product-gallery { padding: 0 !important; border: 0 !important; background: none !important; } body.usar-pkg-page form.cart.usar-2col > .woocommerce-product-gallery { max-width: 400px; } /* v0.9.82 — standalone gear/accessory product pages get the same clean gallery. * Reset the container's own chrome (the orange/background block lives here, not * in the image) so only our white contain-fit slides show. */ body.usar-simple-product-page .woocommerce-product-gallery, body.usar-simple-product-page .woocommerce-product-gallery__wrapper, body.usar-simple-product-page .woocommerce-product-gallery figure { padding: 0 !important; border: 0 !important; background: none !important; background-color: transparent !important; } body.usar-simple-product-page .woocommerce-product-gallery { max-width: 460px; margin: 0 auto; } .usar-gallery { position: relative; } .usar-gallery-box { position: relative; } .usar-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 12px; } .usar-gallery-track::-webkit-scrollbar { display: none; } /* every slide is the SAME fixed square box; the photo is a contained background * image, so differently-shaped photos are always fully visible and never change * the gallery's size or crop as you scroll. Background-size can't be overridden * by the theme's `img { height:auto !important }` (v0.9.59). */ .usar-gallery-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid #eceff3; border-radius: 12px; box-shadow: 0 6px 18px rgba(13,33,73,.13); overflow: hidden; cursor: zoom-in; } .usar-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 999px; border: 1px solid #e4e7ec; background: rgba(255,255,255,.96); color: #0d2149; font-size: 22px; line-height: 1; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(13,33,73,.18); z-index: 2; transition: background .15s ease, opacity .15s ease; } .usar-gallery-arrow--prev { left: 8px; } .usar-gallery-arrow--next { right: 8px; } .usar-gallery-arrow:hover { background: #fff; } .usar-gallery-arrow[disabled] { opacity: .35; cursor: default; } /* enlarge button */ .usar-gallery-zoom { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(13,33,73,.82); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .usar-gallery-zoom:hover { background: #0d2149; } /* thumbnail filmstrip */ .usar-gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .usar-gallery-thumbs::-webkit-scrollbar { display: none; } .usar-gallery-thumb { flex: 0 0 auto; width: 54px; height: 54px; padding: 0; border: 2px solid #e4e7ec; border-radius: 8px; background: #fff; overflow: hidden; cursor: pointer; transition: border-color .12s ease; } .usar-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .usar-gallery-thumb.is-active { border-color: #0d2149; } .usar-gallery-thumb:hover { border-color: #294a70; } /* lightbox */ .usar-gallery-lightbox { position: fixed; inset: 0; z-index: 100000; background: rgba(13,20,33,.92); display: flex; align-items: center; justify-content: center; padding: 24px; } .usar-gallery-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; background: #fff; } .usar-gallery-lb-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .usar-gallery-lb-close:hover { background: rgba(255,255,255,.26); } .usar-gallery-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .usar-gallery-lb-arrow:hover { background: rgba(255,255,255,.26); } .usar-gallery-lb-arrow--prev { left: 16px; } .usar-gallery-lb-arrow--next { right: 16px; } @media (max-width: 640px) { .usar-gallery-arrow { display: none; } } /* mobile uses swipe */ /* ---- 12. included-in-package list + "add anything additional" toggle ---- * Replaces the old contents card: the items bundled with the package show * up-front (always visible); the purchasable add-ons sit behind a single * tap-to-open toggle so the block stays compact. */ /* Included box — design C: white card, solid green header strip (no pill, all * caps), two columns split Digital / Printed. No tinted background behind rows. */ .usar-pkg-included { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden; margin: 0 0 12px; padding: 0; box-shadow: 0 1px 2px rgba(16,24,40,.04); } .usar-pkg-included-strip { background: #1f9d55; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 8px 15px; } .usar-pkg-included-body { padding: 12px 15px; } .usar-pkg-included-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; } .usar-pkg-included-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 700; margin: 0 0 4px; } .usar-pkg-included-list { list-style: none; margin: 0; padding: 0; } /* strip the locked-row chrome: green left rule, checkbox, thumb, caption + the * redundant "✓ Included" pill. Just a small green check + the item name. */ body.usar-pkg-page .usar-pkg-included-list li.usar-wc-reg-addon-row { border: 0 !important; border-bottom: 1px dashed #eef0f4 !important; padding: 3px 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; } body.usar-pkg-page .usar-pkg-included-list li.usar-wc-reg-addon-row:last-child { border-bottom: 0 !important; } body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-thumb, body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-cb, body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-included, body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-price-included { display: none !important; } body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-label { padding: 0 0 0 16px !important; gap: 0 !important; cursor: default !important; position: relative !important; align-items: flex-start !important; } body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-label::before { content: '✓'; position: absolute; left: 0; top: 1px; color: #1f9d55; font-weight: 800; font-size: 11px; line-height: 1.4; } body.usar-pkg-page .usar-pkg-included-list .usar-wc-reg-addon-name { font-size: 11px !important; font-weight: 500 !important; color: #1c2431 !important; line-height: 1.4 !important; } @media (max-width: 600px) { .usar-pkg-included-cols { grid-template-columns: 1fr; } } /* ---- 13. compact the add-on size/variation pickers (package pages) ---- * The "PICK A SIZE" blocks shipped with big padded option buttons; tighten them * so a collar/harness size row doesn't dominate the add-ons list. */ body.usar-pkg-page .usar-wc-reg-addon-variations { padding: 6px 9px !important; margin: 2px 0 4px !important; } body.usar-pkg-page .usar-wc-reg-addon-variations-label { font-size: 9.5px !important; letter-spacing: .04em !important; margin: 0 0 5px !important; } /* v0.9.45 — aligned grid so every size pill is the same width and rows line * up in clean columns (was flex-wrap, which packed by content width and left * ragged rows + theme label margins bleeding big vertical gaps). */ body.usar-pkg-page .usar-wc-reg-addon-variations-options { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 6px !important; } body.usar-pkg-page .usar-wc-reg-addon-variation-opt { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } /* the visible pill is the inner ; fill the grid cell so every option matches */ body.usar-pkg-page .usar-wc-reg-addon-variation-opt span { display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; padding: 7px 8px !important; font-size: 10.5px !important; border-radius: 6px !important; } /* "add anything additional" toggle — design D: flat neutral bar, no border or * shadow, green + on the left, chevron on the right. Overrides the base amber * summary styling. */ body.usar-pkg-page details.usar-wc-reg-addons-collapsible > summary.usar-wc-reg-addons-summary { list-style: none !important; background: #f1f4f8 !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important; padding: 12px 15px !important; display: flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #1c2431 !important; cursor: pointer; } body.usar-pkg-page details.usar-wc-reg-addons-collapsible > summary.usar-wc-reg-addons-summary::-webkit-details-marker { display: none !important; } body.usar-pkg-page details.usar-wc-reg-addons-collapsible > summary.usar-wc-reg-addons-summary::marker { content: '' !important; } .usar-pkg-more-plus { color: #2e7d32; font-size: 17px; font-weight: 800; line-height: 1; } .usar-pkg-more-label { margin-right: auto; } .usar-pkg-more-count { color: #5b6472; font-weight: 500; font-size: 11.5px; } .usar-pkg-more-chev { color: #5b6472; font-size: 12px; margin-left: 10px; transition: transform .15s ease; } body.usar-pkg-page details.usar-wc-reg-addons-collapsible[open] .usar-pkg-more-chev { transform: rotate(180deg); } /* v0.9.46 — bigger, more prominent Add to cart on package pages. Quantity is * hidden server-side (registration products are sold individually), so the * button can own the full width of the application panel. */ body.usar-pkg-page form.cart button.single_add_to_cart_button { width: 100% !important; padding: 17px 24px !important; font-size: 18px !important; font-weight: 700 !important; border-radius: 10px !important; letter-spacing: 0.2px !important; line-height: 1.2 !important; } /* v0.9.48 — the site header (.ussar-header) is sticky (~84px). When Add to cart * fires HTML5 required-field validation, the browser scrolls the first invalid * field to the top of the viewport, hiding it behind that header. Reserve the * header's height for every scroll-into-view (validation focus, anchor jumps) * so the field lands just below the header. scroll-margin-top on the controls * (universal support) plus scroll-padding-top on the scroll root (covers hidden * required targets like the photo/signature inputs). +32px when the WP admin * bar is present. */ body.usar-pkg-page form.cart input, body.usar-pkg-page form.cart textarea, body.usar-pkg-page form.cart select, body.usar-pkg-page form.cart [data-usar-signature], body.usar-pkg-page form.cart .usar-wc-photo-uploader { scroll-margin-top: 96px; } body.usar-pkg-page.admin-bar form.cart input, body.usar-pkg-page.admin-bar form.cart textarea, body.usar-pkg-page.admin-bar form.cart select, body.usar-pkg-page.admin-bar form.cart [data-usar-signature], body.usar-pkg-page.admin-bar form.cart .usar-wc-photo-uploader { scroll-margin-top: 128px; } html:has(body.usar-pkg-page) { scroll-padding-top: 96px; } html:has(body.usar-pkg-page.admin-bar) { scroll-padding-top: 128px; } /* v0.9.49 — declutter below the buy box on package pages. The raw SKU and the * tag list are internal taxonomy (and the tags link off to archive pages, * pulling shoppers off the purchase path) — hide them from customers; they * stay in wp-admin. Categories are kept. Also hide the near-empty "Additional * information" tab, and the redundant leading "Description" heading inside the * description tab (the tab is already labelled Description). */ body.usar-pkg-page .product_meta .sku_wrapper, body.usar-pkg-page .product_meta .tagged_as { display: none !important; } body.usar-pkg-page li.additional_information_tab, body.usar-pkg-page #tab-additional_information { display: none !important; } body.usar-pkg-page #tab-description > h2:first-child { display: none !important; } /* v0.9.50 — the full compare grid is retired from the buy column (tier step-ups * now live in the cart). Only a quiet link remains. */ body.usar-pkg-page .usar-pkg-compare-link { font-size: 12.5px; color: #5b6472; margin: 12px 0 0; } body.usar-pkg-page .usar-pkg-compare-link a { color: #294a70; font-weight: 600; text-decoration: none; white-space: nowrap; } body.usar-pkg-page .usar-pkg-compare-link a:hover { text-decoration: underline; } /* v0.9.51 — product long description relocated into the left column, directly * below the "what's included" / add-ons block (fills the shorter left column so * the tall application panel doesn't leave dead space). The original bottom tabs * area (Description + Additional information) is hidden; the Reviews Manager * block is separate and unaffected. */ body.usar-pkg-page .woocommerce-tabs { display: none !important; } .usar-pkg-desc { font-size: 13px; color: #3f4855; line-height: 1.6; margin: 16px 0 0; } .usar-pkg-desc > *:first-child { margin-top: 0 !important; } .usar-pkg-desc h2 { font-size: 16px; color: #0d2149; margin: 0 0 8px; line-height: 1.25; } .usar-pkg-desc h3 { font-size: 13.5px; color: #0d2149; margin: 14px 0 5px; } .usar-pkg-desc p { margin: 0 0 10px; } .usar-pkg-desc ul, .usar-pkg-desc ol { margin: 0 0 10px; padding-left: 20px; } .usar-pkg-desc li { margin: 0 0 4px; } .usar-pkg-desc a { color: #294a70; font-weight: 600; } /* v0.9.52 — MOBILE stacking order. The JS appends the application panel * (.usar-two-col-right) last in form.cart so it can be the sticky right column * on desktop — but in the single-column mobile flow that dumps it at the very * bottom, under the gallery, add-ons, and description ("scroll forever" to reach * the form). Below the 2-col breakpoint, make form.cart a flex column and lift * the application directly under the image: image → application → add-ons → * description → compare. */ @media (max-width: 999px) { body.usar-pkg-page form.cart.usar-2col { display: flex; flex-direction: column; } body.usar-pkg-page form.cart.usar-2col > .woocommerce-product-gallery { order: 1; } body.usar-pkg-page form.cart.usar-2col > .usar-wc-reg-addons { order: 2; } body.usar-pkg-page form.cart.usar-2col > .usar-two-col-right { order: 3; } body.usar-pkg-page form.cart.usar-2col > .usar-pkg-desc { order: 4; } body.usar-pkg-page form.cart.usar-2col > .usar-pkg-compare-link, body.usar-pkg-page form.cart.usar-2col > .usar-pkg-compare { order: 5; } } /* v0.9.56 — a locked (included) variable item like the harness in Premium/Elite * carries the standard add-on size picker; the JS relabels it "Choose your size" * and tags it .usar-pkg-included-sizepick. Present it as a natural indented * sub-row under the included item, not an "add this item" add-on block. */ body.usar-pkg-page .usar-pkg-included-list .usar-pkg-included-sizepick { background: none !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 4px 16px !important; margin: 1px 0 6px !important; } body.usar-pkg-page .usar-pkg-included-sizepick .usar-wc-reg-addon-variations-label { color: #7a828f !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin: 0 0 4px !important; } .usar-pkg-sizepick-req { color: #c8202f; } body.usar-pkg-page .usar-pkg-included-sizepick .usar-wc-reg-addon-variations-options { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; } body.usar-pkg-page .usar-pkg-included-sizepick .usar-wc-reg-addon-variation-opt span { padding: 6px 7px !important; font-size: 10px !important; } /* v0.9.57 — an included sized item's size picker (e.g. the Premium/Elite harness) * is relocated by the JS into this panel directly above the Add to Cart button, * so the required choice sits next to the action. The item still lists in the * Included box (name only); only the picker moves here. */ .usar-pkg-sizepick-panel { border: 1.5px solid #cf8a15; background: #fffdf8; border-radius: 10px; padding: 11px 13px; margin: 0 0 12px; } .usar-pkg-sizepick-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 0 0 8px; } .usar-pkg-sizepick-h { font-size: 13px; font-weight: 800; color: #0d2149; } .usar-pkg-sizepick-req { color: #c8202f; font-weight: 700; } .usar-pkg-sizepick-item { font-size: 11px; color: #7a828f; } .usar-pkg-sizepick-panel .usar-wc-reg-addon-variations { display: block !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; } .usar-pkg-sizepick-panel .usar-wc-reg-addon-variations-options { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 6px !important; } .usar-pkg-sizepick-panel.usar-pkg-sizepick-error { box-shadow: 0 0 0 3px rgba(200,32,47,.18); } /* the included-box row keeps only the name once its picker has moved out */ body.usar-pkg-page .usar-pkg-included-list li.usar-pkg-included-sized-moved .usar-wc-reg-addon-variations { display: none !important; }