/* * Single product — Add to Cart, variation swatches, spec panel, related row. * Loaded only on is_product(), after bp-mobile, so it wins source-order ties. * Note that bp-overrides.css marks most single-product rules !important, so * source order alone does not always settle a conflict here. */ /* Belt-and-suspenders: never show the availability/stock line here. */ body.single-product .stock { display: none !important; } /* Row: stepper on the left, long pill on the right, dividers top + bottom. */ /* WooCommerce clears this form with ::before/::after pseudo-elements carrying * `content: " "`. Harmless while it was a block, but the form is a flex * container here, so each one becomes a zero-width flex item — and the first * of them was pushing the buttons one column-gap (12px) off the left edge every * other line in this column sits on. There is nothing to clear in a flex * container, so they go. */ body.single-product div.product form.cart::before, body.single-product div.product form.cart::after { content: none !important; } /* No rule above the buy controls — the reference has one line in this column, * under the buttons and above the SKU, and the offer text is what separates * them from the price block. */ body.single-product div.product form.cart { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 0; padding: 0.75rem 0 1.75rem; border-top: 0; border-bottom: 1px solid #e5e7eb; } /* ── Quantity stepper ── */ body.single-product div.product form.cart .quantity { display: inline-flex; align-items: center; gap: 1rem; margin: 0; float: none; } body.single-product div.product form.cart .quantity .bp-qty__btn { width: 56px; height: 56px; flex: 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #d1d5db; border-radius: 9999px; background: #fff; color: #1d1d1d; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; -webkit-appearance: none; appearance: none; } body.single-product div.product form.cart .quantity .bp-qty__btn:hover { border-color: #1d1d1d; } body.single-product div.product form.cart .quantity .bp-qty__btn:active { background: #f3f4f6; } body.single-product div.product form.cart .quantity .bp-qty__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12); } /* Number in the middle — borderless, no spinners. */ body.single-product div.product form.cart .quantity .qty { width: 40px; height: auto; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 1.25rem; font-weight: 600; color: #1d1d1d; -moz-appearance: textfield; appearance: textfield; } body.single-product div.product form.cart .quantity .qty:focus { outline: none; } body.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button, body.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ── Add to Cart — long black pill ── */ body.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 320px; min-width: 200px; height: 64px; margin: 0 !important; padding: 0 2rem !important; display: inline-flex; align-items: center; justify-content: center; background: #111 !important; color: #fff !important; border: 0 !important; border-radius: 9999px !important; font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1 !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: background 0.2s ease, transform 0.05s ease; } body.single-product div.product form.cart .single_add_to_cart_button:hover { background: #000 !important; } body.single-product div.product form.cart .single_add_to_cart_button:active { transform: translateY(1px); } /* ── Product meta (SKU / category) — drop the top divider + spacing ── */ body.single-product div.product .product_meta { border-top: 0 !important; padding-top: 0 !important; } /* ── Add-to-cart notice: hide the misaligned checkmark icon only ── */ body.single-product .woocommerce-message::before, body.single-product .woocommerce-info::before { display: none !important; } /* ══════════════════════════════════════════════════════════════════════ Mobile + tablet (≤1024px): force a single-column product layout and make the page physically unable to exceed the viewport. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { body.single-product main#main.site-main, body.single-product main.site-main, body.single-product #primary, body.single-product .site-main { overflow-x: hidden !important; max-width: 100vw !important; box-sizing: border-box !important; } body.single-product.woocommerce div.product, body.single-product div.product { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.single-product.woocommerce div.product .woocommerce-product-gallery, body.single-product.woocommerce div.product .images, body.single-product.woocommerce div.product .summary, body.single-product.woocommerce div.product .entry-summary, body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .images, body.single-product div.product .summary, body.single-product div.product .entry-summary { width: 100% !important; max-width: 100% !important; float: none !important; clear: both !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } body.single-product div.product .woocommerce-product-gallery { margin-bottom: 1.5rem !important; } /* Every image on the page is clamped so none of them can push it sideways — except the colour swatches, which carry their own size from plugins/linked-variations. This rule outweighed theirs (two classes and three elements against two classes, both !important), so `height: auto` won and each swatch rendered at its intrinsic 400px: five of them stacked, 2000px of scrolling, on every product with colour siblings. */ body.single-product main#main.site-main img:not(.variation-image), body.single-product div.product img:not(.variation-image) { max-width: 100% !important; height: auto !important; } /* The gallery and its viewport are capped so a wide image cannot push the page sideways. The slide track is deliberately NOT capped: FlexSlider gives it `width: 1600%` to lay the slides out in a row, and clamping that to 100% made them stack vertically instead — which the old fixed 520px height hid by clipping, and a square one exposes as a 8000px-tall column. */ body.single-product div.product .woocommerce-product-gallery, body.single-product div.product .woocommerce-product-gallery .flex-viewport { overflow: hidden !important; max-width: 100% !important; } body.single-product div.product .woocommerce-product-gallery__wrapper { max-width: none !important; } } /* ── Mobile (≤767px) ── */ @media (max-width: 767px) { /* 8px gutter. Changed here, at source, rather than overridden further down: two rules in this same file fighting over the same declaration is what made the earlier padding change appear to do nothing. */ body.single-product main#main.site-main, body.single-product main.site-main, body.single-product #primary.content-area, body.single-product .site-main { padding-left: 8px !important; padding-right: 8px !important; } body.single-product div.product form.cart { flex-wrap: nowrap !important; gap: .75rem !important; } body.single-product div.product form.cart .quantity { gap: .5rem !important; flex: 0 0 auto !important; } body.single-product div.product form.cart .quantity .bp-qty__btn { width: 48px !important; height: 48px !important; font-size: 1.4rem !important; } body.single-product div.product form.cart .quantity .qty { width: 30px !important; } body.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 auto !important; min-width: 0 !important; height: 56px !important; padding: 0 1rem !important; font-size: 1rem !important; white-space: nowrap !important; } body.single-product .related.products ul.products, body.single-product .up-sells.products ul.products { display: flex !important; flex-wrap: nowrap !important; gap: 1rem !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } body.single-product .related.products ul.products::-webkit-scrollbar, body.single-product .up-sells.products ul.products::-webkit-scrollbar { display: none; } body.single-product .related.products ul.products li.product, body.single-product .up-sells.products ul.products li.product { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; scroll-snap-align: start; box-sizing: border-box !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; background: #fff !important; padding: 1.25rem !important; display: flex !important; flex-direction: column !important; gap: .875rem !important; text-align: left !important; } body.single-product .related.products ul.products li.product::before, body.single-product .related.products ul.products li.product::after { content: none !important; } body.single-product .related.products ul.products li.product a img, body.single-product .up-sells.products ul.products li.product a img { width: 100% !important; height: auto !important; aspect-ratio: 1 !important; object-fit: contain !important; padding: 0 !important; margin: 0 0 .875rem !important; border-radius: 8px !important; background: #fff !important; display: block !important; } body.single-product .related.products ul.products li.product .woocommerce-loop-product__title, body.single-product .up-sells.products ul.products li.product .woocommerce-loop-product__title { text-align: left !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; font-size: .9375rem !important; font-weight: 500 !important; color: #1d1d1d !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } body.single-product .related.products ul.products li.product .price, body.single-product .up-sells.products ul.products li.product .price { text-align: left !important; margin: 0 !important; padding: 0 !important; font-size: 1rem !important; font-weight: 700 !important; color: #1d1d1d !important; } body.single-product .related.products ul.products li.product .button, body.single-product .related.products ul.products li.product a.add_to_cart_button, body.single-product .up-sells.products ul.products li.product .button { display: block !important; width: auto !important; align-self: stretch !important; margin: 0 !important; padding: .75rem 1rem !important; text-align: center !important; background: var(--bp-brand, #111111) !important; color: #fff !important; border-radius: 9999px !important; font-size: .875rem !important; font-weight: 600 !important; } body.single-product .related.products ul.products li.product .button:hover, body.single-product .related.products ul.products li.product a.add_to_cart_button:hover { background: #1d1d1d !important; color: #fff !important; } body.single-product .bp-rel-controls { display: flex !important; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } body.single-product .bp-rel-nav { width: 40px; height: 40px; flex: 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; background: #fff; border-radius: 9999px; font-size: 1.5rem; line-height: 1; color: #1d1d1d; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } body.single-product .bp-rel-nav:hover { background: #f3f4f6; color: var(--bp-brand-hover, #3d3d3d); border-color: #d1d5db; } body.single-product .bp-rel-count { font-size: .95rem; font-weight: 600; color: #1d1d1d; min-width: 54px; text-align: center; } } /* On desktop the related section stays a normal grid — hide carousel controls. */ @media (min-width: 768px) { body.single-product .bp-rel-controls { display: none !important; } } /* ══════════════════════════════════════════════════════ * Reference layout — image, then facts * * bp-overrides.css marks nearly every single-product rule !important, so * source order alone does not settle these; matching !important does. * ══════════════════════════════════════════════════════ */ /* The frame belonged to a page that had one photo floating in white space. * Borderless, the photo is the product. */ body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img { border: 0 !important; border-radius: 0 !important; padding: 0 !important; } /* * No grid placement for the 360 viewer. * * It used to need some: 0.1.0 rendered its block between the gallery and the * summary, so it became a third child of the product's two-column grid and * auto-placement scattered the page. Rules here pinned it under the gallery * and swapped the two rows while the spin ran. * * 0.2.0 mounts the block inside .woocommerce-product-gallery instead, right * after the main image, so it is no longer a grid item at all — and the * leftover swap was moving the gallery itself into row 2 the moment a spin * opened, dropping it 99px down the page. Deliberately nothing here now. */ /* Title and price: the model number is a reference, not a headline. */ body.single-product div.product .product_title, body.single-product div.product h1.product_title, body.single-product div.product .entry-summary h1, body.single-product div.product .summary h1 { font-size: 30px !important; font-weight: 300 !important; color: #1d1d1d !important; letter-spacing: 0.01em !important; /* The family line belongs to the title, not to the price below it. */ margin-bottom: 2px !important; } /* Model family under the title, in the old site's grey body type. */ body.single-product div.product .bp-family { margin: 0 0 10px !important; font-size: 16px !important; font-weight: 400 !important; color: #374151 !important; text-transform: none; } body.single-product div.product .price, body.single-product div.product p.price { font-size: 24px !important; font-weight: 400 !important; color: #43454b !important; } /* Shipping line between the price and the TEB card (inc/bp-shipping-note.php). * The price's 1.25rem bottom margin (bp-overrides.css) becomes 6px when the line * follows it; the line's 20px bottom margin collapses with the card's 1rem top * margin, leaving 20px. */ body.single-product div.product .summary .price:has(+ .bp-shipnote) { margin-bottom: 6px !important; } body.single-product div.product .summary > .bp-shipnote { margin: 0 0 20px; } /* The fee reads a step larger here than on the cards; the pill does not. */ body.single-product div.product .summary > .bp-shipnote--paid { font-size: 15px; } /* ── Variation swatches ── */ /* Only once the buttons exist — no JS, no hiding. */ body.single-product form.variations_form.bp-has-swatches table.variations, body.single-product form.variations_form.bp-has-swatches .variations { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } /* form.cart is laid out as a flex row — stepper on the left, pill on the right. * That row was built for a quantity box and one button; with the swatches in it * the button rides up alongside the sizes. Where the swatches exist the form * goes back to normal flow, so each block simply stacks. */ /* !important because bp-overrides.css:350 sets display:flex that way, and * importance beats specificity. */ body.single-product div.product form.cart.bp-has-swatches { display: block !important; } body.single-product div.product form.cart.bp-has-swatches .single_variation_wrap { margin-top: 1.5rem; } body.single-product div.product form.cart.bp-has-swatches .single_add_to_cart_button { flex: none; width: 100%; max-width: 360px; } body.single-product .bp-variation + .bp-variation { margin-top: 1.5rem; } body.single-product .bp-variation__label { display: block; margin-bottom: 0.75rem; font-size: 18px; color: #1d1d1d; } /* "(Zgjedhni)" is an instruction beside the attribute's name, not a second * label: 12px #43454B, 8px off the word before it. It was 14px in a pale grey * that read as disabled text. */ body.single-product .bp-variation__hint { margin-left: 8px; font-size: 12px; color: #43454b; } body.single-product .bp-swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Sizes are a fixed 50 × 40 box, the reference's measurement — every number is * one or two digits, so the run reads as a row of equal tiles rather than a * ragged one. The colour row is left alone: its labels are words, and once the * catalogue carries colourway photographs they become 62px pictures. The 5px * gap is the reference's 5px margins, expressed once. */ body.single-product .bp-swatches--size { gap: 5px; } body.single-product .bp-swatches--size .bp-swatch { width: 50px; min-width: 50px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; } body.single-product .bp-swatch { min-width: 58px; padding: 0.7rem 0.9rem; border: 1px solid #d5d7dd; border-radius: 2px; background: #fff; font-family: inherit; font-size: 16px; color: #43454b; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } /* :not(.is-selected) matters on touch. After a tap the button keeps :hover, and * this selector (0,4,1) outranks .bp-swatch.is-selected (0,3,1) — so the dark * hover colour won over the selected state's white, leaving the chosen size as * near-black text on a black fill. Excluding the selected swatch settles it. */ body.single-product .bp-swatch:hover:not(:disabled):not(.is-selected) { border-color: #1d1d1d; color: #1d1d1d; } body.single-product .bp-swatch.is-selected { border-color: #1d1d1d; color: #1d1d1d; box-shadow: inset 0 0 0 1px #1d1d1d; } body.single-product .bp-swatch.is-selected { background: #111; border-color: #111; color: #fff; box-shadow: none; } /* Sold out is struck out where the number was, so the row still reads as a * size run with gaps in it rather than a shorter list. */ /* A size that cannot be bought. * * The whole tile drops to 30% and keeps its number — the reference fades the * button rather than blanking it, so the size run still reads as 36–41 with * gaps in it rather than as a row with holes. The cross is drawn on top at full * strength and dimmed along with everything else, which is what makes it read * as pink against a black number. */ body.single-product .bp-swatch.is-unavailable { position: relative; opacity: 0.3; background: #fff; cursor: not-allowed; } body.single-product .bp-swatch.is-unavailable::before, body.single-product .bp-swatch.is-unavailable::after { content: ""; position: absolute; left: 20%; right: 20%; top: 50%; height: 2px; background: #e11d48; } body.single-product .bp-swatch.is-unavailable::before { transform: rotate(34deg); } body.single-product .bp-swatch.is-unavailable::after { transform: rotate(-34deg); } /* Nothing changes under the pointer — there is nothing to press. */ body.single-product .bp-swatch.is-unavailable:hover { opacity: 0.3; border-color: #d5d7dd; color: #43454b; } /* One quantity is the only sensible quantity for a single pair. */ body.single-product div.product form.cart .quantity { display: none !important; } /* ── "Të dhënat" panel ── */ /* The panel's rule sits under its heading, not above the panel: the reference * draws it on the heading row itself, as the line the fold-out hangs from. */ body.single-product .bp-specs { margin-top: 1.75rem; border-top: 0; } body.single-product .bp-specs__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 4px 0; border-bottom: 1px solid #f3f4f6; font-size: 16px; color: #43454b; cursor: pointer; list-style: none; } body.single-product .bp-specs__head::-webkit-details-marker { display: none; } /* The sign is drawn rather than typed so the minus and plus align on one axis. */ body.single-product .bp-specs__sign { position: relative; width: 14px; height: 14px; flex: 0 0 auto; } body.single-product .bp-specs__sign::before, body.single-product .bp-specs__sign::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: #43454b; } body.single-product .bp-specs__sign::after { transform: rotate(90deg); transition: opacity 0.15s ease; } body.single-product .bp-specs[open] .bp-specs__sign::after { opacity: 0; } body.single-product .bp-specs__list { margin: 0 0 1.25rem; } /* No padding on the row: the 16px/1.62 line box already separates one fact from * the next, and 4.8px above and below on top of that was spacing them like * paragraphs rather than like a list. 35.5px a row down to 25.9. */ body.single-product .bp-specs__row { display: flex; gap: 0.5rem; padding: 0; font-size: 16px; } body.single-product .bp-specs__label { margin: 0; font-weight: 600; color: #1d1d1d; } body.single-product .bp-specs__value { margin: 0; color: #8a8578; text-transform: uppercase; } /* ── Meta ── */ /* "SKU:" and "Kategori:" are labels, at 14px #43454B. Only the category itself * is emphasised — black and semibold — because it is the one thing here that is * a link worth following. * * !important on the colours because bp-overrides.css marks this block's colour * !important too (#6b7280 for the labels, --bp-brand for the link); this file * loads later, so matching its weight is what settles it. */ body.single-product div.product .product_meta { font-size: 14px !important; color: #43454b !important; } body.single-product div.product .product_meta > span { display: block; margin-bottom: 0.35rem; font-weight: 400; color: #43454b !important; } body.single-product div.product .product_meta a { color: #000000 !important; font-weight: 600; text-decoration: underline; } /* ── Related products ── * The archive's borderless card, which inc/shop-loop.php now also renders here. * bp-shop.css still draws the box for every ul.products, so it is undone at * this width the same way the archive does it. */ @media (min-width: 768px) { body.single-product .related.products ul.products li.product, body.single-product .up-sells.products ul.products li.product { border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible !important; text-align: left !important; } body.single-product .related.products ul.products li.product a img, body.single-product .up-sells.products ul.products li.product a img { padding: 0 !important; } body.single-product .related.products ul.products li.product .price, body.single-product .up-sells.products ul.products li.product .price { text-align: left !important; padding: 0 !important; margin: 0.35rem 0 0 !important; font-size: 18px !important; font-weight: 400 !important; color: #43454b !important; } } body.single-product .related.products > h2, body.single-product .up-sells.products > h2 { font-size: 19.2px !important; font-weight: 400 !important; color: #131315 !important; margin: 0 0 16px !important; } /* The cards start where that heading starts. * * bp-flow-fix.css centres every loop card with `align-items: center`, which in * a column flex leaves each child at its intrinsic width — so the picture sat * 31px in from the card's own edge and did not line up with the heading above * it. Stretching the card makes the image box the full column; `object-fit: * contain` still letterboxes the photograph inside it, so nothing is cropped. */ body.single-product .related.products ul.products li.product, body.single-product .up-sells.products ul.products li.product { align-items: stretch !important; } body.single-product .related.products ul.products li.product > a, body.single-product .up-sells.products ul.products li.product > a { width: 100% !important; } /* Square, so the photograph fills the column instead of being letterboxed in a * 302 × 240 box — the reference renders these at 324 × 324. A ratio rather than * a number, so it tracks the column at every breakpoint, the same way the main * gallery image does. */ body.single-product .related.products ul.products li.product a img, body.single-product .up-sells.products ul.products li.product a img { height: auto !important; aspect-ratio: 1 / 1 !important; } /* The card meta rules live in bp-shop-filters.css, which only loads on * archives, so the brand/category line needs stating again here. */ body.single-product .bp-card-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 0.75rem 0 0 !important; padding: 0 !important; min-height: 0 !important; text-align: left !important; line-height: 1.4 !important; } body.single-product .bp-card-meta__brand { font-size: 18px; font-weight: 400; color: #000; text-transform: uppercase; } body.single-product .bp-card-meta__cat { font-size: 12px; font-weight: 300; color: #000; letter-spacing: 0.02em; text-transform: uppercase; } /* The brand/category line starts where the price starts. * * bp-flow-fix.css centres every loop title and gives it a 12px inline padding, * both with !important and at a higher specificity than the .bp-card-meta block * above — so the name was centred, and even left-aligned it would have begun * 12px in, because the price beneath carries no such padding. This restates * both from a selector that outranks it. */ body.single-product .products li.product h2.bp-card-meta { display: flex !important; justify-content: flex-start !important; text-align: left !important; padding-inline: 0 !important; } /* ── Standing offer ── */ body.single-product .bp-promo { /* 16px of clearance from the instalment card above, which only leaves 4px of * its own. */ margin: 1rem 0 1.5rem !important; line-height: 1.4; } body.single-product .bp-promo__headline, body.single-product .bp-promo__note { display: block; color: #e11d48; } body.single-product .bp-promo__headline { font-size: 14px; font-weight: 700; } body.single-product .bp-promo__note { font-size: 12px; } /* ── Colour swatches as pictures ── * Dormant until variations carry their own images; the buttons fall back to * their term name until then. */ body.single-product .bp-swatch--image { width: 62px; height: 62px; min-width: 0; padding: 3px; overflow: hidden; } body.single-product .bp-swatch--image img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ── Gallery arrows and thumbnail strip ── * * FlexSlider appends its arrows as the last child of the gallery, below the * thumbnail strip, so centring them on "the gallery" would drop them level with * the thumbnails. assets/js/bp-product.js moves the list inside .flex-viewport * — the box that holds only the current image — and this is what makes that box * the thing they are positioned against. * * The !important is not decoration: bp-overrides.css marks this element * `position: static !important` as part of the two-column grid, at the same * specificity, so nothing less would take. */ body.single-product div.product .woocommerce-product-gallery { position: relative !important; /* The gallery is a grid item, and a grid item's default `min-width: auto` * lets it outgrow its track. Without this the thumbnail strip — a row of * fixed-width squares wider than the column — pushed the whole gallery from * 558px to 620px and squeezed the summary beside it. Now the column holds and * the strip scrolls inside it. */ min-width: 0 !important; } body.single-product .woocommerce-product-gallery .flex-viewport { position: relative; } body.single-product .woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; } body.single-product .woocommerce-product-gallery .flex-direction-nav a { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #000000; text-indent: 0; font-size: 0; opacity: 1; transition: opacity 0.15s ease; } body.single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 8px; } body.single-product .woocommerce-product-gallery .flex-direction-nav .flex-next { right: 8px; } /* Drawn rather than typed: the reference's chevron is a glyph from an icon font * this theme does not load, and a substitute glyph sits differently in every * browser. A 31px square turned 45° is 22 × 44 on the diagonal, which is the * reference's measurement; the 1.5px stroke is what keeps it thin at that size. */ body.single-product .woocommerce-product-gallery .flex-direction-nav a::before { content: ""; width: 31px; height: 31px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; } body.single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before { transform: rotate(45deg); } body.single-product .woocommerce-product-gallery .flex-direction-nav .flex-next::before { transform: rotate(-135deg); } body.single-product .woocommerce-product-gallery .flex-direction-nav a:hover { opacity: 0.55; } /* FlexSlider fades its arrows in on hover and hides the disabled end of a * non-looping slider. The slider loops, so neither applies. */ body.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled { opacity: 1 !important; filter: none !important; cursor: pointer; } /* ── Thumbnail strip ── * * One row of 100px squares, 4px apart, the way the reference has it — not the * wrapped grid WooCommerce produces. The width has to be forced: core sizes * these from the gallery's `--columns-4` class (`li { width: 25% }`), which was * stretching six thumbnails into two rows of 139px. * * One row, always. Five fit across the column and a sixth is cut off at the * edge — the reference's behaviour, and the way a strip says "there is more * this way". It scrolls, so the cropped ones are still reachable; the scrollbar * is hidden so the crop is all you see. * * The 4px above it is deliberate rather than absent: the strip used to sit * flush against the photograph, which read as one block rather than as an image * with its contact sheet beneath. */ body.single-product .woocommerce-product-gallery .flex-control-thumbs { display: flex; flex-wrap: nowrap; gap: 4px; list-style: none; margin: 4px 0 0 !important; padding: 0; width: 100%; max-width: 100%; min-width: 0; /* !important because WooCommerce's own `.woocommerce div.product div.images .flex-control-thumbs { overflow: hidden }` is one class heavier than this selector and was winning: the strip clipped instead of scrolling, so the fifth cell — the 360 trigger on a four-photo product, or simply the fifth photo — was unreachable. Any product with six or more photos hit the same wall on desktop. */ overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; } body.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; } body.single-product .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 100px !important; width: 100px !important; margin: 0 !important; list-style: none; } /* `cover`, not `contain`: the reference crops its thumbnails square, and a * contained image leaves white bars that make an even row look ragged. */ body.single-product .woocommerce-product-gallery .flex-control-thumbs img { width: 100px; height: 100px; object-fit: cover; border: 0; /* !important because WooCommerce core dims these to 0.5. */ opacity: 0.7 !important; cursor: pointer; transition: opacity 0.15s ease; } /* Full opacity is the whole active state — the reference draws no frame. */ body.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active, body.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1 !important; } @media (max-width: 639px) { body.single-product .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 70px !important; width: 70px !important; } body.single-product .woocommerce-product-gallery .flex-control-thumbs img { width: 70px; height: 70px; } } /* ── Buy row ── * Hidden until a variation resolves: WooCommerce puts the -disabled class on * the wrapper, so there is nothing to show while the size is still unpicked. */ body.single-product form.cart.bp-has-swatches .woocommerce-variation-add-to-cart-disabled { display: none !important; } body.single-product form.cart.bp-has-swatches .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* A simple product has no variation wrapper, so the script makes one. Same * layout either way. */ body.single-product form.cart .bp-buy-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* The long pill belonged to a single button on its own line. Two buttons side * by side read better as plain rectangles. * * Keyed on .bp-has-buynow rather than .bp-has-swatches: the pair is the same on * a product with nothing to choose, and that class is set wherever the second * button is injected. */ body.single-product div.product form.cart.bp-has-buynow .bp-buy-now, body.single-product div.product form.cart.bp-has-buynow .single_add_to_cart_button { flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 12px 20px !important; border: 0 !important; /* Square, like everything else here — the theme's radius token is 0 and the * instalment card is the one documented exception to it. */ border-radius: 0 !important; font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important; cursor: pointer; } body.single-product div.product form.cart.bp-has-buynow .bp-buy-now { /* Carnival AL: eflow's Buy now was its success colour (#63be6a), same on hover. */ background: var(--oxa-success) !important; color: #fff !important; } body.single-product div.product form.cart.bp-has-buynow .bp-buy-now:hover { background: var(--oxa-success) !important; } body.single-product div.product form.cart.bp-has-buynow .single_add_to_cart_button { background: #111 !important; color: #fff !important; } body.single-product div.product form.cart.bp-has-buynow .single_add_to_cart_button:hover { background: #000 !important; } body.single-product div.product form.cart.bp-has-buynow .single_add_to_cart_button.is-loading { opacity: 0.75; pointer-events: none; } /* bp-product.js fires WooCommerce's added_to_cart for the tracking plugins, and * WooCommerce answers by marking the button .added, which its stylesheet turns * into a tick after the label. The modal already confirms the add. */ body.single-product div.product form.cart .single_add_to_cart_button.added::after, body.single-product div.product form.cart .bp-buy-now.added::after { content: none !important; } /* ── Added-to-cart confirmation ── */ body.bp-added-open { overflow: hidden; } .bp-added { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(17, 17, 17, 0.45); } .bp-added[hidden] { display: none; } .bp-added__box { width: 100%; /* Wide enough for both actions to sit on one line — at 460px the pair came * to ~408px against 396px of usable width and wrapped. */ max-width: 560px; padding: 2.75rem 2rem 2.25rem; border-radius: 6px; background: #fff; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); } .bp-added__tick { display: block; margin: 0 auto 1.5rem; width: 96px; color: #7ac943; } .bp-added__tick svg { width: 100%; height: auto; display: block; } .bp-added__title { margin: 0 0 1.25rem; padding: 24px 30px 0; font-size: 30px; font-weight: 600; color: #545454; /* the reference's title grey */ } /* nowrap, not wrap: the two labels together measure ~384px, which wrapped the * second one onto its own line on any phone. They shrink instead — the padding * gives way before the row does. */ .bp-added__actions { display: flex; flex-wrap: nowrap; gap: 10px; /* the reference's 5px margin on each button */ justify-content: center; align-items: stretch; } .bp-added__go, .bp-added__stay { flex: 0 1 auto; min-width: 0; width: auto; /* 12.8px / 22.4px, per the reference buttons (41.6px tall). */ padding: 12.8px 22.4px; border: 0; border-radius: 4px; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; text-align: center; cursor: pointer; text-decoration: none; } .bp-added__go { background: #000000; color: #fff; } .bp-added__go:hover { background: #1d1d1d; color: #fff; } .bp-added__stay { background: #6e7881; color: #fff; } .bp-added__stay:hover { background: #5d666e; } /* ── Brand mark ── * Top right of the summary, opposite the model number. The summary is the * positioning context; the mark is out of flow so it never pushes the title. */ body.single-product div.product .summary, body.single-product div.product .entry-summary { position: relative; } /* A 136px square, held open whether or not there is a logo — the reference * renders the brand's image at 135.81 × 135.81, so the corner is that shape * before anything fills it and the title is cleared for it either way. Out of * flow, so it never pushes the price column down. */ body.single-product .bp-brandmark { position: absolute; top: 0; right: 0; width: 136px; height: 136px; max-width: 30%; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; } /* Until a brand carries a logo, its name stands in — the reference's mark is a * wordmark anyway, so the substitute reads as the same thing rather than as a * gap. Sized to sit on the title's line. */ body.single-product .bp-brandmark__name { display: inline-block; /* One line: the reference's wordmark is a single row of type, and a brand * broken across two reads as a paragraph. 15px keeps the longest name in the * catalogue inside the 160px the title is cleared for. */ white-space: nowrap; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: #111111; text-transform: uppercase; } body.single-product .bp-brandmark img { width: auto; height: auto; max-width: 100%; max-height: 100%; display: block; object-fit: contain; } /* The mark links to the brand's filtered shop. * * The square keeps pointer-events:none, and the anchor does too: only the mark * inside it takes the click, so the empty corners of the 136px box still let * the title through. A click on the image or the wordmark bubbles to the * anchor and follows the link as usual. * * The anchor is deliberately NOT sized to fit its content. It has to keep a * definite height, because the image above is capped with max-height:100% — * against a shrink-wrapped anchor that percentage resolves against nothing and * a large logo renders at its intrinsic size, out of the square. Narrowing the * hit area with pointer-events gets the same result and leaves every measured * value in this block untouched. */ body.single-product .bp-brandmark__link { pointer-events: none; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; text-decoration: none; color: inherit; transition: opacity 0.15s ease; } body.single-product .bp-brandmark__link > img, body.single-product .bp-brandmark__link > .bp-brandmark__name { pointer-events: auto; } /* A wordmark is one short line of type — around 18px tall, which is not a tap * target. Vertical padding only: below 768px the mark is held against the right * edge with margin-left:auto, so horizontal padding would push the type 8px off * the edge it is aligned to. The flex centring keeps the line where it was. */ body.single-product .bp-brandmark__link > .bp-brandmark__name { padding: 0.75rem 0; } body.single-product .bp-brandmark__link:hover, body.single-product .bp-brandmark__link:focus-visible { opacity: 0.75; } /* Inset, so the ring is drawn inside the square rather than over the title. */ body.single-product .bp-brandmark__link:focus-visible { outline: 2px solid var(--oxa-accent); outline-offset: -2px; } /* Keep the title clear of the mark. */ body.single-product div.product .summary > :first-child ~ .product_title, body.single-product div.product .entry-summary .bp-brandmark ~ .product_title { padding-right: 150px; } @media (max-width: 767px) { body.single-product .bp-brandmark { width: 84px; height: 84px; } body.single-product .bp-brandmark__name { font-size: 13px; white-space: normal; } body.single-product div.product .entry-summary .bp-brandmark ~ .product_title { padding-right: 94px; } } /* ── Breathing room between the buy controls, the meta and the panel ── */ body.single-product div.product .product_meta { margin-top: 1.5rem !important; } body.single-product .bp-specs { margin-top: 2rem; } /* ── Colourway swatches ── * Rounded, and outlined rather than filled when chosen. The shared * .is-selected rule paints the button black, which on a picture swatch showed * as a heavy ring around the shoe; here the mark is a hairline border and the * photograph keeps its own white ground. */ body.single-product .bp-swatch--image { border-radius: 10px; padding: 5px; background: #fff !important; } body.single-product .bp-swatch--image img { border-radius: 6px; } body.single-product .bp-swatch--image.is-selected { background: #fff !important; border: 1px solid #111 !important; box-shadow: none !important; } body.single-product .bp-swatch--image:hover:not(:disabled) { border-color: #9ca3af; } /* ══════════════════════════════════════════════════════ * Mobile refinements (≤767px), to the reference screens. * * Appended at the end of the file deliberately: the blocks above mark nearly * every single-product rule !important, so these have to match !important AND * come later to settle the tie. * ══════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ---- Colour row: no heading ---- * Only the colour attribute's heading goes; "Madhësia" keeps its own, because * a size grid with no label is genuinely ambiguous. Targeted by the attribute * slug that bp-product.js stamps on the row, not by its text. */ body.single-product .bp-variation--pa_color .bp-variation__label { display: none !important; } /* Without the heading the row needs its own top gap restored. */ body.single-product .bp-variation--pa_color { margin-top: 0.5rem !important; } /* ---- Gallery: edge to edge ---- * .site-main keeps an 8px gutter for the text; the gallery escapes it with the * 100vw + negative-margin trick so the photograph spans the full screen. */ body.single-product div.product .woocommerce-product-gallery { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } body.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img { width: 100% !important; max-width: 100% !important; } /* ---- Related products: two per page, finger-swiped, no arrows ---- * The track above already scroll-snaps; the items were flex:0 0 100%, i.e. one * per view. Half a page each (minus the 1rem gap) shows two. */ body.single-product .related.products ul.products li.product, body.single-product .up-sells.products ul.products li.product { flex: 0 0 calc((100% - 1rem) / 2) !important; width: calc((100% - 1rem) / 2) !important; max-width: calc((100% - 1rem) / 2) !important; /* The card chrome goes with the narrower cell — the reference shows a bare * photo, name and price, the same as the shop grid. */ padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } /* Swiping replaces them. */ body.single-product .bp-rel-controls { display: none !important; } /* ---- Brand mark on the price's row ---- * The mark is absolutely positioned in the summary at top:0, which put it * level with the title. Dropping it by the title's height lands it on the * price instead. --bp-brandmark-top is the one number to nudge if the title * wraps to two lines on a long name. * * Desktop is deliberately untouched — this is a mobile-only change. */ body.single-product .bp-brandmark { /* Two lines sit above the price — the model number and the name (e.g. "6112-008-37" then "MIKA") — so the mark has to clear both, not just the title. This is the single number to nudge. */ --bp-brandmark-top: 4.5rem; top: var(--bp-brandmark-top) !important; /* Kept in step with the 72px of the moved mark below, so a product that * takes this path does not show a visibly smaller logo than its neighbour. * The square is the box; a wordmark letterboxes inside it. */ width: 100px !important; height: 100px !important; } /* The title no longer shares its line with the mark, so it gets the full width back; the price row is short enough to sit beside an 82px square. */ body.single-product div.product .summary > :first-child ~ .product_title, body.single-product div.product .entry-summary .bp-brandmark ~ .product_title { padding-right: 0 !important; } body.single-product div.product .entry-summary .price, body.single-product div.product .summary .price { /* The square plus a gutter — widened with it, or the price runs under it. */ padding-right: 112px !important; } } /* ══════════════════════════════════════════════════════ * Sticky buy bar (≤767px) — appears once a size is chosen. * * No JS: WooCommerce already swaps `woocommerce-variation-add-to-cart-disabled` * for `-enabled` on this container the moment a variation resolves, so the bar * docking itself is just that class becoming true. Before a size is picked the * row stays in normal flow, which is why nothing covers the page on arrival. * ══════════════════════════════════════════════════════ */ @media (max-width: 767px) { body.single-product div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; /* Under the drawer (95/96) and the two floating buttons (80), which now sit at bottom:60px so they clear this bar. */ z-index: 84 !important; display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-shadow: 0 -4px 14px rgb(0 0 0 / 10%) !important; } /* Two equal halves, square, full height of the bar. */ body.single-product div.product form.cart .woocommerce-variation-add-to-cart-enabled .bp-buy-now, body.single-product div.product form.cart .woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button { flex: 1 1 50% !important; width: 50% !important; max-width: none !important; min-width: 0 !important; height: 56px !important; margin: 0 !important; padding: 0 0.75rem !important; border: 0 !important; border-radius: 0 !important; font-size: 16px !important; line-height: 56px !important; } /* The quantity stepper has no room in a two-button bar; the hidden input still submits its value, so this buys one without changing behaviour. */ body.single-product div.product form.cart .woocommerce-variation-add-to-cart-enabled .quantity { display: none !important; } /* Room to scroll past the bar so it never hides the last of the page. */ body.single-product { padding-bottom: 56px; } } /* ══════════════════════════════════════════════════════ * Brand mark on the price row, and breathing room for the buy bar (≤767px). * ══════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* bp-product.js moves the mark into .price on mobile, so flexbox places it * against the price with no measured offset. This replaces the earlier * --bp-brandmark-top approach, which needed a different number for every * product depending on how many lines sat above the price. */ body.single-product div.product .price.bp-price--has-mark { display: flex !important; align-items: center !important; /* The struck-through price and the red price sit together on the left with * a small gap; the brand mark is pushed to the right edge on its own (see * margin-left below), rather than space-between spreading all three. */ justify-content: flex-start !important; gap: 0.5rem !important; padding-right: 0 !important; } /* 72px, not 48. A wordmark is wide and short, so height is what binds — at * 48 the brand read as a caption next to the price rather than as the mark it * is. max-width holds the price's side of the row: the logo can grow as tall * as it likes and still never take more than 42% of the line. */ body.single-product div.product .price.bp-price--has-mark .bp-brandmark { position: static !important; top: auto !important; right: auto !important; width: auto !important; height: 72px !important; max-width: 42% !important; flex: 0 0 auto !important; margin-left: auto !important; /* holds the mark against the right edge */ } body.single-product div.product .price.bp-price--has-mark .bp-brandmark img { max-height: 72px !important; width: auto !important; } /* ---- Buy bar: lifted off the very bottom edge ---- */ body.single-product div.product form.cart .woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-enabled { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } body.single-product div.product form.cart .woocommerce-variation-add-to-cart-enabled .bp-buy-now, body.single-product div.product form.cart .woocommerce-variation-add-to-cart-enabled .single_add_to_cart_button { height: 48px !important; /* per the reference button: 220 x 48 */ line-height: 48px !important; } /* Highest offset on the site, because this template stacks two things under the buttons. `body.single-product` below reserves 64px for the buy bar, so the footer's 86px copyright bar stops 64px short of the screen edge rather than sitting on it: 64 + 86 + an 8px gap = 158px. Holds whether or not a variation is chosen — with the buy bar showing it fills the reserved 64px, without it the strip is simply empty. Body-class selectors so these beat the single-class rules in inc/bp-messenger.php. */ body.single-product .bp-appcta, body.single-product .bp-messenger { bottom: calc(158px + env(safe-area-inset-bottom, 0px)) !important; } body.single-product { padding-bottom: 64px; } } /* Added-to-cart dialog on phones: trim the box and the button padding so the * two actions stay on one row at 360-440px, where the reference's 22.4px * horizontal padding would push the pair past the available width. */ @media (max-width: 767px) { .bp-added { padding: 10px !important; } .bp-added__box { padding: 1.5rem 1rem 1.25rem !important; } .bp-added__tick { width: 76px !important; margin-bottom: 1rem !important; } .bp-added__title { margin-bottom: 1rem !important; padding: 0 !important; font-size: 30px !important; /* full reference size, not the 24px step-down */ } .bp-added__go, .bp-added__stay { padding: 12.8px 12px !important; font-size: 15px !important; } } /* ── "Dërgesa dhe kthimi" reassurances (inc/bp-product.php) ── * Three iconed lines between the buy buttons and the "Të dhënat" panel. */ .bp-shipreturn { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .bp-shipreturn__row { display: flex; align-items: center; gap: 0.6rem; font-size: 14px; color: #43454b; } .bp-shipreturn__icon { flex: 0 0 auto; display: inline-flex; color: #1d1d1d; } .bp-shipreturn__text { line-height: 1.35; } /* ══════════════════════════════════════════════════════ * Lightbox arrows: a chevron, not the default skin's boxed sprite. * * PhotoSwipe's skin draws them from default-skin.png/.svg inside a grey box. * The old site's are bare chevrons, so the sprite is dropped and the mark is * two borders of an empty square turned 45°. The 70x100 hit area the skin * gives the button is untouched. * ══════════════════════════════════════════════════════ */ .pswp__button--arrow--left, .pswp__button--arrow--right { background: none !important; } .pswp__button--arrow--left::before, .pswp__button--arrow--right::before { content: ''; position: absolute; top: 39px; width: 20px; height: 20px; background: none !important; border: 2px solid #fff; border-width: 2px 2px 0 0; border-radius: 1px; } .pswp__button--arrow--left::before { left: 24px; transform: rotate(-135deg); } .pswp__button--arrow--right::before { right: 24px; transform: rotate(45deg); } /* ══════════════════════════════════════════════════════ * The 360 trigger as a thumbnail. * * inc/bp-product.php asks plugins/df-threesixty to move its trigger into the * thumb strip. The strip's sizing rule is scoped to `li` and the trigger is a *