/* ========================================================================= Single product page (redesign 2026-09-29) Loaded from products/show.blade.php through @stack('styles'), which is the last stylesheet in . That is deliberate: it lets this file correct main.css and kalasoon.css without either of them being rebuilt, and it keeps every rule below scoped to this one page. Tokens mirror the ones the product cards use (kalasoon.css, .product-card-new) so the page stays on the same palette as the rest of the shop. ========================================================================= */ .product-single-page { --ps-primary: #00bcd4; --ps-primary-dark: #0097a7; --ps-light: #ebf6f8; --ps-divider: #f1f1f1; --ps-border: #e8eaed; --ps-muted: #7a7a7a; --ps-orange-bg: #fff4e5; --ps-orange: #e07b00; /* Tick tile for the ported bullet-list style; the SVG stroke in section 8b is the same colour written out literally. */ --ps-tick-soft: rgba(0, 151, 167, 0.07); --ps-tick-line: rgba(0, 151, 167, 0.2); --ps-radius: 14px; --ps-gap: 16px; } /* ------------------------------------------------------------------------- 1. Page rhythm ------------------------------------------------------------------------- */ .product-single-page .title-breadcrumb-special { margin-bottom: 14px; } .product-single-page .product-top-row { margin-bottom: var(--ps-gap); padding: 0; background: transparent; box-shadow: none; border: 0; } .product-single-page .product-top-row > .row { margin-right: -8px; margin-left: -8px; } .product-single-page .product-top-col { padding-right: 8px; padding-left: 8px; margin-bottom: var(--ps-gap); } /* Each of the three top boxes is its own card. */ .product-single-page .product-gallery-col, .product-single-page .product-info-main, .product-single-page .product-top-col--purchase .purchase-box-slot { height: 100%; background: #fff; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 18px 16px; } .product-single-page .product-services { margin-bottom: var(--ps-gap); background: #fff; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 18px 10px 6px; } .product-single-page .product-bottom-row { margin-right: -8px; margin-left: -8px; } .product-single-page .product-bottom-main, .product-single-page .product-bottom-side { padding-right: 8px; padding-left: 8px; } .product-single-page .product-bottom-main > section, .product-single-page .product-bottom-main > .tabs-product-info { background: #fff; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 18px 16px; margin-bottom: var(--ps-gap); } .product-single-page .product-bottom-side .purchase-box-slot { background: #fff; border: 1px solid var(--ps-border); border-radius: var(--ps-radius); padding: 18px 16px; margin-bottom: var(--ps-gap); } /* ------------------------------------------------------------------------- 2. Gallery column ------------------------------------------------------------------------- */ /* ul.gallery-options is absolutely positioned; it needs a containing block. */ .product-single-page .product-gallery-col { position: relative; } .product-single-page .gallery-options--edit { top: 10px; right: 10px; } /* main.css absolutely positions .promotion-badge at top:14px with an 80% width and a 54px height, which on this page dropped it on top of the main image -- and behind it, since the gallery paints later. In this column the badge is an ordinary in-flow pill instead. */ .product-single-page .product-timeout { position: relative; z-index: 3; padding-top: 0; margin-bottom: 10px; min-height: 0; text-align: center; } .product-single-page .product-timeout .promotion-badge { position: static; width: auto; height: auto; line-height: 1; border-bottom: 0; margin: 0; font-size: 13px; } .product-single-page .product-timeout .promotion-badge.not-available { display: inline-block; padding: 5px 14px; border-radius: 10px; background-color: #f1f1f1; color: #6c757d; font-weight: 700; } .product-single-page .product-timeout .product-special { display: inline-block; padding: 5px 14px; border-radius: 10px; background: #f5262c; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.7; } .product-single-page .product-timeout .countdown-timer { margin-top: 8px !important; } .product-single-page .product-gallery { padding: 0; max-width: 100%; } .product-single-page .product-gallery .main-gallery .item img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; } .product-single-page .product-gallery--empty img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; margin: 0 auto; } /* --- The overflow bug --------------------------------------------------- The thumbnail