/* * Product page. Gallery about 58% and buy area about 42% on desktop (docs/PRODUCT-DETAIL-UX.md); the information * sections, the upsells and the related products use the full width below them. Mobile: one column in reading order. */ .bpal-product-detail .site-main > .product,.bpal-product-detail .woocommerce div.product,.bpal-product-detail div.product{max-width:var(--bpal-container);margin-inline:auto} .bpal-product-detail div.product{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);column-gap:clamp(28px,4vw,64px);align-items:start} .bpal-product-detail div.product div.images.woocommerce-product-gallery,.bpal-product-detail div.product div.summary.entry-summary{float:none;width:auto;margin:0;padding:0} .bpal-product-detail div.product div.summary.entry-summary{padding-top:clamp(4px,1vw,16px)} .bpal-product-detail div.product .woocommerce-tabs,.bpal-product-detail div.product .up-sells,.bpal-product-detail div.product .related.products,.bpal-product-detail div.product .bpal-pdp-info{grid-column:1/-1;width:auto} .bpal-product-detail .woocommerce-tabs,.bpal-product-detail .related.products,.bpal-product-detail .up-sells{clear:both;padding-top:clamp(40px,6vw,80px)} .bpal-product-brand{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase} .bpal-product-brand a{color:var(--bpal-accent);text-decoration:none} .bpal-product-detail .product_title{margin:0 0 14px;max-width:24ch;color:var(--bpal-primary);font-family:var(--bpal-heading);font-size:clamp(26px,2.25vw,38px);line-height:1.12} .bpal-product-detail .summary .price{margin:0 0 18px;color:var(--bpal-primary);font-size:clamp(22px,2vw,30px);font-weight:700} .bpal-product-detail .woocommerce-product-details__short-description{max-width:62ch;margin-bottom:22px;line-height:1.7} /* The imported short descriptions are bold from start to end (97% of them); the page gives the emphasis, not the text. */ .bpal-product-detail .woocommerce-product-details__short-description strong,.bpal-product-detail .woocommerce-product-details__short-description b{font-weight:inherit} .bpal-product-detail form.cart,.bpal-product-detail form.variations_form{margin:18px 0 0;padding:0;border:0;background:transparent} /* Gallery (inc/product-gallery.php): a scroll-snap strip, so swiping needs no script; the thumbnails are links below it. */ .bpal-product-detail .bpal-gallery{position:relative;min-width:0} .bpal-product-detail .bpal-gallery__track{display:flex;margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--bpal-radius);background:#fff} .bpal-gallery__track::-webkit-scrollbar{display:none} .bpal-gallery__track:focus-visible{outline:2px solid var(--bpal-primary);outline-offset:2px} .bpal-product-detail .bpal-gallery__slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always} .bpal-gallery__link{display:block;cursor:zoom-in} /* WooCommerce frames the placeholder (.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder); the category illustration is shown without a frame. */ .bpal-product-detail div.product div.images .bpal-gallery__slide .woocommerce-product-gallery__image--placeholder{border:0} .bpal-product-detail .bpal-gallery__slide img{display:block;width:100%;height:auto;max-height:min(80vh,900px);object-fit:contain;background:#fff} /* The sale badge of WooCommerce (span.onsale, printed before the gallery) hangs half outside the corner of the product block (top and left -.5em), which is beside a narrow picture, not on it. It sits inside the corner of the photo area instead, above the photo, and a click on it goes through to the photo (zoom). */ .bpal-product-detail div.product>span.onsale{top:12px;left:12px;z-index:3;pointer-events:none} .bpal-gallery__thumbs{display:flex;gap:8px;margin:10px 0 0;padding:0;overflow-x:auto;list-style:none;scrollbar-width:thin} .bpal-product-detail .bpal-gallery__thumbs li{flex:0 0 72px;margin:0} .bpal-gallery__thumb{display:block;overflow:hidden;border:2px solid transparent;border-radius:var(--bpal-radius);background:#fff;line-height:0} .bpal-gallery__thumb[aria-current="true"]{border-color:var(--bpal-primary)} .bpal-gallery__thumb:focus-visible{outline:2px solid var(--bpal-primary);outline-offset:2px} .bpal-product-detail .bpal-gallery__thumb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover} .bpal-lightbox{max-width:min(96vw,1100px);max-height:96vh;padding:0;overflow:auto;border:0;border-radius:var(--bpal-radius);background:#fff} .bpal-lightbox::backdrop{background:rgba(8,20,34,.78)} .bpal-lightbox img{display:block;width:100%;height:auto;max-height:96vh;object-fit:contain} .bpal-lightbox__close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:var(--bpal-primary);color:#fff;font-size:28px;line-height:1;cursor:pointer} /* Variation form: label above the choice, the add to cart row below it. */ .bpal-product-detail table.variations{width:100%;margin-bottom:14px;border:0} .bpal-product-detail table.variations tbody,.bpal-product-detail table.variations tr{display:block} .bpal-product-detail table.variations th,.bpal-product-detail table.variations td{display:block;width:100%;padding:0;border:0;text-align:left} .bpal-product-detail table.variations th{margin-bottom:8px;color:var(--bpal-primary);font-size:14px;font-weight:700} .bpal-product-detail table.variations td{margin-bottom:16px} .bpal-product-detail table.variations select{width:100%;min-height:48px;padding:0 42px 0 14px;border:1px solid rgba(14,39,66,.24);border-radius:var(--bpal-radius);background-color:#fff;color:var(--bpal-text)} /* No "Wissen" link: it added nothing (a second click on the chosen size, or the empty option of the dropdown, clears the choice) and read as a button for the whole form. The script of WooCommerce shows it after a choice with an inline style (visibility and display, measured on staging: display "inline"), so only !important wins. */ .bpal-product-detail .reset_variations{display:none!important} .bpal-product-detail .woocommerce-variation-add-to-cart,.bpal-product-detail form.cart:not(.variations_form){display:flex;flex-wrap:wrap;align-items:stretch;gap:12px} .bpal-product-detail .quantity .qty{width:76px;min-height:52px;border:2px solid rgba(14,39,66,.55);border-radius:var(--bpal-radius);color:var(--bpal-primary);font-size:18px;font-weight:700;text-align:center} /* Until a size is chosen the quantity cannot be raised (product-detail.js, wireQuantityLock): the same dashed, grey look as a sold-out size. */ .bpal-product-detail .quantity .qty:disabled{border-style:dashed;border-color:rgba(14,39,66,.35);background:#f5f6f7;color:#59636e;-webkit-text-fill-color:#59636e;opacity:1;cursor:default} .bpal-product-detail button.single_add_to_cart_button.button{flex:1 1 220px;min-height:52px;padding:12px 24px;border:0;border-radius:var(--bpal-radius);background:var(--bpal-accent);color:var(--bpal-primary);font-size:17px;font-weight:700;cursor:pointer} .bpal-product-detail button.single_add_to_cart_button.button:hover,.bpal-product-detail button.single_add_to_cart_button.button:focus-visible{background:var(--bpal-primary);color:#fff} .bpal-product-detail button.single_add_to_cart_button.button.disabled,.bpal-product-detail button.single_add_to_cart_button.button:disabled{opacity:.5;cursor:default} /* No size chosen yet: WooCommerce marks the button .disabled and paints it purple with white text with rules that outrank the ones above (.woocommerce button.button.alt.disabled, :disabled[disabled]:hover, ...). Same colours as the active button, paler, and an arrow as pointer (never the not-allowed sign). */ body.bpal-product-detail button.single_add_to_cart_button.button.alt.disabled,body.bpal-product-detail button.single_add_to_cart_button.button.alt.disabled:hover,body.bpal-product-detail button.single_add_to_cart_button.button.alt:disabled,body.bpal-product-detail button.single_add_to_cart_button.button.alt:disabled:hover,body.bpal-product-detail button.single_add_to_cart_button.button.alt:disabled[disabled],body.bpal-product-detail button.single_add_to_cart_button.button.alt:disabled[disabled]:hover{background:var(--bpal-accent);color:var(--bpal-primary);opacity:.5;cursor:default} .bpal-product-detail .stock{font-weight:600} /* The sentence under the button when it is pressed before the choice is made (product-detail.js); an empty block takes no room. */ .bpal-choice-hint{margin:0;color:#b3261e;font-size:14px;font-weight:700;line-height:1.4} .bpal-choice-hint:not(:empty){margin-top:12px} .bpal-needs-choice table.variations th{color:#b3261e} .bpal-needs-choice table.variations select{border-color:#b3261e} .bpal-needs-choice .bpal-size-choice{outline:2px solid #b3261e;outline-offset:6px;border-radius:var(--bpal-radius)} /* Visible size buttons: the dropdown stays in the page (hidden) and is driven by the buttons. The buttons are in the HTML, so nothing moves when the script starts. Without the script, or when it cannot wire them (bpal-size-fallback), the dropdown is shown. */ .bpal-size-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px} .bpal-product-detail table.variations td:has(>.bpal-size-choice):not(.bpal-size-fallback){position:relative;margin-bottom:0} .bpal-product-detail table.variations td:has(>.bpal-size-choice):not(.bpal-size-fallback) select{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap} .bpal-product-detail table.variations td.bpal-size-fallback .bpal-size-choice{display:none} @media (scripting:none){ .bpal-product-detail table.variations td .bpal-size-choice{display:none} .bpal-product-detail table.variations td:has(>.bpal-size-choice):not(.bpal-size-fallback) select{position:static;width:100%;min-height:48px;margin:0;padding:0 42px 0 14px;overflow:visible;clip:auto;border:1px solid rgba(14,39,66,.24);white-space:normal} } .bpal-size-choice__option{display:flex;min-height:68px;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 8px;border:2px solid rgba(14,39,66,.55);border-radius:var(--bpal-radius);background:#fff;color:var(--bpal-primary);font-family:inherit;line-height:1.2;text-align:center;cursor:pointer} .bpal-size-choice__option:hover:not(:disabled){border-color:var(--bpal-primary)} .bpal-size-choice__option:focus-visible{outline:2px solid var(--bpal-primary);outline-offset:2px} .bpal-size-choice__option{-webkit-user-select:none;user-select:none} .bpal-size-choice__option[aria-pressed="true"]{border-color:var(--bpal-primary);background:rgba(14,39,66,.07);box-shadow:inset 0 0 0 1px var(--bpal-primary)} .bpal-size-table-link{display:inline-block;margin-top:10px;color:var(--bpal-primary);font-size:14px;font-weight:600} .bpal-pdp-sizes{scroll-margin-top:96px} .bpal-size-choice__label{font-size:19px;font-weight:800} .bpal-size-choice__note{display:flex;flex-direction:column;align-items:center;color:#4b5560;font-size:12px;font-weight:500;line-height:1.25} .bpal-size-choice__option:disabled{border-style:dashed;border-color:rgba(14,39,66,.35);background:#f5f6f7;cursor:default} .bpal-size-choice__option:disabled .bpal-size-choice__label{color:#59636e;text-decoration:line-through} /* A sold-out size is told by the dashed frame and the struck-through size; the words are for screen readers only, and the pointer stays an arrow (never the not-allowed sign). */ .bpal-size-choice__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Every size is a button (no dropdown anywhere, the owner, 25 October 2026). The names of sizes that are not recognised are wider than "XL": a wider column and a smaller, wrapping label. A W/L choice has two steps, each a grid of its own: the waist (W), then the lengths (L) of that waist. */ .bpal-size-choice--text{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} .bpal-size-choice--text .bpal-size-choice__label{font-size:16px;font-weight:700;overflow-wrap:anywhere} .bpal-size-choice--pair{display:block} .bpal-size-choice__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px} .bpal-size-choice__step+.bpal-size-choice__step{margin-top:16px} .bpal-size-choice__step-title{margin:0 0 8px;color:var(--bpal-primary);font-size:14px;font-weight:700} .bpal-size-choice__hint{margin:0;color:#4b5560;font-size:14px;line-height:1.4} .bpal-size-choice__option[hidden],.bpal-size-choice__hint[hidden]{display:none} /* Sections under the buy area (no tabs): description and size table left, characteristics and care advice right. */ .bpal-pdp-info{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:clamp(48px,6vw,88px)} .bpal-pdp-info--with-aside{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} .bpal-pdp-info__main,.bpal-pdp-info__aside{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-content:start;min-width:0} .bpal-pdp-card{min-width:0;padding:clamp(20px,2.6vw,34px);border:1px solid var(--bpal-line);border-radius:var(--bpal-radius);background:#fff} .bpal-pdp-card__title{margin:0 0 16px;color:var(--bpal-primary);font-family:var(--bpal-heading);font-size:clamp(20px,1.6vw,24px);line-height:1.2} .bpal-pdp-description__text{max-width:72ch;color:var(--bpal-text);font-size:17px;line-height:1.75} .bpal-pdp-description__text>*:first-child{margin-top:0} .bpal-pdp-description__text>*:last-child{margin-bottom:0} .bpal-pdp-description__text p{margin:0 0 1em} .bpal-pdp-description__text h4,.bpal-pdp-description__text h5,.bpal-pdp-description__text h6{margin:1.5em 0 .5em;color:var(--bpal-primary);font-family:var(--bpal-heading);font-size:19px;line-height:1.3} .bpal-pdp-description__text h5,.bpal-pdp-description__text h6{font-size:17px} .bpal-pdp-description__text ul,.bpal-pdp-description__text ol{margin:0 0 1em;padding-left:1.4em} .bpal-pdp-description__text li{margin:0 0 .35em} .bpal-pdp-description__text img{max-width:100%;height:auto} /* The card "Over {merk}" (Theme 0.62.0), last card of the reading column: the brand description, a small logo at the right of the heading, a link to the brand page. */ .bpal-pdp-brand__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px} .bpal-pdp-brand__title{min-width:0;margin:0} /* Two classes: WooCommerce sets height:auto and max-width:100% on every image of its pages (.woocommerce img), which would make the logo as wide as the card. */ .bpal-pdp-brand .bpal-pdp-brand__logo{display:block;flex:0 0 auto;width:auto;height:28px;max-width:130px;object-fit:contain;object-position:right center} .bpal-pdp-brand__text{max-width:72ch;color:var(--bpal-text);font-size:17px;line-height:1.75} .bpal-pdp-brand__text p{margin:0 0 1em} .bpal-pdp-brand__text p:last-child{margin-bottom:0} .bpal-pdp-brand__more{margin:1em 0 0;color:var(--bpal-text);font-size:17px;line-height:1.75} .bpal-pdp-brand__more a{font-weight:600} /* The brand logo that the imported descriptions carry, in the short and the long description (an image in a link to the brand page, a "watermark" file without a size): a small mark under the text, not an image as wide as the column. */ .bpal-product-detail .woocommerce-product-details__short-description a[href*="/merk/"] img,.bpal-product-detail .bpal-pdp-description__text a[href*="/merk/"] img,.bpal-product-detail .woocommerce-product-details__short-description img[src*="watermark"],.bpal-product-detail .bpal-pdp-description__text img[src*="watermark"]{display:block;width:auto;height:auto;max-width:min(100%,160px);max-height:56px;margin:16px 0 0;object-fit:contain;object-position:left center} /* The help block of the shop (.bpal-pd-info-bar, from a snippet outside the theme that has its own stylesheet in the head) is taken out of the description by bpal_theme_pdp_split_help_block() and printed here, across the full width of the page under the product information. The snippet lays it out for that width (two columns from 901px, one below), so nothing else is set on the block itself. */ .bpal-product-detail div.product .bpal-pdp-help{grid-column:1/-1;width:auto} .bpal-size-table-wrap{overflow-x:auto} .bpal-size-table{width:100%;border-collapse:collapse;font-size:15px;text-align:center} .bpal-size-table th,.bpal-size-table td{padding:12px 14px;border:1px solid var(--bpal-line);white-space:nowrap} .bpal-size-table thead th{background:#f5f6f7;color:var(--bpal-primary);font-weight:800} .bpal-size-table tbody th{background:#f5f6f7;color:#4b5560;font-weight:600;text-align:left} .bpal-size-table thead th.is-selected{background:var(--bpal-primary);color:#fff} .bpal-size-table td.is-selected{background:rgba(14,39,66,.08);font-weight:800} .bpal-pdp-info__aside .bpal-pdp-card{display:grid;gap:28px} .bpal-pdp-info__aside .bpal-pdp-card__title{margin-bottom:10px} .bpal-pdp-features__list{display:grid;margin:0} .bpal-pdp-features__row{display:flex;gap:16px;padding:7px 0;border-bottom:1px solid var(--bpal-line);font-size:15px} .bpal-pdp-features__row:last-child{border-bottom:0} .bpal-pdp-features__row dt{flex:0 0 38%;margin:0;color:#4b5560} .bpal-pdp-features__row dd{flex:1;min-width:0;margin:0;color:var(--bpal-primary);font-weight:700;overflow-wrap:anywhere} .bpal-pdp-features__row dd a{color:inherit} .bpal-pdp-care{padding-top:24px;border-top:1px solid var(--bpal-line)} .bpal-pdp-care__list{display:flex;flex-wrap:wrap;gap:16px 10px;margin:0;padding:0;list-style:none} .bpal-pdp-care__item{display:flex;flex:0 1 84px;flex-direction:column;align-items:center;gap:8px;color:var(--bpal-primary);text-align:center} .bpal-pdp-care__label{color:#4b5560;font-size:12px;font-weight:600;line-height:1.3} .bpal-care__icon{flex:0 0 auto;display:block;width:56px;height:56px} .bpal-pdp-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .bpal-pdp-tags__label{color:#4b5560;font-size:13px;font-weight:700} .bpal-pdp-tags__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .bpal-pdp-tags__list a{display:inline-block;padding:5px 12px;border-radius:20px;background:#f5f6f7;color:var(--bpal-primary);font-size:13px;font-weight:600;text-decoration:none} .bpal-pdp-tags__list a:hover{background:rgba(14,39,66,.1)} /* Related products: four in a row (the catalog grid rules use !important, so this does too). */ html body.bpal-product-detail .related.products ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important} /* WooCommerce sizes a card as 22.05% of its column (ul.products.columns-4 li.product); in the grid a card fills its column. */ html body.bpal-product-detail .related.products ul.products li.product,html body.bpal-product-detail .up-sells ul.products li.product{float:none;width:auto;margin:0} .bpal-product-detail .related.products ul.products::before,.bpal-product-detail .related.products ul.products::after{display:none} /* The related products are catalog cards (Theme 0.51.0, inc/product-related.php): their photo frame, lines and price come from catalog-display.css, the same as in an overview. Only the upsells keep WooCommerce's own card: the title takes two, three or five lines, the cards of a row are equally tall (grid), and the price and the "Opties selecteren" button sit at the bottom of each card, at the same height in a row whatever the title. */ html body.bpal-product-detail .up-sells ul.products li.product{display:flex;flex-direction:column} html body.bpal-product-detail .up-sells ul.products li.product>a.woocommerce-LoopProduct-link{display:flex;flex:1 1 auto;flex-direction:column} html body.bpal-product-detail .up-sells ul.products li.product .price{margin-top:auto} /* Stacked, the characteristics and care advice (a few short rows) come before the description, which can be long and repeat itself: on staging the characteristics were 4396px down a phone page. Only the look changes; the HTML, and so the reading and tab order, keeps the description first as on desktop. */ @media (max-width:900px){.bpal-pdp-info--with-aside{grid-template-columns:minmax(0,1fr)}.bpal-pdp-info--with-aside .bpal-pdp-info__aside{order:-1}} @media (max-width:480px){.bpal-size-table{font-size:13px}.bpal-size-table th,.bpal-size-table td{padding:10px 6px}} @media (max-width:768px){.bpal-product-detail div.product{grid-template-columns:minmax(0,1fr)}.bpal-product-detail div.product div.summary.entry-summary{padding-top:22px}.bpal-product-detail .product_title{max-width:none;font-size:28px}html body.bpal-product-detail .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}} /* Buy area higher on a phone: the title and price should be on the first screen, and the sizes and the button close behind them. A photo is at most about half of the screen (the vh line is for browsers without svh; it was two thirds before Theme 0.43.1, which left the title and the sizes under the fold); the category illustration of a product without photos is only a stand-in and takes about a third. The short description, a long text on most products, comes after the buy block (order in the column of the summary; the HTML keeps it first, as on a desktop, so only the look changes: a link in it, such as the brand logo, is still reached before the sizes with the keyboard). The margins that collapsed between the blocks of the summary do not collapse in a column, so the form takes none of its own. */ @media (max-width:768px){ .bpal-product-detail div.product>span.onsale{top:8px;left:8px} .bpal-product-detail .bpal-gallery__slide img{max-height:min(46vh,420px);max-height:min(46svh,420px)} .bpal-product-detail .woocommerce-product-gallery--without-images .bpal-gallery__slide img{max-height:min(34vh,260px);max-height:min(34svh,260px)} .bpal-product-detail div.product div.summary.entry-summary{display:flex;flex-direction:column} .bpal-product-detail div.product div.summary.entry-summary>.woocommerce-product-details__short-description{order:2;margin:22px 0 0} .bpal-product-detail div.product div.summary.entry-summary>form.cart{margin-top:0} /* "Kies maat" in the buy bar scrolls the size choice to the top of the screen, under the sticky header. */ .bpal-product-detail table.variations{scroll-margin-top:92px} } /* * The buy bar (Theme 0.43.1; inc/buy-bar.php, assets/js/buy-bar.js): on a phone a strip along the bottom of the screen with the price and one button, while * the add-to-cart button of the page is out of view. It is fixed, so it takes no room in the page and nothing moves when it appears. Its layer (30) is above * the page and under the header and its menus (50); the notice bars (layer 20, at the top of the page) never meet it, and a cookie banner of a plugin, which is * a much higher layer, is on top of it. The button is as tall as the one of the page (48px) and has the colours of that one. Not shown above 768px at all. */ .bpal-buy-bar { display: none; } @media (max-width: 768px) { .bpal-buy-bar:not([hidden]) { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bpal-line); background: #fff; box-shadow: 0 -4px 16px rgba(14, 39, 66, .12); animation: bpal-buy-bar-in .2s ease-out both; } .bpal-buy-bar__price { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--bpal-primary); font-size: 18px; font-weight: 700; line-height: 1.2; } .bpal-buy-bar__price del { display: block; font-size: 14px; font-weight: 500; } .bpal-buy-bar__price ins { text-decoration: none; } .bpal-buy-bar .bpal-buy-bar__button { flex: 0 1 190px; min-width: 150px; min-height: 48px; padding: 10px 18px; border: 0; border-radius: var(--bpal-radius); background: var(--bpal-accent); color: var(--bpal-primary); font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; cursor: pointer; } .bpal-buy-bar .bpal-buy-bar__button:hover { background: var(--bpal-primary); color: #fff; } .bpal-buy-bar .bpal-buy-bar__button:focus-visible { background: var(--bpal-primary); color: #fff; outline: 2px solid var(--bpal-primary); outline-offset: 2px; } /* A field that gets the focus is scrolled clear of the bar (WCAG 2.2, focus not obscured). */ html:has(.bpal-buy-bar:not([hidden])) { scroll-padding-bottom: 96px; } } @keyframes bpal-buy-bar-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bpal-buy-bar:not([hidden]) { animation: none; } } /* Colours in which the same product is also available (0.35.0; miniatures of their photos since 0.60.2): the photo of each colour in the 4:5 card format, four to a row on a phone and 67 to 76px wide, so a miniature is never smaller than a fingertip. The own colour has a navy frame and a tick, so "chosen" is not told by colour alone; every other colour is a link. */ .bpal-colour-choice { margin: 0 0 18px; } .bpal-colour-choice__label { margin: 0 0 8px; color: var(--bpal-primary); font-size: 14px; } .bpal-colour-choice__label strong { font-weight: 700; } /* Four columns that give way down to 67px at 320px (auto-fill would count the 76px maximum and fit only three there); from 480px as many as fit. */ .bpal-colour-choice__list { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 8px; justify-content: start; margin: 0; padding: 0; list-style: none; } @media (min-width: 480px) { .bpal-colour-choice__list { grid-template-columns: repeat(auto-fill, 76px); } } /* The frame is a 1px line at 3:1 against white (WCAG 1.4.11): a photo on a white fill has no other edge. */ .bpal-colour-choice__option { position: relative; display: block; box-sizing: border-box; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(14, 39, 66, 0.55); border-radius: var(--bpal-radius); background: #fff; color: var(--bpal-primary); text-decoration: none; } a.bpal-colour-choice__option:hover { border-color: var(--bpal-primary); } a.bpal-colour-choice__option:focus-visible { outline: 2px solid var(--bpal-primary); outline-offset: 2px; } .bpal-colour-choice__option--current { border: 2px solid var(--bpal-primary); } /* The photo is the whole 4:5 file; the longer selector beats the image rules of WooCommerce (.woocommerce img, height: auto). */ .bpal-colour-choice .bpal-colour-choice__image { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; } .bpal-colour-choice__tick { position: absolute; top: 3px; right: 3px; display: flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 50%; background: var(--bpal-accent); color: var(--bpal-primary); } /* A colour without a photo: the swatch of its colour and its name, so the frame is never empty. */ .bpal-colour-choice__plain { display: flex; width: 100%; height: 100%; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px 2px; font-size: 12px; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; text-align: center; } .bpal-colour-choice__dot { display: block; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: var(--bpal-swatch, #a3a7aa); box-shadow: inset 0 0 0 1px rgba(14, 39, 66, 0.28); } /* Size note (0.30.0): waist width of the chosen size. */ .bpal-size-note { margin: 6px 0 0; color: #59636e; font-size: 0.9rem; } /* Size table of the brand from Core (0.39.0): its own block under the product information, starting at the left edge. Fixed narrow columns (5rem) and a wider first column (13rem), so a few sizes never stretch across the page. bpal-size-table (above) is the simple table of the product itself; this block has its own class so the two never share a rule. */ .bpal-brand-size-table { /* A child of the two-column grid of the product page: the whole row (without it the block sat in the first column only). */ grid-column: 1 / -1; margin: clamp(32px, 5vw, 56px) 0 0; scroll-margin-top: 96px; } .bpal-brand-size-table__title { margin: 0 0 14px; color: var(--bpal-primary); font-family: var(--bpal-heading); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; } .bpal-brand-size-table__scroll { /* position: relative makes this the containing block of the screen-reader text in an empty cell (position: absolute), so it scrolls and is clipped here and does not widen the page: without it that text sat outside the table at the right edge of the last column. */ position: relative; width: -moz-fit-content; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--bpal-line); border-radius: var(--bpal-radius); } .bpal-brand-size-table__scroll:focus-visible { outline: 2px solid var(--bpal-accent); outline-offset: 2px; } .bpal-brand-size-table__table { --bpal-size-label: 13rem; width: calc(var(--bpal-size-label) + var(--bpal-size-cols, 1) * 5rem); margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; font-size: 0.9rem; line-height: 1.35; } .bpal-brand-size-table__col-label { width: var(--bpal-size-label); } .bpal-brand-size-table__col { width: 5rem; } .bpal-brand-size-table__table th, .bpal-brand-size-table__table td { padding: 9px 4px; border: 0; border-bottom: 1px solid var(--bpal-line); overflow-wrap: anywhere; text-align: center; font-weight: 400; } .bpal-brand-size-table__table thead th { background: var(--bpal-primary); color: #fff; font-weight: 700; } .bpal-brand-size-table__table th[scope="row"], .bpal-brand-size-table__table thead th:first-child { padding-inline: 14px 8px; text-align: left; } .bpal-brand-size-table__table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; color: var(--bpal-primary); font-weight: 600; } .bpal-brand-size-table__table thead th:first-child { position: sticky; left: 0; z-index: 2; } .bpal-brand-size-table__table th[scope="row"], .bpal-brand-size-table__table thead th:first-child { box-shadow: 1px 0 0 var(--bpal-line); } .bpal-brand-size-table__table tbody tr:nth-child(even) td, .bpal-brand-size-table__table tbody tr:nth-child(even) th[scope="row"] { background: #f6f8fa; } .bpal-brand-size-table__table tbody tr:last-child > * { border-bottom: 0; } /* The size that is chosen (assets/js/product-detail.js, Theme 0.61.3): its column. The head row is already the brand blue, so the chosen head is orange (blue on orange, 5.8 : 1) and the figures below it a light orange, over the stripes of the even rows. */ .bpal-brand-size-table__table thead th.is-selected { background: var(--bpal-accent); color: var(--bpal-primary); } .bpal-brand-size-table__table tbody tr td.is-selected { background: #feeadc; color: var(--bpal-primary); font-weight: 800; } .bpal-brand-size-table__table .bpal-brand-size-table__section th { padding: 8px 14px; background: #e9edf2; color: var(--bpal-primary); font-weight: 700; text-align: left; } .bpal-brand-size-table__section-label { position: sticky; left: 14px; display: inline-block; } .bpal-brand-size-table__note { max-width: 62ch; margin: 0 0 12px; color: #59636e; font-size: 0.9rem; } @media (max-width: 768px) { .bpal-brand-size-table { scroll-margin-top: 72px; } .bpal-brand-size-table__table { font-size: 0.85rem; } } @media (max-width: 600px) { .bpal-brand-size-table__table { --bpal-size-label: 8.5rem; } .bpal-brand-size-table__table th[scope="row"], .bpal-brand-size-table__table thead th:first-child { padding-inline: 10px 6px; } } /* * The notice after "Toevoegen aan winkelwagen" (Theme 0.39.5, wider and with a word space in the button in 0.39.6; inc/cart-notice.php gives the text of the notice of WooCommerce its shape: * icon, title, product, link to the cart). It is a small bar (as wide as its content, at most 840px) over the top of the page, under the header, that goes away by itself * after 6 seconds. The page does not move: the bar floats in the wrapper of the notices (which has a position, so the bar is placed from its top and * the wrapper keeps no height), so there is no layout shift when it appears or disappears. It waits while the mouse is on it or a keyboard focus is on its link (WCAG 2.2.1); the container itself is * focused by the script of WooCommerce when the page opens, so a focus on the container does not count. The cart count in the header and the * link in the notice keep the way to the cart open. Everything is under :has(> .bpal-added-notice__text): a notice of another kind, or a * browser without :has(), keeps the standard look of WooCommerce. Only transform and opacity move. The thumb is the thumb-up icon of Tabler * Icons (MIT), as a mask, so it takes the colour of the theme. * Theme 0.39.7 adds the notices about the stock to it (further down): the same bar and the same parts, but they stay until they are closed. */ body.bpal-product-detail .woocommerce-notices-wrapper:has(> .woocommerce-message > .bpal-added-notice__text, > .woocommerce-error > li > .bpal-added-notice__text) { position: relative; z-index: 20; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text) { position: absolute; top: 12px; right: 0; left: 0; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(100%, 840px); margin: 0 auto; padding: 8px 8px 8px 10px; border: 1px solid #dfe3e7; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(14, 39, 66, .14); color: var(--bpal-primary); font-size: 14px; line-height: 1.3; animation: bpal-added-life 6s ease forwards; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text):is(:hover, :has(a:focus-visible)) { animation-play-state: paused; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text):focus-visible { outline: 2px solid var(--bpal-primary); outline-offset: 2px; } /* The icon and the clearfix that WooCommerce draws in ::before and ::after of the notice are not part of this layout. */ body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text)::before, body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text)::after { display: none; } .bpal-added-notice__icon { position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--bpal-accent); } .bpal-added-notice__icon::before, .bpal-added-notice__icon::after { content: ""; position: absolute; inset: 0; } .bpal-added-notice__icon::before { background: var(--bpal-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3a4 4 0 0 0 4-4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E") center / 20px 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v8a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3a4 4 0 0 0 4-4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E") center / 20px 20px no-repeat; transform-origin: 30% 80%; animation: bpal-added-thumb 1s .15s ease-out both; } .bpal-added-notice__icon::after { border: 2px solid var(--bpal-accent); border-radius: 50%; animation: bpal-added-ring .7s .3s ease-out both; } .bpal-added-notice__text { flex: 1 1 auto; min-width: 0; } .bpal-added-notice__title, .bpal-added-notice__name, .bpal-added-notice__body { display: block; font-size: 13px; } .bpal-added-notice__title { color: var(--bpal-primary); font-weight: 700; } .bpal-added-notice__name { overflow: hidden; color: var(--bpal-text); text-overflow: ellipsis; white-space: nowrap; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message > a.button.wc-forward, body.bpal-product-detail .woocommerce-notices-wrapper > ul.woocommerce-error > li > a.button.wc-forward { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .28em; float: none; min-height: 44px; margin: 0; padding: 0 16px; border-radius: var(--bpal-radius); background: var(--bpal-primary); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message > a.button.wc-forward:hover, body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message > a.button.wc-forward:focus-visible, body.bpal-product-detail .woocommerce-notices-wrapper > ul.woocommerce-error > li > a.button.wc-forward:hover, body.bpal-product-detail .woocommerce-notices-wrapper > ul.woocommerce-error > li > a.button.wc-forward:focus-visible { background: var(--bpal-accent); color: var(--bpal-primary); } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message > a.button.wc-forward:focus-visible, body.bpal-product-detail .woocommerce-notices-wrapper > ul.woocommerce-error > li > a.button.wc-forward:focus-visible { outline: 2px solid var(--bpal-primary); outline-offset: 2px; } @keyframes bpal-added-life { 0% { opacity: 0; transform: translateY(-14px); } 5%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-14px); visibility: hidden; } } @keyframes bpal-added-thumb { 0% { transform: scale(0) rotate(-30deg); } 30% { transform: scale(1.3) rotate(14deg); } 50% { transform: scale(1) rotate(-8deg); } 70% { transform: rotate(5deg); } 100% { transform: none; } } @keyframes bpal-added-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } @keyframes bpal-added-life-still { to { opacity: 0; visibility: hidden; } } /* On a phone the line is short: the product is on the page the notice is on, so only the title stays in sight (the name stays for a screen reader). */ @media (max-width: 520px) { .bpal-added-notice__name { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); } } /* On a narrow phone the button says "Winkelwagen": "Bekijk " stays in the name of the link for a screen reader and for voice control, and the title keeps two lines. */ @media (max-width: 420px) { .bpal-added-notice__verb { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); } .bpal-added-notice__cart { text-transform: capitalize; } body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message > a.button.wc-forward, body.bpal-product-detail .woocommerce-notices-wrapper > ul.woocommerce-error > li > a.button.wc-forward { padding: 0 12px; font-size: 13px; } } /* Less motion: the bar is there at once and is gone after the same 6 seconds. style.css cuts every animation to 0.001ms for these visitors (!important), so the time is the delay (which that rule leaves alone) and the animation is only the step to "gone". */ @media (prefers-reduced-motion: reduce) { body.bpal-product-detail .woocommerce-notices-wrapper > .woocommerce-message:has(> .bpal-added-notice__text) { animation: bpal-added-life-still 1ms linear 6s forwards; } .bpal-added-notice__icon::before, .bpal-added-notice__icon::after { animation: none; } .bpal-added-notice__icon::after { display: none; } } /* * The notices about the stock (Theme 0.39.7): "Je hebt ze al allemaal", "Er zijn er niet genoeg", "Helaas, uitverkocht" (inc/cart-notice.php). * WooCommerce prints them as . The