/** * JezPress Woo Side Cart — front-end styles. * * Everything a store can change lives in the settings-driven inline style that * WordPress prints after this file. What is here is structure: layout, states, * transitions, and the resets needed to survive an opinionated theme. * * The state classes (jpwsc-cart-open, jpwsc-slider-open, jpwsc-drawer-open) are * set on and , so any selector can react to any panel's state. */ /* ========================================================================== Panels ========================================================================== */ .jpwsc-markup * { box-sizing: border-box; } .jpwsc-markup a { text-decoration: none; } .jpwsc-markup button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; text-align: inherit; line-height: inherit; } /* Open and close is a transform, so the panel is always fully off-screen no matter the viewport width, and the animation stays on the compositor. The custom properties come from the settings-driven inline style. */ .jpwsc-container, .jpwsc-slider, .jpwsc-drawer { position: fixed; display: flex; flex-direction: column; width: 100%; background-color: #fff; z-index: 999999; transform: translateX(var(--jpwsc-hidden-x, 100%)); transition: transform .4s ease-out; will-change: transform; } .jpwsc-cart-open .jpwsc-container, .jpwsc-slider-open .jpwsc-slider { transform: translateX(0); } .jpwsc-drawer-open .jpwsc-drawer { transform: translateX(var(--jpwsc-drawer-x, 0)); } .jpwsc-slider { z-index: 1000000; } .jpwsc-drawer { z-index: 999998; visibility: hidden; } .jpwsc-drawer-modal { display: none; } .jpwsc-cart-open .jpwsc-drawer-modal { display: block; } .jpwsc-drawer-open .jpwsc-drawer { visibility: visible; } .jpwsc-drawer-open .jpwsc-basket { display: none !important; } /* Scroll-lock the page behind an open cart. `scrollbar-gutter` keeps the space the scrollbar occupied, so the page behind does not jump sideways ~15px every time the cart opens. */ html.jpwsc-cart-open { scrollbar-gutter: stable; } html.jpwsc-cart-open, body.jpwsc-cart-open { overflow: hidden !important; } /* Stop a flick at the end of the cart list from scrolling the page behind it. */ .jpwsc-body, .jpwsc-slider-panel, .jpwsc-slider-body, .jpwsc-drawer-body { overscroll-behavior: contain; } .jpwsc-overlay { position: fixed; inset: 0 0 auto 0; width: 100%; height: 0; background-color: #000; opacity: 0; z-index: 999996; transition: height 0s .4s, opacity .4s; } .jpwsc-cart-open .jpwsc-overlay { height: 100%; opacity: .7; transition: height 0s 0s, opacity .4s; } /* Thin, unobtrusive scrollbars inside the panels. */ .jpwsc-markup *::-webkit-scrollbar { width: 8px; } .jpwsc-markup *::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 10px; } .jpwsc-markup *::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 50px; } /* ========================================================================== Loading state ========================================================================== */ .jpwsc-loading-veil { position: absolute; inset: 0; display: none; background-color: #eee; opacity: .65; z-index: 10; } .jpwsc-loading-spinner { position: absolute; top: 50%; left: 50%; display: none; font-size: 26px; z-index: 11; transform: translate(-50%, -50%); } .jpwsc-is-loading > .jpwsc-loading-veil, .jpwsc-is-loading > .jpwsc-loading-spinner { display: block; } .jpwsc-loading-spinner .jpwsc-icon { animation: jpwsc-spin 1s linear infinite; } @keyframes jpwsc-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .jpwsc-container, .jpwsc-slider, .jpwsc-drawer, .jpwsc-overlay, .jpwsc-card-back, .jpwsc-suggested-track { transition-duration: .01ms !important; } .jpwsc-loading-spinner .jpwsc-icon { animation-duration: 3s; } } /* ========================================================================== Icons ========================================================================== */ .jpwsc-icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; } /* ========================================================================== Floating basket ========================================================================== */ .jpwsc-basket { position: fixed; display: flex; align-items: center; justify-content: center; margin: 10px; z-index: 999997; transition: transform .4s ease-out; } /* Ride along with the panel so the basket ends up sitting against its edge. */ .jpwsc-cart-open .jpwsc-basket { transform: translateX(var(--jpwsc-basket-shift, 0)); } .jpwsc-basket-icon { display: flex; line-height: 1; } .jpwsc-basket-icon img { display: block; height: auto; } .jpwsc-basket-count { position: absolute; width: 28px; height: 28px; line-height: 28px; font-size: 13px; text-align: center; border-radius: 50%; overflow: hidden; } /* Fly-to-cart clone. */ .jpwsc-fly-clone { position: absolute !important; z-index: 1000001; pointer-events: none; border-radius: 6px; overflow: hidden; opacity: .9; } .jpwsc-fly-clone img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Header ========================================================================== */ .jpwsc-header { position: relative; padding: 15px; flex: 0 0 auto; } .jpwsc-header-bar { display: flex; align-items: center; gap: 8px; margin: 0 auto; min-height: 26px; } .jpwsc-header-basket { position: relative; display: inline-flex; align-items: center; font-size: 30px; } .jpwsc-header-basket-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .42em; font-weight: 600; /* Nudged down so the number sits inside the basket outline, not on its rim. */ padding-top: .18em; } .jpwsc-heading { font-weight: 600; line-height: 1.2; } .jpwsc-close, .jpwsc-drawer-close { position: absolute; top: 50%; display: flex; transform: translateY(-50%); line-height: 1; } /* ========================================================================== Free shipping bar ========================================================================== */ .jpwsc-shipping-bar { width: 100%; margin-top: 10px; text-align: center; } .jpwsc-shipping-bar-text { display: block; font-size: .85em; } .jpwsc-shipping-bar-track { width: 90%; height: 8px; margin: 8px auto 0; background-color: #eee; border-radius: 7px; overflow: hidden; } .jpwsc-shipping-bar-fill { display: block; height: 100%; background-color: #1e73be; transition: width .4s linear; } /* ========================================================================== Body ========================================================================== */ .jpwsc-body { position: relative; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; } .jpwsc-notices-wrap { position: absolute; top: 0; left: 0; right: 0; display: none; z-index: 2; } .jpwsc-notices { margin: 0; padding: 0; list-style: none; } .jpwsc-notices li { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 14px 18px; list-style: none; font-size: 14px; line-height: 1.4; } .jpwsc-notice-success { color: #21622b; background-color: #dff0d8; } .jpwsc-notice-error { color: #a94442; background-color: #f2dede; } .jpwsc-notice-icon { margin-top: .15em; font-size: 1.1em; } .jpwsc-undo-item { margin-left: 6px; text-decoration: underline; cursor: pointer; white-space: nowrap; } /* Empty state */ .jpwsc-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 34px 24px; text-align: center; } .jpwsc-empty-image { max-width: 55%; height: auto; } /* ========================================================================== Cart line — row layout ========================================================================== */ .jpwsc-product { display: flex; } .jpwsc-line-image { position: relative; align-self: center; z-index: 1; } .jpwsc-line-image img { display: block; width: 100%; height: auto; } .jpwsc-line-image .jpwsc-remove { display: block; margin: 6px auto 0; text-align: center; } .jpwsc-line-summary { display: flex; flex-direction: column; flex-grow: 1; padding-left: 14px; min-width: 0; } .jpwsc-line-info { display: flex; min-width: 0; } .jpwsc-line-main { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; min-width: 0; } .jpwsc-line-main > *:not(:last-child) { padding-bottom: 4px; } .jpwsc-line-name, .jpwsc-line-name a { font-weight: 600; overflow-wrap: anywhere; } /* Product names can legitimately contain markup — a part number in a

, a
, a span of small print. Flatten the block spacing so it reads as one name rather than a stack of paragraphs, and let nested small print stay small. */ .jpwsc-line-name p, .jpwsc-card-name p, .jpwsc-suggested-title p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; } .jpwsc-line-name p + p, .jpwsc-card-name p + p, .jpwsc-suggested-title p + p { margin-top: 2px; font-weight: 400; opacity: .8; } .jpwsc-line-aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-left: 10px; max-width: 34px; } .jpwsc-line-aside .jpwsc-remove + .jpwsc-line-total { margin-top: auto; } .jpwsc-line-total { margin-top: auto; white-space: nowrap; } .jpwsc-line-sales { display: inline-block; margin-bottom: 5px; padding: 2px 10px; border: 1px solid currentColor; border-radius: 10px; font-size: 10px; text-transform: uppercase; opacity: .75; align-self: flex-start; } .jpwsc-line-price-label, .jpwsc-line-qty-label { opacity: .7; } .jpwsc-line-qty-static { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 0; } .jpwsc-remove { display: inline-flex; align-items: center; line-height: 1; opacity: .75; transition: opacity .15s; } .jpwsc-remove:hover, .jpwsc-remove:focus-visible { opacity: 1; } .jpwsc-remove--text { font-size: 11px; text-transform: uppercase; white-space: nowrap; } /* Variation / item meta, as WooCommerce renders it. */ .jpwsc-line-meta dl.variation, .jpwsc-line-meta dl.variation p, .jpwsc-card-meta dl.variation, .jpwsc-card-meta dl.variation p { margin: 0; font-size: 13px; } .jpwsc-line-meta dl.variation, .jpwsc-card-meta dl.variation { flex-wrap: wrap; } .jpwsc-line-meta dl.variation dt, .jpwsc-line-meta dl.variation dd, .jpwsc-card-meta dl.variation dt, .jpwsc-card-meta dl.variation dd { display: inline-block; float: left; margin: 0 4px 0 0; font-style: italic; } .jpwsc-line-meta dl.variation dt, .jpwsc-card-meta dl.variation dt { clear: left; } .jpwsc-product del { display: inline-flex; text-decoration: line-through; opacity: .55; } .jpwsc-product del + ins { font-weight: 600; text-decoration: none; } /* Bundle parent / child lines read as one block. */ .jpwsc-product.jpwsc-is-parent { margin-bottom: 0; padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; } .jpwsc-product.jpwsc-is-child { margin-top: 0; padding-top: 6px; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; } .jpwsc-product.jpwsc-is-child .jpwsc-line-image img { max-width: 46px; margin-left: auto; } /* ========================================================================== Cart line — card layout ========================================================================== */ .jpwsc-pattern-card { display: flex; flex-wrap: wrap; padding: 10px; } .jpwsc-pattern-card .jpwsc-product { position: relative; flex-direction: column; height: 100%; margin: 0; padding: 0; overflow: hidden; } .jpwsc-card-media { position: relative; overflow: hidden; } .jpwsc-card-image img { display: block; width: auto; height: auto; margin: 0 auto; } .jpwsc-pattern-card .jpwsc-remove { position: absolute; top: 0; right: 0; z-index: 5; padding: 8px; } .jpwsc-card-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 8px 10px; text-align: center; } .jpwsc-card-front:empty { display: none; } .jpwsc-card-back { position: absolute; inset: 0; display: flex; overflow: auto; opacity: 0; visibility: hidden; transition: opacity var(--jpwsc-card-duration, .5s) ease, transform var(--jpwsc-card-duration, .5s) ease, visibility 0s linear var(--jpwsc-card-duration, .5s); } .jpwsc-card-back-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 100%; padding: 10px; text-align: center; } /* Reveal: hover/focus for the hover mode, a JS class for the click mode. */ .jpwsc-card--back_hover:hover .jpwsc-card-back, .jpwsc-card--back_hover:focus-within .jpwsc-card-back, .jpwsc-card.is-revealed .jpwsc-card-back { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; } /* Reveal animations — the starting position of the back face. */ .jpwsc-card[data-animation="slide-up"] .jpwsc-card-back { transform: translateY(100%); } .jpwsc-card[data-animation="slide-down"] .jpwsc-card-back { transform: translateY(-100%); } .jpwsc-card[data-animation="slide-left"] .jpwsc-card-back { transform: translateX(100%); } .jpwsc-card[data-animation="slide-right"] .jpwsc-card-back { transform: translateX(-100%); } .jpwsc-card[data-animation="fade"] .jpwsc-card-back { transform: none; } .jpwsc-card[data-animation="zoom"] .jpwsc-card-back { transform: scale(.7); } .jpwsc-card[data-animation="flip-x"] .jpwsc-card-media, .jpwsc-card[data-animation="flip-y"] .jpwsc-card-media { perspective: 800px; } .jpwsc-card[data-animation="flip-x"] .jpwsc-card-back { transform: rotateY(90deg); } .jpwsc-card[data-animation="flip-y"] .jpwsc-card-back { transform: rotateX(90deg); } /* On touch devices a tap on a linked image would follow the link instead of revealing the back, so the link is inert while hover-reveal is active. */ @media (hover: none) { .jpwsc-card--back_hover .jpwsc-card-image a { pointer-events: none; } } /* ========================================================================== Quantity stepper ========================================================================== */ .jpwsc-qty { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 5px; } .jpwsc-qty-input { flex-grow: 1; width: 0; min-width: 0; padding: 4px; font-size: 14px; text-align: center; background-color: transparent; box-shadow: none; border-radius: 0; -moz-appearance: textfield; appearance: textfield; } .jpwsc-qty--square .jpwsc-qty-input { border-top-width: 0; border-bottom-width: 0; } .jpwsc-qty-input::-webkit-outer-spin-button, .jpwsc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jpwsc-qty-step { display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 18px; font-size: 12px; user-select: none; } .jpwsc-qty--circle .jpwsc-qty-step { align-self: center; border-radius: 50%; } .jpwsc-qty--circle .jpwsc-qty-input { margin: 0 5px; } /* ========================================================================== Footer ========================================================================== */ .jpwsc-footer { position: relative; flex: 0 0 auto; } .jpwsc-footer-text { display: block; margin: -4px auto 10px; font-size: 90%; text-align: center; opacity: .8; } .jpwsc-empty-cart { display: block; margin-left: auto; padding: 8px 0; font-size: 13px; text-decoration: underline; opacity: .75; } .jpwsc-extras-row { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .07); border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 14px; } .jpwsc-extras-icon { display: flex; font-size: 17px; } .jpwsc-applied-coupons { display: flex; align-items: center; justify-content: space-between; flex-grow: 1; gap: 8px; flex-wrap: wrap; } .jpwsc-applied-list { display: flex; flex-wrap: wrap; gap: 6px; } .jpwsc-remove-coupon { display: inline-flex; align-items: center; gap: 3px; text-transform: uppercase; font-size: 12px; } .jpwsc-remove-coupon-icon { color: #c9302c; } .jpwsc-toggle-slider { text-decoration: underline; cursor: pointer; } /* Totals */ .jpwsc-totals { width: 100%; padding: 10px 0; } .jpwsc-total { display: flex; justify-content: space-between; padding: 3px 0; } .jpwsc-total-label { /* `min-width: 0` lets a long fee label wrap instead of forcing the row wider and squeezing the amount into a one-character column. */ flex: 1 1 auto; min-width: 0; padding-right: 10px; font-weight: 600; overflow-wrap: anywhere; } .jpwsc-total-value { /* Never wrap an amount: "NZ$15.00" broken over four lines is unreadable. */ flex: 0 0 auto; text-align: right; white-space: nowrap; } /* Small print inside a fee label should not inherit the label's bold weight. */ .jpwsc-total-label span[style], .jpwsc-total-label small { font-weight: 400; } .jpwsc-total--less { color: #2e7d32; } .jpwsc-total-total { margin-top: 5px; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, .3); } .jpwsc-total .jpwsc-edit-icon { margin-left: 5px; font-size: .85em; opacity: .7; } .jpwsc-body .jpwsc-totals { width: auto; } /* Homes and landing slots for the two blocks the script relocates below the breakpoint (see jpwsc_place_totals / jpwsc_place_suggested_products). `display: contents` so the wrapper is transparent to layout: whichever region the block is sitting in, it lays out and inherits spacing exactly as it did before these wrappers existed. That is the whole point of using them — they hold a position for the block to come back to without being able to change how it looks. A plain div would reset margin collapsing against its siblings. `:empty` rather than a media query, because a wrapper is unoccupied at whichever width it is not currently the destination for. */ .jpwsc-slot { display: contents; } .jpwsc-slot:empty { display: none; } /* Buttons */ .jpwsc-buttons { display: grid; gap: 10px; text-align: center; } .jpwsc-markup .jpwsc-btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; } .jpwsc-buttons > a:only-child { grid-column: 1 / -1; } .jpwsc-btn-total { font-style: italic; } .jpwsc-btn-total::before { content: "-"; margin-right: 6px; font-weight: 700; } .jpwsc-payment-buttons:empty { display: none; } .jpwsc-payment-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .jpwsc-payment-buttons > * { flex: 1 1 0; min-width: 100px; margin: 0; } /* ========================================================================== Slide-over panel ========================================================================== */ .jpwsc-slider-panel { display: none; flex-direction: column; overflow: auto; height: 100%; } .jpwsc-slider-panel.is-active { display: flex; } .jpwsc-slider-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; font-size: 19px; font-weight: 600; flex: 0 0 auto; } .jpwsc-slider-close { display: flex; } .jpwsc-slider-body { flex: 1 1 auto; overflow: auto; padding: 10px 20px 24px; } /* Shipping */ .jpwsc-shipping-destination { margin-bottom: 18px; text-align: center; } .jpwsc-shipping-destination-label { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; text-transform: uppercase; opacity: .6; } .jpwsc-shipping-rates { margin: 0 0 20px; padding: 0; list-style: none; } .jpwsc-shipping-rates li { margin: 0 0 7px; padding: 0; list-style: none; } .jpwsc-shipping-rates label { display: flex; align-items: baseline; gap: 6px; cursor: pointer; } /* WooCommerce's calculator form, unfolded to fit the panel. */ .jpwsc-slider .woocommerce-shipping-calculator { margin: 0; padding: 0; } .jpwsc-slider .shipping-calculator-button { display: none; } .jpwsc-slider .shipping-calculator-form { display: block !important; margin: 0; padding: 0; } .jpwsc-slider .shipping-calculator-form > p { margin: 0 0 18px; padding: 0; } .jpwsc-slider .shipping-calculator-form input, .jpwsc-slider .shipping-calculator-form select, .jpwsc-slider .shipping-calculator-form .select2-container { width: 100%; } .jpwsc-slider button[name="calc_shipping"] { display: block; margin: 0 auto; } /* select2 renders into , so it needs to clear our panels. */ .select2-container--open { z-index: 1000002; } /* Coupons */ .jpwsc-coupon-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 16px 0; } .jpwsc-coupon-form input { flex: 1 1 120px; min-width: 0; text-align: center; text-transform: uppercase; } .jpwsc-coupon-applied { margin-bottom: 18px; font-size: 14px; } .jpwsc-coupon-applied-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .jpwsc-coupon-saved { color: #2e7d32; font-weight: 600; } .jpwsc-coupon-code { font-weight: 600; text-transform: uppercase; } .jpwsc-coupon-applied .jpwsc-remove-coupon { font-size: 11px; text-decoration: underline; } .jpwsc-coupon-list-status { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 0; font-size: 14px; opacity: .7; } .jpwsc-coupon-list-spinner { animation: jpwsc-spin 1s linear infinite; } .jpwsc-coupon-group { margin-bottom: 28px; padding: 0 20px; border: 1px solid rgba(0, 0, 0, .08); font-size: 14px; } .jpwsc-coupon-group-label { display: inline-block; margin: 18px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: .6; } .jpwsc-coupon-row { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px dashed rgba(0, 0, 0, .25); } .jpwsc-coupon-row:last-child { margin-bottom: 18px; border-bottom: 0; } .jpwsc-coupon-row > * { display: block; margin-bottom: 8px; } .jpwsc-coupon-row-code { display: inline-block; padding: 1px 18px; border: 1px dashed currentColor; text-transform: uppercase; font-weight: 600; } .jpwsc-coupon-row-off { color: #2e7d32; font-weight: 600; } .jpwsc-coupon-row-notice { font-size: 13px; opacity: .7; } /* ========================================================================== Suggested products ========================================================================== */ .jpwsc-suggested { position: relative; padding: 10px 0; } .jpwsc-suggested-heading { display: block; font-weight: 600; text-align: center; } .jpwsc-suggested-viewport { overflow: hidden; } .jpwsc-suggested-track { display: flex; margin: 0; padding: 0; list-style: none; transition: transform .45s ease; } .jpwsc-suggested-slide { flex: 0 0 100%; margin: 0; padding: 0; list-style: none; } .jpwsc-suggested-product { display: flex; align-items: center; gap: 14px; padding: 10px 18px; height: 100%; } .jpwsc-suggested-image img { display: block; width: 100%; height: auto; } .jpwsc-suggested-details { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; gap: 5px; min-width: 0; } .jpwsc-suggested-title { display: block; overflow-wrap: anywhere; } .jpwsc-suggested-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .jpwsc-suggested-atc a.button { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-transform: uppercase; } /* Narrow: the details stack instead of sitting on one row. */ .jpwsc-suggested--narrow .jpwsc-suggested-bottom { flex-direction: column; align-items: flex-start; } /* Column: several products visible per slide, stacked vertically. */ .jpwsc-suggested--column .jpwsc-suggested-track { flex-wrap: wrap; } .jpwsc-suggested--column .jpwsc-suggested-product { flex-direction: column; text-align: center; } .jpwsc-suggested--column .jpwsc-suggested-details { align-items: center; } .jpwsc-suggested-nav { position: absolute; top: 50%; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: rgba(255, 255, 255, .85); border-radius: 50%; transform: translateY(-50%); z-index: 2; } .jpwsc-suggested.has-slider .jpwsc-suggested-nav { display: flex; } .jpwsc-suggested-prev { left: 2px; } .jpwsc-suggested-next { right: 2px; } .jpwsc-footer .jpwsc-suggested { margin-top: 10px; } /* ========================================================================== Drawer ========================================================================== */ .jpwsc-drawer-content { display: flex; flex-direction: column; height: 100%; } .jpwsc-drawer-header { position: relative; display: flex; align-items: center; justify-content: center; padding: 15px; max-height: 80px; flex: 0 0 auto; } .jpwsc-drawer-heading { font-weight: 600; } .jpwsc-drawer-body { flex: 1 1 auto; overflow: auto; } .jpwsc-drawer .jpwsc-suggested, .jpwsc-drawer .jpwsc-suggested-heading { padding: 0; } .jpwsc-drawer .jpwsc-suggested-heading { display: none; } .jpwsc-drawer-toggle { position: absolute; top: 50%; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; background-color: #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); transform: translateY(-50%); transition: opacity .4s; z-index: 3; } .jpwsc-cart-open .jpwsc-container > .jpwsc-drawer-toggle { display: flex; } .jpwsc-drawer-open .jpwsc-container > .jpwsc-drawer-toggle { opacity: 0; pointer-events: none; } .jpwsc-drawer .jpwsc-drawer-toggle { display: flex; opacity: 0; pointer-events: none; } .jpwsc-drawer-open .jpwsc-drawer .jpwsc-drawer-toggle { opacity: 1; pointer-events: auto; } /* ========================================================================== Cart menu / shortcode basket ========================================================================== */ .jpwsc-shortcode .jpwsc-cart-trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; } .jpwsc-shortcode-basket { position: relative; display: inline-flex; } .jpwsc-shortcode-icon { display: flex; line-height: 1; } .jpwsc-shortcode-icon img { display: block; height: auto; } .jpwsc-shortcode-count { position: absolute; top: -5px; right: -8px; width: 18px; height: 18px; line-height: 18px; font-size: 12px; text-align: center; border-radius: 50%; } /* WooCommerce's own "View cart" link is redundant next to the side cart. */ .jpwsc-notices a.button.wc-forward { display: none; } /* ========================================================================== Cart and checkout pages ========================================================================== */ /* Shipping is owned by the checkout form on the checkout page — the side cart must not offer a second, conflicting way to change it. */ .woocommerce-checkout .jpwsc-slider-panel[data-slider="shipping"] { display: none !important; } .woocommerce-checkout .jpwsc-total-shipping .jpwsc-toggle-slider { pointer-events: none; text-decoration: none; } .woocommerce-checkout .jpwsc-total-shipping .jpwsc-edit-icon { display: none; } /* ========================================================================== Small screens ========================================================================== */ /* The open-state basket is hidden below the configured cart width — that breakpoint is emitted with the settings-driven inline style, because it depends on a value only PHP knows. A fixed breakpoint here would leave the basket shifted off-screen for every viewport between it and the cart width. */ @media (max-width: 480px) { .jpwsc-container, .jpwsc-slider { max-width: 100%; } .jpwsc-line-aside { max-width: 46px; } }