/* * components.css — component-specific styles for JoomShopping overrides. * * Only styles that are structural / repeated across overrides. Tokens are * read from template.css. Selectors mirror the prototype DOM I use in the * .php overrides — they do NOT re-use sj_topdeal's .si-*/.sj-*/.sp-* selectors * (per Q4 resolution: refresh_pkg selectors target sj_topdeal, not the new * template). */ /* Prototype card (used in category grid, cart line item, checkout section, product card) */ .hp-card { background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); } .hp-card--panel { border-radius: var(--hp-radius-lg); padding: 1.25rem; } .hp-card--panel-lg { border-radius: var(--hp-radius-lg); padding: var(--hp-space-6); } /* Buttons — the primary CTA is used everywhere */ .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hp-space-2); border-radius: var(--hp-radius); font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .hp-btn--primary { background: var(--hp-primary); color: var(--hp-primary-foreground); padding: 0 var(--hp-space-6); height: 2.75rem; border: 1px solid transparent; } .hp-btn--primary:hover { background: var(--hp-primary-hover); } .hp-btn--outline { background: var(--hp-card); color: var(--hp-text); border: 1px solid var(--hp-border); padding: 0 var(--hp-space-3); height: 2.5rem; } .hp-btn--outline:hover { background: var(--hp-nav); } .hp-btn--sm { height: 2rem; padding: 0 var(--hp-space-3); font-size: var(--hp-fs-xs); } /* Product card (list_products/product.php) */ .hp-product-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: var(--hp-card); transition: box-shadow 200ms ease; } .hp-product-card:hover { box-shadow: 0 8px 24px -12px rgba(45,36,22,0.18); } .hp-product-card__image-wrap { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--hp-header); overflow: hidden; } .hp-product-card__image { width: 100%; height: 100%; object-fit: contain; padding: var(--hp-space-6); transition: transform 300ms ease; } .hp-product-card:hover .hp-product-card__image { transform: scale(1.05); } .hp-product-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--hp-space-4); } .hp-product-card__eyebrow { font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-medium); text-transform: uppercase; letter-spacing: 0.025em; color: var(--hp-text-muted); } .hp-product-card__title { margin-top: var(--hp-space-1); font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); line-height: 1.375; color: var(--hp-text); text-wrap: pretty; } .hp-product-card__title:hover { color: var(--hp-primary); } .hp-product-card__compat { margin-top: 0.375rem; font-size: var(--hp-fs-xs); color: var(--hp-text-secondary); } .hp-product-card__stock { margin-top: var(--hp-space-3); } .hp-product-card__footer { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hp-space-2); padding-top: var(--hp-space-4); } .hp-product-card__price-old { font-size: var(--hp-fs-xs); color: var(--hp-text-muted); text-decoration: line-through; display: block; } .hp-product-card__price { font-size: var(--hp-fs-lg); font-weight: var(--hp-fw-semibold); color: var(--hp-text); } .hp-product-card__sale-badge { position: absolute; left: 0.75rem; top: 0.75rem; padding: 0.25rem 0.5rem; font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-medium); color: var(--hp-primary-foreground); background: var(--hp-primary); border-radius: var(--hp-radius-full); } /* Stock badge */ .hp-stock-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border-radius: var(--hp-radius-full); font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-medium); } .hp-stock-badge--in { color: var(--hp-success); background: color-mix(in oklab, var(--hp-success) 12%, transparent); } .hp-stock-badge--out { color: var(--hp-error); background: color-mix(in oklab, var(--hp-error) 12%, transparent); } /* Trust strip (module or inline) */ .hp-trust-tile { display: flex; align-items: flex-start; gap: var(--hp-space-3); padding: 1.25rem var(--hp-space-4); background: var(--hp-card); } .hp-trust-tile__icon { margin-top: 0.125rem; width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--hp-primary); } .hp-trust-tile__title { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); line-height: 1.15; color: var(--hp-text); } .hp-trust-tile__detail { font-size: var(--hp-fs-xs); color: var(--hp-text-secondary); } /* Product detail — preserve JoomShopping JS anchors (id="comjshop" etc.) */ #comjshop.productfull { display: block; } #comjshop .productfull-wrap, .hp-product-detail { display: grid; gap: var(--hp-space-8); } @media (min-width: 1024px) { .hp-product-detail { grid-template-columns: 1fr 1fr; gap: var(--hp-space-12); } } .hp-product-detail__gallery { display: block; } .hp-product-detail__gallery-main { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--hp-radius-lg); border: 1px solid var(--hp-border); background: var(--hp-card); } .hp-product-detail__gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 2.5rem; } .hp-product-detail__thumbs { margin-top: var(--hp-space-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hp-space-3); } .hp-product-detail__thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: var(--hp-card); cursor: pointer; padding: 0; } .hp-product-detail__thumb--active { border-color: var(--hp-primary); } .hp-product-detail__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.75rem; } .hp-product-detail__eyebrow { font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-medium); text-transform: uppercase; letter-spacing: 0.025em; color: var(--hp-text-muted); } .hp-product-detail__title { margin-top: var(--hp-space-2); font-size: var(--hp-fs-2xl); font-weight: var(--hp-fw-bold); line-height: 1.15; letter-spacing: -0.015em; color: var(--hp-text); text-wrap: balance; } @media (min-width: 640px) { .hp-product-detail__title { font-size: 1.875rem; } } .hp-product-detail__compat-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: var(--hp-header); font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-medium); color: var(--hp-text-secondary); } .hp-product-detail__price-row { margin-top: 1.25rem; display: flex; align-items: flex-end; gap: var(--hp-space-3); } .hp-product-detail__price-old { font-size: var(--hp-fs-base); color: var(--hp-text-muted); text-decoration: line-through; } .hp-product-detail__price { font-size: 1.875rem; font-weight: var(--hp-fw-bold); color: var(--hp-text); } .hp-product-detail__vat-note { margin-top: var(--hp-space-1); font-size: var(--hp-fs-xs); color: var(--hp-text-muted); } .hp-product-detail__short { margin-top: 1.25rem; line-height: var(--hp-lh-body); color: var(--hp-text-secondary); } .hp-product-detail__buy-row { margin-top: var(--hp-space-6); display: flex; flex-direction: column; gap: var(--hp-space-3); } @media (min-width: 640px) { .hp-product-detail__buy-row { flex-direction: row; align-items: center; } } .hp-product-detail__qty { display: inline-flex; height: 2.75rem; align-items: center; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: var(--hp-card); } .hp-product-detail__qty-btn { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--hp-text); } .hp-product-detail__qty-btn:hover { color: var(--hp-primary); } .hp-product-detail__qty-input { width: 2.5rem; height: 2.75rem; text-align: center; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); font-variant-numeric: tabular-nums; border: 0; background: transparent; color: var(--hp-text); } .hp-product-detail__qty-input:focus { outline: none; } .hp-product-detail__cta { flex: 1; } @media (min-width: 640px) { .hp-product-detail__cta { flex: none; } } /* Attribute selectors — preserve JoomShopping structure inside .hp-attr wrappers */ .hp-attr-block { margin-top: var(--hp-space-4); } .hp-attr-block__label { display: block; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); margin-bottom: 0.375rem; } #comjshop select[name^="jshop_attr_id"], .hp-attr-block select { height: 2.75rem; width: 100%; border-radius: 0.375rem; border: 1px solid var(--hp-border); background: var(--hp-card); padding: 0 var(--hp-space-3); font-size: var(--hp-fs-sm); color: var(--hp-text); } #comjshop select[name^="jshop_attr_id"]:focus, .hp-attr-block select:focus { border-color: var(--hp-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--hp-primary) 20%, transparent); } .hp-attr-block input[type="radio"] + label { display: inline-flex; align-items: center; gap: var(--hp-space-2); padding: var(--hp-space-2) var(--hp-space-3); border: 1px solid var(--hp-border); border-radius: 0.375rem; margin-right: var(--hp-space-2); margin-bottom: var(--hp-space-2); cursor: pointer; font-size: var(--hp-fs-sm); } .hp-attr-block input[type="radio"]:checked + label { border-color: var(--hp-primary); background: var(--hp-header); } /* Cart line item (cart-view.tsx port) */ .hp-cart-line { display: flex; gap: var(--hp-space-4); padding: var(--hp-space-4); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); background: var(--hp-card); } .hp-cart-line__image { position: relative; width: 6rem; height: 6rem; flex-shrink: 0; overflow: hidden; border-radius: 0.375rem; background: var(--hp-header); } .hp-cart-line__image img { width: 100%; height: 100%; object-fit: contain; padding: var(--hp-space-2); } .hp-cart-line__body { display: flex; min-width: 0; flex: 1; flex-direction: column; } .hp-cart-line__eyebrow { font-size: var(--hp-fs-xs); color: var(--hp-text-muted); } .hp-cart-line__title { display: block; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); color: var(--hp-text); text-wrap: pretty; } .hp-cart-line__title:hover { color: var(--hp-primary); } .hp-cart-line__compat { margin-top: 0.125rem; font-size: var(--hp-fs-xs); color: var(--hp-text-secondary); } .hp-cart-line__remove { flex-shrink: 0; color: var(--hp-text-muted); transition: color 120ms ease; } .hp-cart-line__remove:hover { color: var(--hp-error); } .hp-cart-line__qty { display: inline-flex; height: 2.25rem; align-items: center; border-radius: 0.375rem; border: 1px solid var(--hp-border); } .hp-cart-line__qty-btn { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; } .hp-cart-line__qty input { width: 2rem; height: 2.25rem; text-align: center; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); border: 0; background: transparent; } .hp-cart-line__total { text-align: right; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); color: var(--hp-text); } /* Cart summary sidebar */ .hp-cart-summary { border-radius: var(--hp-radius-lg); border: 1px solid var(--hp-border); background: var(--hp-card); padding: 1.25rem; } .hp-cart-summary__title { font-size: var(--hp-fs-base); font-weight: var(--hp-fw-semibold); color: var(--hp-text); } .hp-cart-summary__row { display: flex; justify-content: space-between; font-size: var(--hp-fs-sm); } .hp-cart-summary__row-label { color: var(--hp-text-secondary); } .hp-cart-summary__row-value { font-weight: var(--hp-fw-medium); color: var(--hp-text); } .hp-cart-summary__total { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--hp-border); padding-top: var(--hp-space-4); margin-top: var(--hp-space-4); } .hp-cart-summary__total-label { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); } .hp-cart-summary__total-value { font-size: var(--hp-fs-xl); font-weight: var(--hp-fw-bold); color: var(--hp-text); } /* Empty state (cart empty branch — Q9 result) */ .hp-empty-card { border-radius: var(--hp-radius-lg); border: 1px solid var(--hp-border); background: var(--hp-card); padding: var(--hp-space-12); text-align: center; } .hp-empty-card__title { font-size: var(--hp-fs-lg); font-weight: var(--hp-fw-semibold); color: var(--hp-text); } .hp-empty-card__body { margin: var(--hp-space-2) auto 0; max-width: 28rem; font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); } /* STAGE 227 (2026-07-20): fix vertical centering of .hp-empty-card on the com_jshopping search-noresult page. Root cause was a wrapper reset elsewhere in this file: .hp-main .mx-auto.max-w-7xl.py-8 > div:first-child { padding-top: 0 !important; } The jshopping search noresult template renders
as the DIRECT first child of the .py-8 layout wrapper, so that reset kills padding-top:48px and the text jams against the top edge (visual gap.top≈1, gap.bot≈49). The com_finder search page was NOT affected because its H1 form sits before .hp-empty-card, so the reset targets the H1 wrapper instead. Two-part fix: (A) restore padding-top explicitly for .hp-empty-card when it lands as the first child — this beats the reset on class specificity even with !important (both have !important; ours has more classes). (B) apply flex-column centering to EVERY .hp-empty-card so heading + body always behave as one vertically-centered group, regardless of parent (this also covers com_finder, com_content/category, jshopping cart etc.). */ .hp-main .mx-auto.max-w-7xl.py-8 > .hp-empty-card:first-child { padding-top: var(--hp-space-12) !important; } .hp-empty-card { display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Checkout step indicator (checkout/menu.php port) */ .hp-stepper { display: flex; align-items: center; gap: var(--hp-space-2); overflow-x: auto; margin-bottom: var(--hp-space-8); padding-bottom: var(--hp-space-2); } .hp-stepper__item { display: flex; align-items: center; gap: var(--hp-space-2); } .hp-stepper__num { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; border-radius: var(--hp-radius-full); font-size: var(--hp-fs-xs); font-weight: var(--hp-fw-semibold); background: var(--hp-nav); color: var(--hp-text-secondary); } .hp-stepper__label { white-space: nowrap; font-size: var(--hp-fs-sm); color: var(--hp-text-secondary); } .hp-stepper__connector { margin: 0 0.25rem; height: 1px; width: 1.5rem; background: var(--hp-border); } @media (min-width: 640px) { .hp-stepper__connector { width: 2.5rem; } } .hp-stepper__item--current .hp-stepper__num, .hp-stepper__item--done .hp-stepper__num { background: var(--hp-primary); color: var(--hp-primary-foreground); } .hp-stepper__item--current .hp-stepper__label, .hp-stepper__item--done .hp-stepper__label { font-weight: var(--hp-fw-medium); color: var(--hp-text); } /* Radio option row (delivery + payment method) */ .hp-radio-row { display: flex; cursor: pointer; align-items: center; gap: var(--hp-space-3); padding: var(--hp-space-4); border-radius: var(--hp-radius); border: 1px solid var(--hp-border); background: var(--hp-card); transition: border-color 120ms ease, background-color 120ms ease; } .hp-radio-row:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); } .hp-radio-row--selected, .hp-radio-row:has(input:checked) { border-color: var(--hp-primary); background: var(--hp-header); } .hp-radio-row__custom { display: inline-flex; width: 1.25rem; height: 1.25rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--hp-radius-full); border: 2px solid var(--hp-border); } .hp-radio-row--selected .hp-radio-row__custom, .hp-radio-row:has(input:checked) .hp-radio-row__custom { border-color: var(--hp-primary); } .hp-radio-row__dot { display: none; width: 0.625rem; height: 0.625rem; background: var(--hp-primary); border-radius: var(--hp-radius-full); } .hp-radio-row--selected .hp-radio-row__dot, .hp-radio-row:has(input:checked) .hp-radio-row__dot { display: block; } .hp-radio-row__label { flex: 1; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); } .hp-radio-row__detail { display: block; font-size: var(--hp-fs-xs); color: var(--hp-text-secondary); } .hp-radio-row__price { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); } /* Form field (checkout, login, contact) */ .hp-field { display: block; } .hp-field__label { display: block; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-medium); color: var(--hp-text); margin-bottom: 0.375rem; } .hp-field__required { color: var(--hp-primary); } .hp-field__input { display: block; width: 100%; height: 2.75rem; border-radius: 0.375rem; border: 1px solid var(--hp-border); background: var(--hp-card); padding: 0 var(--hp-space-3); font-size: var(--hp-fs-sm); color: var(--hp-text); } .hp-field__input:focus { border-color: var(--hp-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--hp-primary) 20%, transparent); } .hp-field__input::placeholder { color: var(--hp-text-muted); } /* JoomShopping default output — soft-normalize for surfaces we haven't overridden yet (manufacturer/vendor/wishlist per D1) */ .jshop, .jshop_list_product, #comjshop { color: var(--hp-text); } .jshop table.cart, .jshop table.jshop_subtotal { width: 100%; border-collapse: collapse; } .jshop table.cart th, .jshop table.cart td { padding: var(--hp-space-3) var(--hp-space-4); border-bottom: 1px solid var(--hp-border); text-align: left; } .jshop_pagination { margin-top: var(--hp-space-6); display: flex; justify-content: center; gap: var(--hp-space-2); } .jshop_pagination .pagination a, .jshop_pagination .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--hp-space-2); border: 1px solid var(--hp-border); border-radius: 0.375rem; font-size: var(--hp-fs-sm); color: var(--hp-text); background: var(--hp-card); } .jshop_pagination .pagination .active a, .jshop_pagination .pagination .active span { background: var(--hp-primary); border-color: var(--hp-primary); color: var(--hp-primary-foreground); } /* ===== Hide JoomShopping vendor/copyright injection ===== */ /* The element contains "Copyright MAXXmarketing GmbH" + "JoomShopping Download & Support" — added by the com_jshopping component itself, not by any override. Hidplanet is licensed and does not need this vendor attribution in the frontend chrome. */ #mxcpr, .jshop-copyright, .jshop-poweredby { display: none !important; } /* ===== Header cart badge — real count via JSFactory::getCart(), no module HTML injection ===== */ .hp-cart-badge { display: inline-flex; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; align-items: center; justify-content: center; border-radius: 9999px; background: var(--hp-primary); color: var(--hp-primary-foreground); font-size: 0.6875rem; font-weight: var(--hp-fw-semibold); } /* Safety: if the JoomShopping cart module ever ends up in the DOM anyway, hide it */ .hp-cart-link #jshop_module_cart { display: none !important; } /* ========================================================================= * PRODUCT GRID — DEFENSIVE FULL-WIDTH RESPONSIVE OVERRIDE * * Owner screenshot showed: cards extremely narrow, only small left column * used, huge empty area on right, titles/buttons clipped. This override forces * a truly responsive grid regardless of any conflicting rule from * com_jshopping/css/default.css, plugin stylesheets, or earlier utility * classes with same specificity. * * Behavior: * auto-fill minmax(240px, 1fr) → grid fits as many ≥240px cards as parent width allows. * - ~1440px viewport (with 80rem container + 16px padding): 4 cards per row * - ~1024px: 4 cards * - ~768px: 3 cards * - ~480px: 2 cards * - <380px: 1 card * width:100%; max-width:100% — kills any parent-imposed narrower box. * !important on grid-template-columns to beat any later cascade override. * ========================================================================= */ .hp-home-featured-grid, .hp-product-grid, #comjshop_list_product, #comjshop_list_product > .grid, .hp-category-products .grid, .jshop_list_product > .grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 1rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; float: none !important; } /* Mobile: allow smaller cards to prevent 1-card horizontal underuse on narrow phones */ @media (max-width: 480px) { .hp-home-featured-grid, .hp-product-grid, #comjshop_list_product, #comjshop_list_product > .grid, .hp-category-products .grid, .jshop_list_product > .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 0.5rem !important; } } /* Individual card — full cell, clamp text, tight footer */ .hp-home-featured-grid .hp-product-card, .hp-product-grid .hp-product-card, .hp-category-products .hp-product-card { width: 100%; box-sizing: border-box; min-height: 100%; min-width: 0; } .hp-product-card__body { min-height: 0; padding: 0.875rem; } .hp-product-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .hp-product-card__footer { flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; } .hp-product-card__footer .hp-btn--sm { white-space: nowrap; padding: 0 0.75rem; height: 2rem; flex-shrink: 0; } .hp-product-card__price { white-space: nowrap; } /* Kill any JoomShopping Bootstrap-2 row-fluid / sblock inheritance that could * squash cards inside my template's home/category regions. Category page * uses my override so this is defensive only. */ .hp-app section .row-fluid, .hp-app section .row-fluid0 { display: contents !important; margin: 0 !important; } .hp-app section [class*="sblock"] { width: auto !important; float: none !important; padding: 0 !important; } /* No horizontal overflow anywhere */ html, body { overflow-x: hidden; } .hp-app { min-width: 0; overflow-x: hidden; } /* Homepage container width safety — ensures max-w-7xl actually reaches 80rem or 100% */ .hp-app section > .mx-auto.max-w-7xl, .hp-app main > .mx-auto.max-w-7xl { width: 100%; max-width: min(80rem, 100%); margin-left: auto; margin-right: auto; box-sizing: border-box; } /* ========================================================================= * PHASE 9 — CATALOGUE POLISH * Homepage category tiles, product card refinement, useful-materials cards, * category-page "read more" section. No new colour tokens, no marketing style. * ========================================================================= */ /* Homepage category tiles — replaces the ДИ/ИН/КЛ initial placeholders with a * finished catalogue-style card: line icon on a subtle bg, single-line label. */ .hp-cat-tile { display: flex; flex-direction: column; align-items: center; gap: var(--hp-space-3); padding: var(--hp-space-5, 1.25rem) var(--hp-space-3); text-align: center; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); text-decoration: none; transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; min-height: 8rem; } .hp-cat-tile:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); box-shadow: 0 6px 18px -10px rgba(45, 36, 22, 0.20); transform: translateY(-1px); } .hp-cat-tile__icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--hp-radius); background: var(--hp-header); color: var(--hp-primary); flex-shrink: 0; } .hp-cat-tile__icon svg { width: 1.5rem; height: 1.5rem; } .hp-cat-tile__label { font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); line-height: 1.25; color: var(--hp-text); margin: 0; } .hp-cat-tile:hover .hp-cat-tile__label { color: var(--hp-primary); } @media (max-width: 480px) { .hp-cat-tile { min-height: 7rem; padding: var(--hp-space-4) var(--hp-space-2); gap: var(--hp-space-2); } .hp-cat-tile__icon { width: 2.25rem; height: 2.25rem; } .hp-cat-tile__icon svg { width: 1.25rem; height: 1.25rem; } .hp-cat-tile__label { font-size: var(--hp-fs-xs); } } /* Homepage featured product cards — tighter alignment, consistent card height */ .hp-home-featured-grid { align-items: stretch; } .hp-home-featured-grid .hp-product-card { display: flex; flex-direction: column; height: 100%; } .hp-home-featured-grid .hp-product-card__image-wrap { aspect-ratio: 4 / 3; background: var(--hp-header); } .hp-home-featured-grid .hp-product-card__image { padding: var(--hp-space-4); } .hp-home-featured-grid .hp-product-card__body { padding: 0.875rem 0.875rem 1rem; } .hp-home-featured-grid .hp-product-card__title { min-height: 2.6em; } .hp-home-featured-grid .hp-product-card__stock { margin-top: var(--hp-space-2); } .hp-home-featured-grid .hp-product-card__footer { padding-top: var(--hp-space-3); border-top: 1px solid var(--hp-border); align-items: center; } .hp-home-featured-grid .hp-product-card__price { font-size: var(--hp-fs-base); } @media (max-width: 480px) { .hp-home-featured-grid .hp-product-card__body { padding: 0.75rem; } .hp-home-featured-grid .hp-product-card__title { font-size: 0.8125rem; min-height: 2.4em; } .hp-home-featured-grid .hp-product-card__price { font-size: 0.875rem; } .hp-home-featured-grid .hp-product-card__footer .hp-btn--sm { padding: 0 0.5rem; font-size: 0.6875rem; height: 1.75rem; } .hp-home-featured-grid .hp-product-card__stock { margin-top: var(--hp-space-1); } .hp-home-featured-grid .hp-stock-badge { font-size: 0.6875rem; padding: 0.125rem 0.375rem; } } /* Homepage useful-materials cards — calm technical link tiles, not banners */ #hp-home-info a.group { padding: var(--hp-space-5, 1.25rem) var(--hp-space-4); background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; min-height: 5.5rem; } #hp-home-info a.group:hover { border-color: color-mix(in oklab, var(--hp-primary) 35%, transparent); box-shadow: 0 4px 14px -8px rgba(45, 36, 22, 0.16); } #hp-home-info a.group svg { color: var(--hp-primary); background: var(--hp-header); padding: 0.375rem; width: 2rem; height: 2rem; border-radius: var(--hp-radius); box-sizing: border-box; margin-top: 0; flex-shrink: 0; } #hp-home-info a.group h3 { font-size: 0.9375rem; line-height: 1.35; letter-spacing: -0.01em; } #hp-home-info a.group p { color: var(--hp-text-muted); font-size: 0.75rem; } /* Homepage section rhythm — a hair tighter than py-12 so the visual centre of * gravity sits earlier and desktop hero doesn't feel empty. Keep mobile compact. */ #hp-home-categories { padding-top: 3rem; padding-bottom: 3rem; } #hp-home-info { padding-top: 3rem; padding-bottom: 3.5rem; } @media (min-width: 1024px) { #hp-home-categories { padding-top: 3.5rem; padding-bottom: 3.5rem; } #hp-home-info { padding-top: 3.5rem; padding-bottom: 4rem; } } /* Category page "Подробнее" section — houses the moved-down long description. * Compact info box (border + subtle bg + narrower max-width for readability). */ .hp-cat-longdesc { margin-top: 3rem; padding: 1.5rem var(--hp-space-6); background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); } .hp-cat-longdesc__title { font-size: var(--hp-fs-lg); font-weight: var(--hp-fw-semibold); color: var(--hp-text); margin: 0 0 var(--hp-space-3); letter-spacing: -0.005em; } .hp-cat-longdesc__body { max-width: 52rem; color: var(--hp-text-secondary); font-size: 0.9375rem; line-height: 1.65; } .hp-cat-longdesc__body p { margin: 0 0 var(--hp-space-3); } .hp-cat-longdesc__body p:last-child { margin-bottom: 0; } .hp-cat-longdesc__body img { max-width: 100%; height: auto; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); margin: 0.5rem 0; } @media (min-width: 1024px) { .hp-cat-longdesc { padding: 2rem 2.25rem; } } /* Category page short intro — displayed only for categories that have a * hp_intro_key entry in the override. Tight, catalogue tone. */ .hp-cat-intro { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--hp-header); border-left: 3px solid var(--hp-primary); border-radius: 0 var(--hp-radius) var(--hp-radius) 0; color: var(--hp-text-secondary); font-size: 0.9375rem; line-height: 1.55; max-width: 52rem; } .hp-cat-intro ul { list-style: disc; padding-left: 1.15rem; margin: 0; } .hp-cat-intro ul li { margin: 0 0 0.35rem; } .hp-cat-intro ul li:last-child { margin-bottom: 0; } /* ========================================================================= * PHASE 10 — DIAGNOSTIC-FIRST HOMEPAGE FUNNEL * BMW → Opel → VAG → Universal direction cards. Neutral catalogue tone. * ========================================================================= */ .hp-diag-grid { align-items: stretch; } .hp-diag-card { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.25rem 1.25rem 1rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; } .hp-diag-card:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); box-shadow: 0 8px 22px -14px rgba(45,36,22,0.22); transform: translateY(-1px); } .hp-diag-card--primary { border-color: color-mix(in oklab, var(--hp-primary) 55%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--hp-primary) 8%, var(--hp-card)) 0%, var(--hp-card) 42%); } .hp-diag-card__head { display: flex; align-items: center; justify-content: space-between; } .hp-diag-card__icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--hp-radius); background: var(--hp-header); color: var(--hp-primary); } .hp-diag-card__icon svg { width: 1.35rem; height: 1.35rem; } .hp-diag-card__rank { font-size: 0.75rem; font-weight: var(--hp-fw-semibold); letter-spacing: 0.06em; color: var(--hp-text-muted); font-variant-numeric: tabular-nums; } .hp-diag-card__title { margin: 0.25rem 0 0; font-size: var(--hp-fs-base); font-weight: var(--hp-fw-semibold); line-height: 1.3; color: var(--hp-text); letter-spacing: -0.005em; } .hp-diag-card__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--hp-text-secondary); } .hp-diag-card__actions { margin-top: auto; padding-top: 0.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; border-top: 1px solid var(--hp-border); } .hp-diag-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--hp-fs-sm); font-weight: var(--hp-fw-semibold); color: var(--hp-primary); background: none; padding: 0.375rem 0; } .hp-diag-card__cta svg { width: 1rem; height: 1rem; transition: transform 150ms ease; } .hp-diag-card__cta:hover { color: var(--hp-primary-hover); } .hp-diag-card:hover .hp-diag-card__cta svg { transform: translateX(2px); } .hp-diag-card__guide { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--hp-text-muted); } .hp-diag-card__guide svg { width: 0.9375rem; height: 0.9375rem; } .hp-diag-card__guide:hover { color: var(--hp-primary); } @media (max-width: 640px) { .hp-diag-card { padding: 1rem; } .hp-diag-card__title { font-size: 0.9375rem; } .hp-diag-card__body { font-size: 0.75rem; } } /* Category hero — the DB image is usually 800×600 (~0.75 aspect). Cap height * so the actual catalogue (subcats + products) becomes visible well within * the first fold on 1440. The image keeps its intrinsic ratio; we just crop * the frame. */ .hp-cat-hero { max-width: 40rem; max-height: 18rem; } .hp-cat-hero img { display: block; width: 100%; height: 100%; max-height: 18rem; object-fit: cover; object-position: center; } @media (max-width: 640px) { .hp-cat-hero { max-height: 12rem; } .hp-cat-hero img { max-height: 12rem; } } /* ========================================================================= * PHASE 11 — BMW DIAGNOSTIC PRODUCT UI BLOCKS * Rendered by html/com_jshopping/product/product_default.php between the * gallery+info split and the description tabs when the product is a BMW * diagnostic (category 10 + BMW/ENET/D-CAN/K+DCAN/ICOM/vLinker/BimmerCode * in the name). Non-BMW products render exactly as before. * ========================================================================= */ .hp-bmw-blocks .hp-bmw-block { background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); padding: 1.25rem 1.25rem 1.15rem; } .hp-bmw-blocks .hp-bmw-block__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .hp-bmw-blocks .hp-bmw-block__head h3 { margin: 0; font-size: 0.9375rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); letter-spacing: -0.005em; } .hp-bmw-blocks .hp-bmw-block__head-icon { width: 1.15rem; height: 1.15rem; color: var(--hp-primary); flex-shrink: 0; } /* Purpose — chip list */ .hp-bmw-chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; } .hp-bmw-chip-list li { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; background: var(--hp-header); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-full); font-size: 0.8125rem; color: var(--hp-text-secondary); line-height: 1.2; } /* Compatibility check — checkmark list */ .hp-bmw-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .hp-bmw-check-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8125rem; color: var(--hp-text-secondary); line-height: 1.45; } .hp-bmw-check-list__dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hp-primary); flex-shrink: 0; margin-top: 0.42rem; } /* Materials — 3-up link cards */ .hp-bmw-material-card { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.9rem 1rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; } .hp-bmw-material-card:hover { border-color: color-mix(in oklab, var(--hp-primary) 35%, transparent); box-shadow: 0 4px 14px -8px rgba(45,36,22,0.18); transform: translateY(-1px); } .hp-bmw-material-card__icon { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--hp-radius); background: var(--hp-header); color: var(--hp-primary); flex-shrink: 0; } .hp-bmw-material-card__icon svg { width: 1.15rem; height: 1.15rem; } .hp-bmw-material-card__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .hp-bmw-material-card__title { font-size: 0.875rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); line-height: 1.3; } .hp-bmw-material-card__desc { font-size: 0.75rem; color: var(--hp-text-muted); line-height: 1.35; } .hp-bmw-material-card__cta { margin-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: var(--hp-fw-semibold); color: var(--hp-primary); } .hp-bmw-material-card__cta svg { width: 0.85rem; height: 0.85rem; transition: transform 150ms ease; } .hp-bmw-material-card:hover .hp-bmw-material-card__cta svg { transform: translateX(2px); } /* Important — subtle amber-hint tone (no red alarm) */ .hp-bmw-block--important { background: color-mix(in oklab, var(--hp-primary) 6%, var(--hp-card)); border-color: color-mix(in oklab, var(--hp-primary) 25%, var(--hp-border)); } .hp-bmw-important__body { margin: 0; font-size: 0.8125rem; color: var(--hp-text-secondary); line-height: 1.55; max-width: 60rem; } /* Related BMW diagnostic products strip */ .hp-bmw-related__title { margin: 0; font-size: 1.35rem; font-weight: var(--hp-fw-bold); color: var(--hp-text); letter-spacing: -0.01em; } .hp-bmw-related__subtitle { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--hp-text-muted); } .hp-bmw-related-card { display: flex; flex-direction: column; overflow: hidden; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; min-width: 0; } .hp-bmw-related-card:hover { border-color: color-mix(in oklab, var(--hp-primary) 35%, transparent); box-shadow: 0 6px 18px -10px rgba(45,36,22,0.20); transform: translateY(-1px); } .hp-bmw-related-card__image-wrap { aspect-ratio: 4 / 3; background: var(--hp-header); overflow: hidden; display: flex; align-items: center; justify-content: center; } .hp-bmw-related-card__image { max-width: 100%; max-height: 100%; width: auto; height: auto; padding: 0.75rem; object-fit: contain; } .hp-bmw-related-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.85rem 0.9rem; min-width: 0; } .hp-bmw-related-card__name { font-size: 0.8125rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hp-bmw-related-card__price { font-size: 0.875rem; font-weight: var(--hp-fw-semibold); color: var(--hp-primary); } @media (max-width: 480px) { .hp-bmw-blocks .hp-bmw-block { padding: 1rem 1rem 0.95rem; } .hp-bmw-material-card { padding: 0.75rem 0.85rem; } .hp-bmw-material-card__title { font-size: 0.8125rem; } .hp-bmw-material-card__desc { font-size: 0.7rem; } .hp-bmw-related__title { font-size: 1.15rem; } } /* Description-tab tables: legacy product descriptions embed markup with * fixed column widths that push past 390 px on mobile. Wrap them in a * horizontal scroll shell so the page itself never overflows. */ [data-tab-panel="description"] table, .hp-cat-longdesc__body table, .jshop table { max-width: 100%; width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; } [data-tab-panel="description"] img, [data-tab-panel="description"] iframe, .hp-cat-longdesc__body img, .hp-cat-longdesc__body iframe { max-width: 100%; height: auto; } /* ========================================================================= * PHASE 12 — OPEL / OP-COM UI BLOCK ADDITIONS * Version / kit clarity block (2016 vs 2021 pill cards) + inline material * note. Uses the same tokens as BMW blocks; no new colours introduced. * ========================================================================= */ .hp-opel-version__body { margin: 0 0 0.85rem; font-size: 0.8125rem; color: var(--hp-text-secondary); line-height: 1.55; max-width: 60rem; } .hp-opel-version__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (max-width: 480px) { .hp-opel-version__grid { grid-template-columns: 1fr; } } .hp-opel-version-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); text-decoration: none; transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; } .hp-opel-version-card:not(.hp-opel-version-card--current):hover { border-color: color-mix(in oklab, var(--hp-primary) 35%, transparent); box-shadow: 0 4px 14px -8px rgba(45,36,22,0.16); transform: translateY(-1px); } .hp-opel-version-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .hp-opel-version-card__label { font-size: 0.9375rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); letter-spacing: -0.005em; } .hp-opel-version-card__sub { font-size: 0.75rem; color: var(--hp-text-muted); line-height: 1.4; } .hp-opel-version-card__head svg { width: 1rem; height: 1rem; color: var(--hp-primary); flex-shrink: 0; transition: transform 150ms ease; } .hp-opel-version-card:hover .hp-opel-version-card__head svg { transform: translateX(2px); } .hp-opel-version-card--current { background: color-mix(in oklab, var(--hp-primary) 6%, var(--hp-card)); border-color: color-mix(in oklab, var(--hp-primary) 40%, var(--hp-border)); cursor: default; } .hp-opel-version-card__pill { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; background: var(--hp-primary); color: var(--hp-primary-foreground); border-radius: var(--hp-radius-full); font-size: 0.6875rem; font-weight: var(--hp-fw-semibold); letter-spacing: 0.02em; } /* Inline material note card — same shell as .hp-bmw-material-card, no CTA link. */ .hp-opel-inline-note { cursor: default; } .hp-opel-inline-note:hover { border-color: var(--hp-border); box-shadow: none; transform: none; } /* ========================================================================= * PHASE 12 — HERO ABOVE-THE-FOLD DIAGNOSTIC MINI-PANEL * Replaces the previous empty monitor-icon placeholder on the right side of * the hero with 4 clickable mini-cards in BMW → Opel → VAG → Universal * commercial order. Uses same tokens as .hp-diag-card / .hp-cat-tile. * ========================================================================= */ .hp-hero-panel { background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg, 12px); padding: 1.25rem 1.15rem; box-shadow: 0 4px 24px -16px rgba(45,36,22,0.10); } .hp-hero-panel__head { margin-bottom: 0.85rem; } .hp-hero-panel__eyebrow { display: inline-block; font-size: 0.6875rem; font-weight: var(--hp-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-primary); } .hp-hero-panel__title { margin: 0.2rem 0 0; font-size: 0.9375rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); letter-spacing: -0.005em; } .hp-hero-panel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .hp-hero-mini { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.75rem 0.85rem 0.7rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); text-decoration: none; transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; min-width: 0; } .hp-hero-mini:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); box-shadow: 0 6px 18px -12px rgba(45,36,22,0.22); transform: translateY(-1px); } .hp-hero-mini--primary { background: linear-gradient(180deg, color-mix(in oklab, var(--hp-primary) 8%, var(--hp-card)) 0%, var(--hp-card) 60%); border-color: color-mix(in oklab, var(--hp-primary) 45%, var(--hp-border)); } .hp-hero-mini__head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; } .hp-hero-mini__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: var(--hp-radius); background: var(--hp-header); color: var(--hp-primary); flex-shrink: 0; } .hp-hero-mini__icon svg { width: 1.1rem; height: 1.1rem; } .hp-hero-mini__rank { font-size: 0.6875rem; font-weight: var(--hp-fw-semibold); letter-spacing: 0.06em; color: var(--hp-text-muted); font-variant-numeric: tabular-nums; } .hp-hero-mini__title { font-size: 0.9375rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); line-height: 1.2; letter-spacing: -0.005em; margin-top: 0.15rem; } .hp-hero-mini__sub { font-size: 0.6875rem; color: var(--hp-text-muted); line-height: 1.4; } .hp-hero-mini__cta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: var(--hp-fw-semibold); color: var(--hp-primary); margin-top: 0.2rem; } .hp-hero-mini__cta svg { width: 0.8rem; height: 0.8rem; transition: transform 150ms ease; } .hp-hero-mini:hover .hp-hero-mini__cta svg { transform: translateX(2px); } @media (max-width: 640px) { .hp-hero-panel { padding: 1rem 0.9rem; } .hp-hero-panel__grid { gap: 0.55rem; } .hp-hero-mini { padding: 0.65rem 0.7rem 0.6rem; } .hp-hero-mini__icon { width: 1.65rem; height: 1.65rem; } .hp-hero-mini__icon svg { width: 1rem; height: 1rem; } .hp-hero-mini__title { font-size: 0.875rem; } .hp-hero-mini__sub { font-size: 0.625rem; } } /* ========================================================================= * PHASE 13 — DESCRIPTION-TAB TYPOGRAPHY POLISH * The legacy product description on OP-COM (and similar older products) is a * long wall of RU prose with embedded

//

. It was untouched * by earlier phases but reads dense at default line-heights. This block adds * calmer spacing/rhythm ONLY inside the description tab; the JS/DOM anchors * around it (data-tab-panel, add-to-cart form, product image, price) are * not affected. * ========================================================================= */ [data-tab-panel="description"] { font-size: 0.9375rem; } [data-tab-panel="description"] > div { max-width: 62rem; } [data-tab-panel="description"] p { line-height: 1.65; margin: 0 0 0.85rem; } [data-tab-panel="description"] p:last-child { margin-bottom: 0; } [data-tab-panel="description"] strong { color: var(--hp-text); } [data-tab-panel="description"] h2, [data-tab-panel="description"] h3, [data-tab-panel="description"] h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); letter-spacing: -0.005em; } [data-tab-panel="description"] h2 { font-size: 1.15rem; } [data-tab-panel="description"] h3 { font-size: 1rem; } [data-tab-panel="description"] h4 { font-size: 0.9375rem; } [data-tab-panel="description"] ul, [data-tab-panel="description"] ol { padding-left: 1.25rem; margin: 0 0 0.85rem; } [data-tab-panel="description"] li { line-height: 1.55; margin-bottom: 0.3rem; } [data-tab-panel="description"] img { display: block; margin: 0.85rem auto; border-radius: var(--hp-radius); border: 1px solid var(--hp-border); max-height: 26rem; object-fit: contain; } [data-tab-panel="description"] table { margin: 0.85rem 0; font-size: 0.8125rem; border-collapse: collapse; } [data-tab-panel="description"] table th, [data-tab-panel="description"] table td { padding: 0.4rem 0.6rem; border: 1px solid var(--hp-border); } [data-tab-panel="description"] table th { background: var(--hp-header); font-weight: var(--hp-fw-semibold); } @media (max-width: 640px) { [data-tab-panel="description"] { font-size: 0.875rem; } [data-tab-panel="description"] p { line-height: 1.6; margin-bottom: 0.75rem; } [data-tab-panel="description"] img { max-height: 18rem; } } /* ========================================================================= * PHASE 14 — VAG DIAGNOSTIC UI BLOCK ADDITIONS * Tool-type chip row (VCDS / ODIS / VAG-CAN / KKL) highlighting the current * tool. Reuses the BMW block shell for the rest of the layout. * ========================================================================= */ .hp-vag-tooltype__body { margin: 0 0 0.85rem; font-size: 0.8125rem; color: var(--hp-text-secondary); line-height: 1.55; max-width: 60rem; } .hp-vag-tooltype__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; } .hp-vag-tt-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-full); font-size: 0.8125rem; font-weight: var(--hp-fw-medium); color: var(--hp-text-secondary); line-height: 1.2; } .hp-vag-tt-chip--current { background: color-mix(in oklab, var(--hp-primary) 6%, var(--hp-card)); border-color: color-mix(in oklab, var(--hp-primary) 45%, var(--hp-border)); color: var(--hp-text); } .hp-vag-tt-chip__pill { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; background: var(--hp-primary); color: var(--hp-primary-foreground); border-radius: var(--hp-radius-full); font-size: 0.625rem; font-weight: var(--hp-fw-semibold); letter-spacing: 0.02em; } /* ========================================================================= * PHASE 17 — DIAGNOSTIC HUB (only rendered on /ru/diagnostika, category 10) * 4 grouped anchor sections (BMW / Opel / VAG / Universal) above the * ordinary product grid. Existing products + existing article URLs only. * ========================================================================= */ .hp-diag-hub { margin: 0 0 3rem; } .hp-diag-hub__head { margin: 0 0 1.5rem; } .hp-diag-hub__title { margin: 0; font-size: 1.35rem; font-weight: var(--hp-fw-bold); color: var(--hp-text); letter-spacing: -0.01em; } .hp-diag-hub__body { margin: 0.35rem 0 0; font-size: 0.9375rem; color: var(--hp-text-muted); max-width: 52rem; } /* Phase 17B: stronger visual separation so BMW chips can't be misread as * belonging to the next (Opel) group. Wider bottom gap, more inner bottom * padding for the material chip row to breathe, and a gentle drop shadow so * each group reads as one self-contained card. */ .hp-diag-hub__group { margin: 1rem 0 2.5rem; padding: 1.25rem 1.25rem 1.5rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); box-shadow: 0 2px 12px -8px rgba(45, 36, 22, 0.14); /* scroll-margin so sticky header doesn't cover the group title */ scroll-margin-top: 6rem; } .hp-diag-hub__group:last-of-type { margin-bottom: 1.5rem; } .hp-diag-hub__group--accent { border-color: color-mix(in oklab, var(--hp-primary) 45%, var(--hp-border)); background: linear-gradient(180deg, color-mix(in oklab, var(--hp-primary) 8%, var(--hp-card)) 0%, var(--hp-card) 22%); } .hp-diag-hub__group-head { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1rem; } .hp-diag-hub__group-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--hp-radius); background: var(--hp-header); color: var(--hp-primary); flex-shrink: 0; } .hp-diag-hub__group-icon svg { width: 1.4rem; height: 1.4rem; } .hp-diag-hub__group-title { margin: 0; font-size: 1.05rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); letter-spacing: -0.005em; } .hp-diag-hub__group-sub { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--hp-text-muted); } .hp-diag-hub__products { align-items: stretch; } .hp-diag-hub__product { display: flex; flex-direction: column; overflow: hidden; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); transition: border-color 150ms ease, box-shadow 200ms ease, transform 150ms ease; min-width: 0; text-decoration: none; } .hp-diag-hub__product:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); box-shadow: 0 6px 18px -10px rgba(45,36,22,0.22); transform: translateY(-1px); } .hp-diag-hub__product-image-wrap { aspect-ratio: 4 / 3; background: var(--hp-header); overflow: hidden; display: flex; align-items: center; justify-content: center; } .hp-diag-hub__product-image { max-width: 100%; max-height: 100%; width: auto; height: auto; padding: 0.65rem; object-fit: contain; } .hp-diag-hub__product-body { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0.75rem 0.7rem; min-width: 0; } .hp-diag-hub__product-name { font-size: 0.75rem; font-weight: var(--hp-fw-semibold); color: var(--hp-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2em; } .hp-diag-hub__product-meta { margin-top: auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; flex-wrap: wrap; } .hp-diag-hub__product-price { font-weight: var(--hp-fw-semibold); color: var(--hp-primary); } .hp-diag-hub__product-stock { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; background: color-mix(in oklab, var(--hp-success) 12%, transparent); color: var(--hp-success); border-radius: var(--hp-radius-full); font-size: 0.625rem; font-weight: var(--hp-fw-medium); } .hp-diag-hub__materials { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px dashed var(--hp-border); font-size: 0.75rem; color: var(--hp-text-muted); } .hp-diag-hub__material-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; background: var(--hp-header); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-full); font-size: 0.75rem; color: var(--hp-text-secondary); text-decoration: none; transition: border-color 150ms ease, color 150ms ease; } .hp-diag-hub__material-chip:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); color: var(--hp-primary); } .hp-diag-hub__material-chip svg { width: 0.85rem; height: 0.85rem; color: var(--hp-primary); flex-shrink: 0; } .hp-diag-hub__browse { margin: 1.25rem 0 2rem; text-align: center; } .hp-diag-hub__browse-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-radius); font-size: 0.875rem; font-weight: var(--hp-fw-medium); color: var(--hp-text-secondary); text-decoration: none; transition: border-color 150ms ease, color 150ms ease; } .hp-diag-hub__browse-link:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); color: var(--hp-primary); } .hp-diag-hub__browse-link svg { width: 1rem; height: 1rem; } @media (max-width: 480px) { .hp-diag-hub__group { padding: 1rem 1rem 1.2rem; margin-bottom: 2rem; } .hp-diag-hub__group-icon { width: 2.25rem; height: 2.25rem; } .hp-diag-hub__group-icon svg { width: 1.15rem; height: 1.15rem; } .hp-diag-hub__group-title { font-size: 0.95rem; } .hp-diag-hub__group-sub { font-size: 0.75rem; } .hp-diag-hub__product-name { font-size: 0.7rem; } .hp-diag-hub__materials { font-size: 0.7rem; } .hp-diag-hub__material-chip { font-size: 0.7rem; padding: 0.25rem 0.55rem; } } /* ========================================================================== * Phase 22 — Photo well + section/subcat hub polish * * Purpose: real product photos (mostly white studio backgrounds) need a * calm frame that sits well on the warm beige site background. We do NOT * touch the source image — we frame it in a neutral card, keep it centred * with object-fit:contain, and apply a light border + soft shadow. * * Blend/multiply is INTENTIONALLY NOT used: tested on Xenon lamp (bright * glass), silver/chrome key shell, black BMW grille, colourful diagnostic * dongles — blend/multiply darkens transparent-ish white halos to grey and * kills detail on the diagnostic UI (screens/LEDs). Photo well approach * chosen instead — safe for every product family. * ========================================================================== */ .hp-photo-well { background: #ffffff; border: 1px solid #eae4d6; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px -12px rgba(112, 88, 45, 0.15); aspect-ratio: 4 / 3; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8px; } .hp-photo-well img, .hp-photo-well .jshop_img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .hp-section-hub__grid, .hp-subcat-hub__grid { row-gap: 1rem; } .hp-section-hub__tile, .hp-subcat-hub__tile { display: flex; flex-direction: column; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; } .hp-section-hub__tile:hover, .hp-subcat-hub__tile:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 24px -18px rgba(243, 111, 33, 0.35); transform: translateY(-1px); } .hp-section-hub__thumb, .hp-subcat-hub__thumb { margin-bottom: 0.25rem; } /* Tiles that fall back to noimage placeholder: soften the empty look with a * subtle warm gradient so they don't scream "MISSING" as loud as before. */ [data-hp-img-kind="noimage"] .hp-photo-well { background: linear-gradient(140deg, #fbf8f1 0%, #f5eede 100%); } [data-hp-img-kind="noimage"] .hp-photo-well img, [data-hp-img-kind="noimage"] .hp-photo-well .jshop_img { opacity: 0.4; filter: grayscale(1); } /* Product listing cards: give the existing card image container the same * photo-well treatment so listing grids feel consistent with hub tiles. */ .hp-product-card__image-wrap { background: #ffffff; border-bottom: 1px solid #f0ece2; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 10px; } .hp-product-card__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Product detail page hero image container also gets the well treatment. */ .hp-product-detail__gallery-main, .jshop_img_description { background: #ffffff; border: 1px solid #eae4d6; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -18px rgba(112, 88, 45, 0.18); overflow: hidden; padding: 16px; } /* Mobile: keep tile heights ergonomic, no horizontal overflow. */ @media (max-width: 640px) { .hp-photo-well { aspect-ratio: 4 / 3; padding: 6px; } .hp-product-card__image-wrap { padding: 8px; } } /* Phase 22 — Pagination visual repair * Joomla core emits nested .pagination containers. Tailwind reset had * collapsed the inner ul.pagination to a vertical stack of page numbers, * which the audit flagged as "strange vertical control artefact". Force * a horizontal flex layout with visible chips. */ .jshop_pagination { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 2rem; } .jshop_pagination nav.pagination__wrapper, .jshop_pagination > div.pagination { width: 100%; display: flex; justify-content: center; } .jshop_pagination ul.pagination { display: inline-flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 0.25rem; } .jshop_pagination ul.pagination li { list-style: none; } .jshop_pagination ul.pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.65rem; border: 1px solid var(--hp-border); background: var(--hp-card); color: var(--hp-text-secondary); border-radius: var(--hp-radius); font-size: 0.875rem; line-height: 1; text-decoration: none; transition: border-color 150ms, color 150ms, background 150ms; } .jshop_pagination ul.pagination .page-link:hover { border-color: color-mix(in oklab, var(--hp-primary) 40%, transparent); color: var(--hp-primary); } .jshop_pagination ul.pagination .active .page-link { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; } .jshop_pagination ul.pagination .disabled .page-link { opacity: 0.4; pointer-events: none; } .jshop_pagination .pagination_result_counter { text-align: center; margin-top: 0.5rem; } /* ========================================================================== * Phase 23 — Corrective UI reset * - Compact category tile with mini real-photo thumbnail (revert P22 giant) * - Stronger "Доступно сразу" green badge * - Pagination hides disabled prev/next (removes empty side boxes) * - Contacts article structured cards * - Removes VAT note (rendered PHP is already gone; keep CSS to hide any * stale cached copy just in case) * ========================================================================== */ /* Mini photo well: 72×72 thumbnail slot for compact category tiles */ .hp-photo-well--mini { width: 72px; height: 72px; background: #ffffff; border: 1px solid #eae4d6; border-radius: 10px; padding: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: auto; } .hp-photo-well--mini img, .hp-photo-well--mini .jshop_img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* Compact tile row layout */ .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 96px; } .hp-section-hub__tile--compact h3, .hp-subcat-hub__tile--compact h3 { font-size: 0.9rem; } @media (max-width: 640px) { .hp-photo-well--mini { width: 64px; height: 64px; padding: 5px; } .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 88px; } } /* Stronger "Доступно сразу" green badge — closer to live Hidplanet green */ .hp-stock-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; line-height: 1; letter-spacing: 0.01em; } .hp-stock-badge--in, .hp-stock-badge.available, #available_now { background: #dcf5df; color: #166534; border: 1px solid #86efac; } .hp-stock-badge--out, .hp-stock-badge.not_available, #not_available { background: #fde2e2; color: #b91c1c; border: 1px solid #fca5a5; } .hp-stock-badge--in::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); } /* Pagination: hide disabled prev/next so we don't render empty boxes */ .jshop_pagination ul.pagination li.disabled { display: none; } /* Keep prev/next arrow characters visible even if Joomla's icon font is absent */ .jshop_pagination ul.pagination .page-link .icon-angle-double-left::before, .jshop_pagination ul.pagination .page-link .icon-previous::before { content: '\00AB'; /* « */ } .jshop_pagination ul.pagination .page-link .icon-angle-double-right::before, .jshop_pagination ul.pagination .page-link .icon-next::before { content: '\00BB'; /* » */ } .jshop_pagination ul.pagination .page-link .icon-angle-left::before { content: '\2039'; /* ‹ */ } .jshop_pagination ul.pagination .page-link .icon-angle-right::before { content: '\203A'; /* › */ } /* Contacts page structured layout */ .hp-contacts-page { max-width: 60rem; } .hp-contacts-card { background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px -12px rgba(112, 88, 45, 0.15); } .hp-contacts-card__title { color: #1a1a1a; } .hp-contacts-card--map { padding: 0; } .hp-contacts-map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; border-radius: 0.5rem; } .hp-contacts-card--map { min-height: 260px; overflow: hidden; } /* Contacts article body override: neutralise old inline blue button style */ .hp-contacts-page .prose a[style*="background-color"] { background: transparent !important; color: var(--hp-primary, #f36f21) !important; padding: 0 !important; border-radius: 0 !important; text-decoration: underline; font-weight: 500; } .hp-contacts-page .prose p { margin-bottom: 0.9rem; } .hp-contacts-page .prose strong { color: #1a1a1a; } /* Kill any residual VAT note element if one leaks from cache */ .hp-product-detail__vat-note { display: none !important; } @media (max-width: 640px) { .hp-contacts-card--map { min-height: 220px; } .hp-contacts-map iframe { min-height: 220px; } } /* ========================================================================== * Phase 24 — Warm surface + density polish * (loads AFTER all previous P17/P20/P21/P22/P23 rules — wins by source order * where specificity is identical) * * Palette: * warm page bg : #f2eee6 (existing hp-header-bg / body background) * warm card bg : #fbf7ee (ivory, ~5° warmer than page) * warm border : #eae4d6 * soft shadow : rgba(112, 88, 45, 0.14) * photo well bg : #fdfaf3 (very light warm — reads as white but still * belongs to the beige palette) * photo well ring : rgba(112, 88, 45, 0.10) * ========================================================================== */ /* Warm the card surface for the section/subcat hub tiles + product cards * without touching cart / product-detail form / navigation surfaces. */ .hp-section-hub__tile, .hp-subcat-hub__tile, .hp-product-card { background: #fbf7ee !important; border-color: #eae4d6 !important; } .hp-section-hub__tile:hover, .hp-subcat-hub__tile:hover { background: #fbf5e6 !important; box-shadow: 0 1px 2px rgba(112, 88, 45, 0.05), 0 12px 24px -18px rgba(243, 111, 33, 0.4); } /* Photo well: warm ivory background instead of harsh white, subtle warm ring */ .hp-photo-well, .hp-photo-well--mini, .hp-product-card__image-wrap, .hp-product-detail__gallery-main, .jshop_img_description { background: #fdfaf3 !important; border-color: #eae4d6 !important; box-shadow: inset 0 0 0 1px rgba(112, 88, 45, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03), 0 8px 22px -18px rgba(112, 88, 45, 0.24); } /* Denser + slightly larger compact tile */ .hp-photo-well--mini { width: 84px; height: 84px; padding: 6px; border-radius: 12px; } @media (max-width: 640px) { .hp-photo-well--mini { width: 74px; height: 74px; padding: 5px; } } .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 108px; padding: 0.85rem; gap: 0.9rem; } @media (max-width: 640px) { .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 98px; padding: 0.7rem; gap: 0.7rem; } } .hp-section-hub__tile--compact h3, .hp-subcat-hub__tile--compact h3 { font-size: 0.95rem; font-weight: 600; color: #1a1a1a; } .hp-section-hub__tile--compact p, .hp-subcat-hub__tile--compact p { font-size: 0.78rem; color: #6b7280; } /* Slightly larger product card title + tighter card padding */ .hp-product-card__title { font-size: 0.92rem; line-height: 1.35; color: #1a1a1a; } .hp-product-card__body { padding: 0.9rem 1rem 1.05rem !important; } .hp-product-card__price { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; } /* Diagnostics hub — reduce vertical gap between head and first group */ section.hp-diag-hub { margin-top: 1rem; } section.hp-diag-hub .hp-diag-hub__head { margin-bottom: 0.5rem; } section.hp-diag-hub .hp-diag-hub__head + .hp-diag-hub__group, section.hp-diag-hub .hp-diag-hub__group:first-of-type { margin-top: 1.5rem; } section.hp-diag-hub .hp-diag-hub__group { padding: 1.1rem 1.2rem 1.3rem; } section.hp-diag-hub .hp-diag-hub__group-head { margin-bottom: 0.75rem; } @media (max-width: 640px) { section.hp-diag-hub .hp-diag-hub__head + .hp-diag-hub__group, section.hp-diag-hub .hp-diag-hub__group:first-of-type { margin-top: 1.25rem; } section.hp-diag-hub .hp-diag-hub__group { padding: 0.9rem 0.9rem 1.1rem; } } /* Warm the diagnostic-hub group card too */ .hp-diag-hub__group { background: #fbf7ee !important; border-color: #eae4d6 !important; } .hp-diag-hub__group--accent { background: linear-gradient(180deg, rgba(243, 111, 33, 0.08) 0%, #fbf7ee 45%) !important; border-color: rgba(243, 111, 33, 0.4) !important; } /* Hub mini-cards use the warm photo-well too */ .hp-diag-hub__product { background: #fbf7ee; border: 1px solid #eae4d6; border-radius: 12px; } .hp-diag-hub__product-image-wrap { background: #fdfaf3; border-radius: 10px; padding: 6px; } /* Category page: reduce top block whitespace between H1 and hub */ .hp-category-page .mb-6 { margin-bottom: 1rem !important; } .hp-category-page .jshop_list_category { margin-bottom: 1.25rem !important; } .hp-section-hub { margin-bottom: 1.25rem !important; } .hp-category-other-heading { margin-top: 1.25rem !important; margin-bottom: 0.75rem !important; } /* Article/contacts cards get the same warm treatment */ .hp-contacts-card, .hp-article, .hp-article__body { background: #fbf7ee !important; border-color: #eae4d6 !important; } .hp-contacts-card--map { background: #fdfaf3 !important; } /* Footer stays on the warm page tone (no change to bg-header token) */ /* Ensure the mobile menu drawer keeps a readable warm card too */ [data-hp-menu-panel], .hp-mobile-menu { background: #fbf7ee !important; } /* ========================================================================== * Phase 25 — Commercial UI tightening * - Product listing cards: tighter body padding, smaller vertical gaps * - Product page purchase area: tighter gap between title/price/badge/CTA * - Category tiles: micro tweaks * - Diagnostic hub mini-card stock badge: match main "Доступно сразу" style * - Contacts page: "Условия гарантии..." link styled as a warm CTA button * - Final photo well softening (already warm from P24 — tune padding only) * ========================================================================== */ /* -- product listing card compaction ----------------------------------- */ .hp-product-card { overflow: hidden; } .hp-product-card__image-wrap { aspect-ratio: 5 / 4 !important; padding: 8px !important; } .hp-product-card__body { padding: 0.7rem 0.8rem 0.85rem !important; display: flex; flex-direction: column; gap: 0.35rem !important; } .hp-product-card__title { font-size: 0.86rem !important; line-height: 1.3 !important; color: #1a1a1a; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hp-product-card__stock { margin: 0 !important; padding: 0 !important; } .hp-product-card__footer { margin-top: auto !important; padding-top: 0.4rem !important; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .hp-product-card__price { font-size: 1rem !important; font-weight: 700 !important; color: #1a1a1a; } .hp-product-card .hp-btn--primary, .hp-product-card .hp-btn--outline { padding: 0.45rem 0.75rem !important; font-size: 0.82rem !important; min-height: 34px; line-height: 1; } @media (max-width: 640px) { .hp-product-card__body { padding: 0.6rem 0.7rem 0.75rem !important; gap: 0.3rem !important; } .hp-product-card__title { font-size: 0.82rem !important; } .hp-product-card__price { font-size: 0.95rem !important; } .hp-product-card .hp-btn--primary { padding: 0.4rem 0.65rem !important; font-size: 0.78rem !important; min-height: 32px; } } /* -- diagnostic hub mini product stock badge — unify with green pill ---- */ .hp-diag-hub__product-stock { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; background: #dcf5df; color: #166534; border: 1px solid #86efac; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1; } .hp-diag-hub__product-stock::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: #16a34a; } /* -- product page compact purchase area -------------------------------- */ .hp-product-detail__info { display: flex; flex-direction: column; gap: 0.65rem; } .hp-product-detail__eyebrow { margin: 0; } .hp-product-detail__title { font-size: 1.6rem !important; line-height: 1.2 !important; margin: 0 !important; color: #1a1a1a; } .hp-product-detail__price-row { margin-top: 0.4rem !important; } .hp-product-detail__price { font-size: 1.4rem !important; font-weight: 700 !important; color: #b91c1c; } .hp-product-detail__info > .mt-4 { margin-top: 0.5rem !important; } /* stock badge wrapper */ .hp-product-detail__short { margin-top: 0.6rem !important; margin-bottom: 0 !important; font-size: 0.9rem; color: #4b5563; } .hp-product-detail__buy-row { margin-top: 0.75rem !important; padding-top: 0 !important; } .hp-product-detail__info > ul.hp-card { margin-top: 0.75rem !important; padding: 0.85rem 1rem !important; } .hp-product-detail__info > ul.hp-card li { padding: 0 !important; } @media (max-width: 640px) { .hp-product-detail__title { font-size: 1.35rem !important; } .hp-product-detail__price { font-size: 1.25rem !important; } .hp-product-detail__info { gap: 0.5rem; } .hp-product-detail__info > ul.hp-card { margin-top: 0.6rem !important; padding: 0.7rem 0.85rem !important; } } /* -- category tiles: even tighter internal spacing --------------------- */ .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 96px !important; padding: 0.75rem !important; gap: 0.75rem !important; } .hp-section-hub__tile--compact h3, .hp-subcat-hub__tile--compact h3 { font-size: 0.9rem !important; line-height: 1.25 !important; } .hp-section-hub__tile--compact p, .hp-subcat-hub__tile--compact p { margin-top: 0.15rem !important; font-size: 0.75rem !important; } .hp-photo-well--mini { width: 76px !important; height: 76px !important; padding: 5px !important; } @media (max-width: 640px) { .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 84px !important; padding: 0.6rem !important; gap: 0.6rem !important; } .hp-photo-well--mini { width: 66px !important; height: 66px !important; padding: 4px !important; } } /* -- contacts page: warranty/return button ----------------------------- */ .hp-contacts-page .prose a[href*="warranty-and-refund"], .hp-contacts-page .prose a[style*="background-color"] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem !important; background: #f36f21 !important; color: #ffffff !important; border-radius: 10px !important; text-decoration: none !important; font-weight: 600; font-size: 0.95rem; line-height: 1.2; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 18px -10px rgba(243,111,33,0.5); transition: background 150ms; } .hp-contacts-page .prose a[href*="warranty-and-refund"]:hover, .hp-contacts-page .prose a[style*="background-color"]:hover { background: #d95f18 !important; } .hp-contacts-page .prose a[href*="warranty-and-refund"]::before, .hp-contacts-page .prose a[style*="background-color"]::before { content: ''; display: inline-block; width: 16px; height: 16px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } @media (max-width: 640px) { .hp-contacts-page .prose a[href*="warranty-and-refund"], .hp-contacts-page .prose a[style*="background-color"] { width: 100%; justify-content: center; } } /* -- photo well final softening ---------------------------------------- */ .hp-photo-well, .hp-photo-well--mini, .hp-product-card__image-wrap, .hp-product-detail__gallery-main, .jshop_img_description { background: #fdfaf3 !important; border: 1px solid #eae4d6 !important; } /* -- section hub head tightening --------------------------------------- */ .hp-section-hub__head { margin-bottom: 0.65rem !important; } .hp-section-hub__title { font-size: 1rem !important; margin: 0 !important; } .hp-section-hub__body { margin-top: 0.15rem !important; } /* ========================================================================== * Phase 25B — Balanced density + full-card diag click + diag spacing + qty * ========================================================================== */ /* --- Rebalance product listing card density -------------------------- */ .hp-product-card__image-wrap { aspect-ratio: 4 / 3 !important; padding: 10px !important; } .hp-product-card__body { padding: 0.85rem 0.95rem 1rem !important; gap: 0.5rem !important; } .hp-product-card__title { font-size: 0.9rem !important; line-height: 1.35 !important; } .hp-product-card__footer { padding-top: 0.5rem !important; gap: 0.6rem; } .hp-product-card__price { font-size: 1.05rem !important; } .hp-product-card .hp-btn--primary, .hp-product-card .hp-btn--outline { padding: 0.55rem 0.9rem !important; font-size: 0.85rem !important; min-height: 38px; } @media (max-width: 640px) { .hp-product-card__body { padding: 0.75rem 0.85rem 0.9rem !important; gap: 0.45rem !important; } .hp-product-card__title { font-size: 0.85rem !important; } .hp-product-card__price { font-size: 1rem !important; } .hp-product-card .hp-btn--primary { padding: 0.5rem 0.75rem !important; font-size: 0.82rem !important; min-height: 36px; } } /* --- Rebalance product page purchase area --------------------------- */ .hp-product-detail__info { gap: 0.9rem !important; } .hp-product-detail__title { font-size: 1.7rem !important; line-height: 1.2 !important; } .hp-product-detail__price-row { margin-top: 0.5rem !important; } .hp-product-detail__price { font-size: 1.45rem !important; } .hp-product-detail__info > .mt-4 { margin-top: 0.7rem !important; } .hp-product-detail__short { margin-top: 0.75rem !important; } .hp-product-detail__buy-row { margin-top: 0.9rem !important; } .hp-product-detail__info > ul.hp-card { margin-top: 0.9rem !important; padding: 0.95rem 1.05rem !important; } @media (max-width: 640px) { .hp-product-detail__title { font-size: 1.4rem !important; } .hp-product-detail__info { gap: 0.7rem !important; } .hp-product-detail__info > ul.hp-card { padding: 0.8rem 0.95rem !important; } } /* --- Diagnostics vertical spacing fix (tighter) ---------------------- */ .hp-category-page[id="comjshop"] .mb-6:first-child { margin-bottom: 0.6rem !important; } .hp-diag-filter { margin: 0.75rem 0 0.75rem !important; padding: 12px 14px !important; } .hp-diag-filter__row { gap: 6px !important; } section.hp-diag-hub { margin-top: 0.5rem !important; } section.hp-diag-hub .hp-diag-hub__head { margin-bottom: 0.35rem !important; } section.hp-diag-hub .hp-diag-hub__head + .hp-diag-hub__group, section.hp-diag-hub .hp-diag-hub__group:first-of-type { margin-top: 1rem !important; } section.hp-diag-hub .hp-diag-hub__group { margin-top: 5rem !important; padding: 1rem 1.1rem 1.2rem !important; } section.hp-diag-hub .hp-diag-hub__group-head { margin-bottom: 0.6rem !important; } @media (max-width: 640px) { .hp-diag-filter { margin: 0.6rem 0 0.6rem !important; padding: 10px 12px !important; } section.hp-diag-hub .hp-diag-hub__group { margin-top: 3.25rem !important; padding: 0.85rem 0.9rem 1rem !important; } section.hp-diag-hub .hp-diag-hub__head + .hp-diag-hub__group, section.hp-diag-hub .hp-diag-hub__group:first-of-type { margin-top: 0.85rem !important; } } /* --- Full-card clickable diagnostic direction cards ------------------ */ .hp-diag-hub__group--clickable { position: relative; } .hp-diag-hub__group-cover { position: absolute; inset: 0; z-index: 1; display: block; border-radius: inherit; text-indent: -9999px; overflow: hidden; cursor: pointer; } .hp-diag-hub__group--clickable:hover { box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 16px 28px -20px rgba(243,111,33,0.35); border-color: rgba(243,111,33,0.45) !important; transform: translateY(-1px); transition: box-shadow 180ms, transform 180ms, border-color 180ms; } .hp-diag-hub__group-cover:focus-visible { outline: 2px solid #f36f21; outline-offset: 3px; border-radius: inherit; } .hp-diag-hub__group--clickable .hp-diag-hub__group-head, .hp-diag-hub__group--clickable .hp-diag-hub__products, .hp-diag-hub__group--clickable .hp-diag-hub__materials { position: relative; z-index: 2; } .hp-diag-hub__group--clickable .hp-diag-hub__product, .hp-diag-hub__group--clickable .hp-diag-hub__material-chip { position: relative; z-index: 3; } /* --- Quantity input visibility guarantee ---------------------------- */ .hp-product-detail__qty { display: inline-flex; align-items: center; height: 44px; background: #ffffff !important; border: 1px solid #eae4d6 !important; border-radius: 8px; overflow: hidden; } .hp-product-detail__qty-input { width: 3rem !important; height: 44px !important; background: #ffffff !important; color: #1a1a1a !important; font-size: 1rem !important; font-weight: 600 !important; text-align: center !important; border: 0 !important; appearance: textfield; -moz-appearance: textfield; -webkit-appearance: none; padding: 0 !important; line-height: 44px; } .hp-product-detail__qty-input::-webkit-outer-spin-button, .hp-product-detail__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hp-product-detail__qty-btn { width: 40px; height: 44px; background: #ffffff; color: #1a1a1a; border: 0; border-left: 1px solid #eae4d6; border-right: 1px solid #eae4d6; cursor: pointer; } .hp-product-detail__qty-btn--minus { border-left: 0; } .hp-product-detail__qty-btn--plus { border-right: 0; } .hp-product-detail__qty-btn:hover { color: #f36f21; background: #fdfaf3; } @media (max-width: 640px) { .hp-product-detail__qty { height: 42px; } .hp-product-detail__qty-input { height: 42px !important; line-height: 42px; width: 2.6rem !important; } .hp-product-detail__qty-btn { height: 42px; width: 36px; } } /* ========================================================================== * Phase 26 — Article / instruction / legal template * Warm ivory card wrap, readable typography, related product card * ========================================================================== */ .hp-article { max-width: 780px; margin-left: auto; margin-right: auto; padding: 0 16px; } .hp-article__header { margin-bottom: 18px; } .hp-article__crumb { margin: 0 0 8px; font-size: 13px; color: #7a6a52; } .hp-article__crumb-home { color: inherit; } .hp-article__crumb-home:hover { color: #f36f21; } .hp-article__title { font-size: 1.85rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: #1a1a1a; margin: 0; } @media (min-width: 640px) { .hp-article__title { font-size: 2.2rem; } } .hp-article__card { background: #fbf7ee; border: 1px solid #eae4d6; border-radius: 14px; padding: 28px 32px; box-shadow: 0 1px 2px rgba(15,23,42,0.03), 0 12px 32px -20px rgba(112,88,45,0.22); } @media (max-width: 640px) { .hp-article__card { padding: 18px 18px; border-radius: 12px; } } .hp-article__intro { font-size: 1rem; line-height: 1.65; color: #3a2f1e; margin-bottom: 20px; } .hp-article__body { font-size: 15px; line-height: 1.65; color: #1a1a1a; } .hp-article__body h1, .hp-article__body h2, .hp-article__body h3, .hp-article__body h4 { color: #1a1a1a; margin-top: 26px; margin-bottom: 10px; line-height: 1.3; font-weight: 700; } .hp-article__body h1 { font-size: 1.5rem; } .hp-article__body h2 { font-size: 1.25rem; } .hp-article__body h3 { font-size: 1.1rem; } .hp-article__body h4 { font-size: 1rem; } .hp-article__body h2:first-child, .hp-article__body h3:first-child { margin-top: 0; } .hp-article__body p { margin: 0 0 12px; } .hp-article__body ul, .hp-article__body ol { margin: 0 0 14px; padding-left: 1.3rem; } .hp-article__body ul li, .hp-article__body ol li { margin-bottom: 6px; } .hp-article__body ol { list-style: decimal outside; } .hp-article__body ul { list-style: disc outside; } .hp-article__body a { color: #b95a1a; text-decoration: underline; text-underline-offset: 2px; } .hp-article__body a:hover { color: #f36f21; } .hp-article__body strong { color: #1a1a1a; } .hp-article__body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid #eae4d6; background: #fdfaf3; padding: 6px; margin: 12px 0; } .hp-article__body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; } .hp-article__body th, .hp-article__body td { border: 1px solid #eae4d6; padding: 8px 10px; vertical-align: top; } .hp-article__body th { background: #f5eede; text-align: left; font-weight: 600; } .hp-article__body code { background: #f5eede; border-radius: 4px; padding: 1px 5px; font-size: 0.92em; color: #5c3a10; } .hp-article__body blockquote { background: #fdfaf3; border-left: 4px solid #f36f21; padding: 10px 14px; margin: 14px 0; color: #3a2f1e; border-radius: 0 8px 8px 0; } .hp-article__body hr { border: 0; height: 1px; background: #eae4d6; margin: 20px 0; } /* Neutralise inline yellow legacy styles in warranty/instruction articles */ .hp-article__body [style*="background-color"] { background: transparent !important; padding: 0 !important; color: inherit !important; border-radius: 0 !important; } .hp-article__body a[style*="background-color"] { display: inline-block; background: #f36f21 !important; color: #ffffff !important; padding: 8px 14px !important; border-radius: 10px !important; text-decoration: none; font-weight: 600; margin: 4px 0; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 6px 18px -10px rgba(243,111,33,0.5); } .hp-article__body a[style*="background-color"]:hover { background: #d95f18 !important; } /* Instruction-only tweaks */ .hp-article--instruction .hp-article__body img { max-width: 480px; } /* Legal (warranty) — number-heading formatting */ .hp-article--legal .hp-article__body ol { list-style: decimal outside; padding-left: 1.5rem; } .hp-article--legal .hp-article__body ol > li { margin-bottom: 10px; } /* Related product / category CTA card at bottom of an instruction article */ .hp-article__related { margin-top: 20px; max-width: 780px; margin-left: auto; margin-right: auto; padding: 0 16px; } .hp-article__related-label { font-size: 13px; font-weight: 600; color: #7a6a52; letter-spacing: 0.01em; margin-bottom: 8px; text-transform: uppercase; } .hp-article__related-card { display: flex; align-items: center; gap: 14px; background: #fbf7ee; border: 1px solid #eae4d6; border-radius: 14px; padding: 16px 18px; text-decoration: none; color: #1a1a1a; transition: box-shadow 180ms, border-color 180ms, transform 180ms; } .hp-article__related-card:hover { border-color: rgba(243,111,33,0.4); box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 16px 28px -20px rgba(243,111,33,0.35); transform: translateY(-1px); } .hp-article__related-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: #fdfaf3; color: #f36f21; border-radius: 10px; border: 1px solid #eae4d6; flex-shrink: 0; } .hp-article__related-icon svg { width: 20px; height: 20px; } .hp-article__related-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hp-article__related-title { font-size: 0.95rem; font-weight: 600; color: #1a1a1a; } .hp-article__related-sub { font-size: 0.8rem; color: #7a6a52; } .hp-article__related-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600; color: #f36f21; flex-shrink: 0; } .hp-article__related-cta svg { width: 14px; height: 14px; } @media (max-width: 640px) { .hp-article__related-card { padding: 12px 14px; gap: 10px; } .hp-article__related-icon { width: 36px; height: 36px; } .hp-article__related-cta span { display: none; } } /* ========================================================================== * Phase 27 — Corrective consolidation * - Structured article sections + callouts + checklists * - Inner page top spacing reduction * - Product card commercial block tightening * - Category tile text hierarchy boost * ========================================================================== */ /* --- Structured article sections + callouts ------------------------- */ .hp-article__section { margin: 0 0 18px; padding: 0; } .hp-article__section + .hp-article__section { border-top: 1px dashed #eae4d6; padding-top: 18px; } .hp-article__section-title { display: flex; align-items: baseline; gap: 0.55rem; font-size: 1.25rem !important; line-height: 1.3 !important; font-weight: 700; color: #1a1a1a; margin: 0 0 14px !important; } .hp-article__section-num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; background: #f36f21; color: #fff; border-radius: 999px; font-size: 0.9rem; font-weight: 700; line-height: 1; flex-shrink: 0; padding: 0 0.5rem; } .hp-article__step { display: flex; align-items: baseline; gap: 0.55rem; font-size: 1.05rem !important; font-weight: 600 !important; color: #1a1a1a; margin: 14px 0 8px !important; } .hp-article__step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; background: #fdfaf3; color: #b95a1a; border: 1px solid #eae4d6; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1; flex-shrink: 0; } .hp-article__callout { margin: 12px 0; padding: 12px 16px; background: #fff4e5; border: 1px solid #f7c087; border-left: 4px solid #f36f21; border-radius: 10px; } .hp-article__callout p { margin: 0; font-size: 0.95rem; color: #3a2f1e; } .hp-article__callout-label { display: inline-block; background: #f36f21; color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 6px; } .hp-article__callout--warn { background: #fef2f2; border-color: #fca5a5; border-left-color: #b91c1c; } .hp-article__callout--warn .hp-article__callout-label { background: #b91c1c; } .hp-article__checklist { list-style: none !important; padding-left: 0 !important; margin: 10px 0 !important; } .hp-article__checklist li { position: relative; padding: 4px 4px 4px 30px; line-height: 1.55; } .hp-article__checklist li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 18px; height: 18px; background: #16a34a; border-radius: 999px; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: 12px 12px; background-position: center; } .hp-article__bullets { list-style: none !important; padding-left: 0 !important; margin: 10px 0 !important; } .hp-article__bullets li { position: relative; padding: 3px 3px 3px 20px; line-height: 1.55; } .hp-article__bullets li::before { content: ''; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; background: #f36f21; border-radius: 999px; } /* --- Inner page top spacing ---------------------------------------- */ main, .hp-main { padding-top: 0 !important; } .hp-category-page[id="comjshop"] { padding-top: 12px !important; } .hp-category-page[id="comjshop"] > .mb-6:first-child { margin-top: 0 !important; padding-top: 0 !important; } .hp-article { padding-top: 12px !important; } .hp-article__header { margin-bottom: 14px !important; } .hp-page, .jshop_categ, .jshop_prod_description { padding-top: 8px !important; } @media (max-width: 640px) { .hp-category-page[id="comjshop"] { padding-top: 8px !important; } .hp-article { padding-top: 8px !important; } .hp-article__header { margin-bottom: 10px !important; } } /* --- Product listing card: commercial block tighter ---------------- */ .hp-product-card__body { gap: 0.35rem !important; padding: 0.75rem 0.85rem 0.85rem !important; } .hp-product-card__title { margin-bottom: 0 !important; } .hp-product-card__stock { margin: 0 !important; padding: 0 !important; } .hp-product-card__footer { margin-top: 0.35rem !important; padding-top: 0.45rem !important; border-top: 1px dashed rgba(112,88,45,0.08); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: nowrap; } .hp-product-card__price { margin: 0 !important; line-height: 1; } .hp-product-card .hp-btn--primary, .hp-product-card .hp-btn--outline { padding: 0.45rem 0.7rem !important; font-size: 0.82rem !important; min-height: 34px !important; white-space: nowrap; } @media (max-width: 640px) { .hp-product-card__body { padding: 0.7rem 0.8rem 0.8rem !important; gap: 0.32rem !important; } .hp-product-card__title { font-size: 0.82rem !important; } .hp-product-card__price { font-size: 0.95rem !important; } .hp-product-card .hp-btn--primary { padding: 0.4rem 0.6rem !important; font-size: 0.78rem !important; min-height: 32px !important; } } /* --- Category tile text hierarchy boost ---------------------------- */ .hp-section-hub__tile--compact h3, .hp-subcat-hub__tile--compact h3 { font-size: 1rem !important; line-height: 1.25 !important; font-weight: 700 !important; color: #1a1a1a !important; } .hp-section-hub__tile--compact p, .hp-subcat-hub__tile--compact p { font-size: 0.85rem !important; color: #b95a1a !important; font-weight: 600 !important; margin-top: 0.2rem !important; } .hp-section-hub__tile--compact svg, .hp-subcat-hub__tile--compact svg { color: #f36f21 !important; width: 20px !important; height: 20px !important; transition: transform 200ms; } .hp-section-hub__tile--compact:hover svg, .hp-subcat-hub__tile--compact:hover svg { transform: translateX(3px); } .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { min-height: 96px !important; padding: 0.85rem !important; gap: 0.9rem !important; } .hp-photo-well--mini { width: 84px !important; height: 84px !important; padding: 6px !important; } @media (max-width: 640px) { .hp-section-hub__tile--compact h3, .hp-subcat-hub__tile--compact h3 { font-size: 0.95rem !important; } .hp-section-hub__tile--compact p, .hp-subcat-hub__tile--compact p { font-size: 0.8rem !important; } .hp-photo-well--mini { width: 72px !important; height: 72px !important; padding: 5px !important; } .hp-section-hub__tile--compact, .hp-subcat-hub__tile--compact { padding: 0.7rem !important; gap: 0.7rem !important; min-height: 86px !important; } } /* ========================================================================== * Phase 29 — Post-architecture design polish * Appended to templates/hidplanet_staging/css/components.css * Scope: article template polish, product card density, category tile * hierarchy, internal spacing, hub visuals. NO architecture changes. * ========================================================================== */ /* --- Article template polish --------------------------------------- */ .hp-article { max-width: 860px !important; padding-top: 20px !important; } .hp-article__title { font-size: 2rem !important; margin-bottom: 4px !important; } @media (min-width: 640px) { .hp-article__title { font-size: 2.4rem !important; } } .hp-article__card { padding: 32px 36px !important; border-radius: 16px !important; } @media (max-width: 640px) { .hp-article__card { padding: 20px 20px !important; border-radius: 12px !important; } } .hp-article__body { font-size: 15.5px !important; line-height: 1.7 !important; } /* Section number pill — bigger and more prominent */ .hp-article__section-title { font-size: 1.35rem !important; font-weight: 700 !important; margin-bottom: 16px !important; padding-bottom: 8px !important; border-bottom: 1px solid #eae4d6; } .hp-article__section-num { min-width: 2.1rem !important; height: 2.1rem !important; font-size: 0.95rem !important; box-shadow: 0 4px 12px -4px rgba(243,111,33,0.4); } .hp-article__section + .hp-article__section { margin-top: 24px !important; padding-top: 24px !important; } /* Callouts — stronger visual emphasis */ .hp-article__callout { margin: 16px 0 !important; padding: 14px 18px !important; border-radius: 12px !important; box-shadow: 0 2px 8px -4px rgba(0,0,0,0.08); } .hp-article__callout-label { font-size: 0.75rem !important; padding: 3px 12px !important; margin-bottom: 8px !important; } .hp-article__callout p { font-size: 0.98rem !important; font-weight: 500 !important; } .hp-article__callout--warn { background: #fef2f2 !important; border-color: #fca5a5 !important; border-left-width: 5px !important; border-left-color: #b91c1c !important; } /* Step markers — sharper */ .hp-article__step { font-size: 1.1rem !important; margin-top: 18px !important; margin-bottom: 10px !important; } .hp-article__step-num { width: 1.7rem !important; height: 1.7rem !important; font-size: 0.85rem !important; background: #f36f21 !important; color: #fff !important; border-color: #f36f21 !important; } /* Article body H2/H3 — stronger */ .hp-article__body h2 { font-size: 1.35rem !important; font-weight: 700 !important; margin-top: 26px !important; } .hp-article__body h3 { font-size: 1.15rem !important; font-weight: 600 !important; margin-top: 20px !important; } /* Neutralize any leftover legacy inline yellow blocks */ .hp-article__body [style*="background-color"], .hp-article__body [style*="background:"] { background: transparent !important; color: inherit !important; padding: 0 !important; border-radius: 0 !important; } /* But preserve orange CTA buttons for backwards-compat */ .hp-article__body a[style*="background-color"] { display: inline-block; background: #f36f21 !important; color: #fff !important; padding: 10px 18px !important; border-radius: 10px !important; text-decoration: none !important; font-weight: 600 !important; margin: 6px 0 !important; box-shadow: 0 6px 18px -10px rgba(243,111,33,0.5); } /* --- Product card density --------------------------------------- */ /* Tighten commercial block: title→stock→price→button gaps */ .hp-product-card__body { padding: 0.9rem !important; gap: 0.5rem !important; } .hp-product-card__stock { margin-top: 0.4rem !important; } .hp-product-card__footer { padding-top: 0.65rem !important; gap: 0.5rem !important; align-items: center !important; } .hp-product-card__price { font-size: 1.05rem !important; font-weight: 700 !important; color: #1a1a1a; } .hp-product-card__footer .hp-btn--sm, .hp-product-card__footer .hp-btn { height: 2.2rem !important; padding: 0 0.85rem !important; font-size: 0.87rem !important; font-weight: 600 !important; } @media (max-width: 640px) { .hp-product-card__body { padding: 0.75rem !important; gap: 0.4rem !important; } .hp-product-card__footer { padding-top: 0.5rem !important; } .hp-product-card__footer .hp-btn--sm { height: 2rem !important; padding: 0 0.7rem !important; font-size: 0.82rem !important; } } /* --- Category tile / subcat hub hierarchy ------------------------ */ /* Larger title + more visible product count on category tiles */ .hp-subcat-hub__tile h3, .hp-subcat-hub__tile--compact h3 { font-size: 1rem !important; font-weight: 700 !important; color: #1a1a1a !important; letter-spacing: -0.01em; } .hp-subcat-hub__tile p, .hp-subcat-hub__tile--compact p { font-size: 0.85rem !important; color: #b95a1a !important; font-weight: 600 !important; letter-spacing: 0.01em; } .hp-subcat-hub__tile:hover, .hp-subcat-hub__tile--compact:hover { border-color: rgba(243,111,33,0.5) !important; box-shadow: 0 8px 22px -12px rgba(243,111,33,0.35) !important; transform: translateY(-1px); } .hp-cat-tile__label { font-size: 0.95rem !important; font-weight: 700 !important; } /* --- Internal page top spacing --------------------------------- */ main.hp-main { padding-top: 8px !important; } .hp-category-page[id="comjshop"] { padding-top: 8px !important; } .hp-article__header { margin-bottom: 12px !important; } /* --- Diagnostics hub — 5-tile grid better balance ---------------- */ /* On /ru/diagnostics landing, ensure the 5 tiles look balanced on a single row */ .hp-maincategory .grid { row-gap: 12px !important; } /* Article related-product card polish */ .hp-article__related-card { padding: 18px 20px !important; border-radius: 14px !important; } .hp-article__related-title { font-size: 1rem !important; font-weight: 700 !important; } .hp-article__related-sub { font-size: 0.85rem !important; color: #7a6a52; } /* ========================================================================== * Phase 30 — Product card commercial block repair * Price and add-to-cart button are now on separate vertical rows. * Fixes button clipping/overflow on long titles + non-RU languages. * ========================================================================== */ /* Force vertical stacking of the entire commercial block */ .hp-product-card__footer { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; gap: 0.55rem !important; padding-top: 0.6rem !important; } /* Price on its own row — no flex growth, just a line */ .hp-product-card__footer .hp-product-card__price { font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.15 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } /* Button full-width on its own row */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 2.35rem !important; padding: 0 0.75rem !important; font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Mobile: keep same vertical layout, small height/padding */ @media (max-width: 640px) { .hp-product-card__footer { gap: 0.5rem !important; padding-top: 0.55rem !important; } .hp-product-card__footer .hp-product-card__price { font-size: 1.05rem !important; } .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { height: 2.2rem !important; font-size: 0.85rem !important; padding: 0 0.6rem !important; } } /* Card body: ensure the footer sticks to the bottom with breathing room */ .hp-product-card__body { padding: 0.9rem !important; gap: 0.5rem !important; } @media (max-width: 640px) { .hp-product-card__body { padding: 0.75rem !important; } } /* Old-price line (strikethrough) stays above the current price */ .hp-product-card__footer .hp-product-card__price-old { font-size: 0.8rem !important; color: #7a6a52 !important; text-decoration: line-through !important; display: block !important; margin: 0 !important; } /* Category tile product count — Russian plural helper class emits * .hp-count with a data-plural attribute for finer control if needed */ .hp-maincategory__count, .hp-subcat-hub__count { font-size: 0.8rem !important; font-weight: 600 !important; color: #b95a1a !important; line-height: 1.3 !important; letter-spacing: 0.01em !important; } /* ========================================================================== * Phase 31 — v0 A+B hybrid product card, photo well, tighter top spacing * Overrides Phase 30 vertical layout with: * - horizontal action row (price left, button right) * - safe flex-wrap for narrow mobile * - CSS-only photo well radial gradient * - title 2-line clamp for equal-height cards * - reduced internal page top padding * ========================================================================== */ /* --- Photo well: white center → warm ivory edges (Variant C idea) --- */ .hp-product-card__image-wrap { background: radial-gradient( 120% 120% at 50% 42%, #ffffff 0%, #ffffff 45%, #fdfaf3 75%, #fbf7ee 100% ) !important; overflow: hidden !important; } /* --- Card body density (Variant B) --- */ .hp-product-card__body { padding: 0.75rem 0.85rem 0.8rem !important; gap: 0.35rem !important; display: flex !important; flex-direction: column !important; } /* --- Title 2-line clamp for equal-height cards --- */ .hp-product-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 2.55em !important; max-height: 2.55em !important; font-size: 0.85rem !important; line-height: 1.25 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; } /* --- Stock badge sits tight under title --- */ .hp-product-card__stock { margin-top: 0.25rem !important; } /* --- Action row: horizontal price left, compact button right (Variant A) --- */ .hp-product-card__footer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; margin-top: auto !important; padding-top: 0.7rem !important; min-width: 0 !important; } .hp-product-card__footer .hp-product-card__price-old { flex: 1 1 100% !important; font-size: 0.75rem !important; color: #7a6a52 !important; text-decoration: line-through !important; display: block !important; margin: 0 0 -2px !important; line-height: 1 !important; } .hp-product-card__footer .hp-product-card__price { flex: 0 0 auto !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.15 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } /* --- Compact orange button on the right (Variant A) --- */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { flex: 0 0 auto !important; width: auto !important; min-width: 108px !important; max-width: 100% !important; height: 2.1rem !important; padding: 0 0.85rem !important; font-size: 0.83rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; } /* --- Mobile: wrap safely so button never clips --- */ @media (max-width: 640px) { .hp-product-card__body { padding: 0.65rem 0.7rem 0.7rem !important; } .hp-product-card__title { font-size: 0.82rem !important; } .hp-product-card__footer { gap: 8px !important; padding-top: 0.55rem !important; } .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { height: 1.95rem !important; font-size: 0.78rem !important; padding: 0 0.65rem !important; min-width: 90px !important; } .hp-product-card__footer .hp-product-card__price { font-size: 1rem !important; } } /* --- Extra-narrow phones (~360px): allow button to become full row so * it never clips even with long localized labels --- */ @media (max-width: 380px) { .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { flex: 1 1 100% !important; min-width: 0 !important; } } /* --- Reduce internal category-page top spacing --- */ main.hp-main { padding-top: 4px !important; } .hp-category-page[id="comjshop"] { padding-top: 4px !important; } .hp-category-page[id="comjshop"] > .mb-6:first-child { margin-top: 0 !important; } #comjshop.jshop.hp-category-page h1 { margin-top: 0 !important; margin-bottom: 0.85rem !important; } .hp-maincategory h1 { margin-bottom: 0.85rem !important; } @media (max-width: 640px) { main.hp-main { padding-top: 2px !important; } #comjshop.jshop.hp-category-page h1 { margin-bottom: 0.7rem !important; } } /* --- Product grid row rhythm --- */ .hp-product-grid, .hp-home-featured-grid, .hp-category-products { row-gap: 1rem !important; } /* ========================================================================== * Product Card FINAL Refinement — screenshot-direction polish * - price 24px desktop / 21px mobile * - stronger equal-height enforcement (no stair-step) * - consistent title/stock/action rows across cards in a row * - photo well preserved * ========================================================================== */ /* Equal-height card wrapper (grid children) */ .hp-home-featured-grid .hp-product-card, .hp-product-grid .hp-product-card, .hp-category-products .hp-product-card { display: flex !important; flex-direction: column !important; height: 100% !important; min-height: 0 !important; } /* Image / photo well — consistent height */ .hp-product-card__image-wrap { aspect-ratio: 1 / 1 !important; flex: 0 0 auto !important; background: radial-gradient( 120% 120% at 50% 42%, #ffffff 0%, #ffffff 45%, #fbf8ef 76%, #f4efe3 100% ) !important; overflow: hidden !important; } /* Card body — flex column, footer pinned to bottom */ .hp-product-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0.85rem 0.9rem 0.9rem !important; gap: 0.4rem !important; min-height: 0 !important; } /* Title — 2-line clamp with fixed height so cards align */ .hp-product-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 2.6em !important; max-height: 2.6em !important; font-size: 0.88rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; flex: 0 0 auto !important; } /* Stock badge row — fixed height so alignment is consistent */ .hp-product-card__stock { min-height: 1.9rem !important; max-height: 1.9rem !important; display: flex !important; align-items: center !important; margin-top: 0.15rem !important; flex: 0 0 auto !important; } /* Action row — pinned to bottom, horizontal */ .hp-product-card__footer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; margin-top: auto !important; padding-top: 0.8rem !important; min-width: 0 !important; flex: 0 0 auto !important; } /* Old-price line (strike-through) */ .hp-product-card__footer .hp-product-card__price-old { flex: 1 1 100% !important; font-size: 0.75rem !important; color: #7a6a52 !important; text-decoration: line-through !important; line-height: 1 !important; margin: 0 0 -2px !important; display: block !important; } /* Price — 24px desktop per owner spec */ .hp-product-card__footer .hp-product-card__price { flex: 0 0 auto !important; font-size: 1.5rem !important; /* 24px */ font-weight: 700 !important; line-height: 1 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.01em !important; } /* Add-to-cart button — compact right side, non-clipping */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { flex: 0 0 auto !important; width: auto !important; min-width: 118px !important; max-width: 100% !important; height: 2.25rem !important; padding: 0 0.95rem !important; font-size: 0.85rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; } /* Mobile: price 21px, safe wrap */ @media (max-width: 640px) { .hp-product-card__body { padding: 0.7rem 0.75rem 0.75rem !important; gap: 0.35rem !important; } .hp-product-card__title { font-size: 0.83rem !important; } .hp-product-card__stock { min-height: 1.8rem !important; max-height: 1.8rem !important; } .hp-product-card__footer { gap: 8px !important; padding-top: 0.6rem !important; } .hp-product-card__footer .hp-product-card__price { font-size: 1.35rem !important; /* 21.6px */ } .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { height: 2.05rem !important; font-size: 0.8rem !important; padding: 0 0.7rem !important; min-width: 96px !important; } } /* Extra-narrow phones: action row wraps to two lines so button never clips */ @media (max-width: 380px) { .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--sm { flex: 1 1 100% !important; min-width: 0 !important; } } /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== /* ========================================================================== * PHASE 31C — VISUAL DRIFT REPAIR * 1. Product card rebalance: price 20-22px desktop / 18-20px mobile * 2. Photo well RESET: prefer CLEAN white area over double frame * 3. Category tile visual recomposition: image + title + count + arrow * 4. Diagnostics hub + benefits row spacing polish * 5. Whole tile clickable — links are already; ensure hover state * * NO architecture changes. NO alias changes. NO DB writes. * ========================================================================== */ /* ===================================================================== * 1. PRODUCT CARD — rebalanced * =====================================================================*/ .hp-product-card { display: flex !important; flex-direction: column !important; height: 100% !important; border: 1px solid rgba(210, 200, 178, 0.42) !important; border-radius: 12px !important; background: #ffffff !important; overflow: hidden !important; transition: box-shadow 220ms ease, border-color 180ms ease, transform 180ms ease; } .hp-product-card:hover { border-color: rgba(190, 150, 90, 0.58) !important; box-shadow: 0 12px 28px -18px rgba(45, 36, 22, 0.32) !important; transform: translateY(-1px); } .hp-product-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0.85rem 0.95rem 0.95rem !important; gap: 0.5rem !important; min-height: 0 !important; } .hp-product-card__eyebrow { display: none !important; } .hp-product-card__compat { display: none !important; } .hp-product-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 2.6em !important; max-height: 2.6em !important; font-size: 0.9rem !important; /* 14.4px */ line-height: 1.3 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 !important; flex: 0 0 auto !important; } /* Footer — column: meta-row on top, full-width button below */ .hp-product-card__footer { display: flex !important; flex-direction: column !important; margin-top: auto !important; padding-top: 0.5rem !important; gap: 0.55rem !important; min-width: 0 !important; border-top: 0 !important; } /* Stock badge + price on ONE row, baseline-aligned */ .hp-product-card__meta-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0.6rem !important; min-width: 0 !important; flex-wrap: nowrap !important; } .hp-product-card__footer .hp-product-card__stock, .hp-product-card__meta-row .hp-product-card__stock { margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.72rem !important; line-height: 1 !important; padding: 0.3rem 0.55rem !important; border-radius: 999px !important; white-space: nowrap !important; font-weight: 500 !important; } .hp-product-card__price-block { display: flex !important; flex-direction: column !important; align-items: flex-end !important; line-height: 1 !important; margin-left: auto !important; flex: 0 0 auto !important; } .hp-product-card__price-block .hp-product-card__price-old { font-size: 0.72rem !important; color: #8a7a5f !important; text-decoration: line-through !important; line-height: 1 !important; margin: 0 0 2px !important; display: block !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.25rem !important; /* 20px — rebalanced, not dominant */ font-weight: 700 !important; line-height: 1 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.005em !important; display: inline-block !important; } /* Full-width button (with normal side padding) */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--primary, .hp-product-card__footer .hp-btn--outline, .hp-product-card__footer .hp-btn--sm, .hp-product-card__footer .hp-btn--block { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; height: 2.35rem !important; min-height: 2.35rem !important; padding: 0 1rem !important; font-size: 0.86rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; border-radius: 8px !important; } /* Mobile: comfortable, no overflow */ @media (max-width: 640px) { .hp-product-card__body { padding: 0.7rem 0.75rem 0.8rem !important; gap: 0.4rem !important; } .hp-product-card__title { font-size: 0.85rem !important; line-height: 1.28 !important; min-height: 2.55em !important; max-height: 2.55em !important; } .hp-product-card__footer { padding-top: 0.45rem !important; gap: 0.5rem !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.63rem !important; padding: 0.22rem 0.42rem !important; line-height: 1 !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.125rem !important; /* 18px mobile */ } .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--primary, .hp-product-card__footer .hp-btn--outline, .hp-product-card__footer .hp-btn--sm, .hp-product-card__footer .hp-btn--block { height: 2.15rem !important; font-size: 0.82rem !important; padding: 0 0.8rem !important; } } /* ===================================================================== * 2. PHOTO WELL — RESET (Option B: clean neutral canvas, no double frame) * Removes the beige `.hp-header` inner background and every nested * border. Uses a single soft-neutral surface behind the product. * =====================================================================*/ .hp-product-card__image-wrap, a.hp-product-card__image-wrap { aspect-ratio: 1 / 1 !important; background: #fbfaf6 !important; /* whisper of warm neutral, NOT beige box */ border: 0 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.35) !important; padding: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; box-shadow: none !important; } .hp-product-card__image { width: 100% !important; height: 100% !important; padding: 8% !important; object-fit: contain !important; transition: transform 300ms ease !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .hp-product-card:hover .hp-product-card__image { transform: scale(1.03) !important; } /* Home featured grid + Diag hub products — same clean well */ .hp-home-featured-grid .hp-product-card__image-wrap, .hp-diag-hub__product-image-wrap { aspect-ratio: 1 / 1 !important; background: #fbfaf6 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.35) !important; border: 0 !important; } .hp-home-featured-grid .hp-product-card__image, .hp-diag-hub__product-image { padding: 8% !important; } /* Kill any generic `.hp-photo-well` grey/beige inner backgrounds on subcat/section tiles */ .hp-photo-well, .hp-photo-well--mini { background: #fbfaf6 !important; border: 0 !important; box-shadow: none !important; } /* ===================================================================== * 3. CATEGORY TILE VISUAL RECOMPOSITION * Consistent thumbnail-left composition: image | title+count | arrow * =====================================================================*/ .hp-subcat-hub__tile, .hp-section-hub__tile { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.85rem !important; padding: 0.75rem 0.9rem !important; background: #ffffff !important; border: 1px solid rgba(210, 200, 178, 0.42) !important; border-radius: 10px !important; transition: border-color 180ms ease, box-shadow 220ms ease, transform 150ms ease !important; min-height: 92px !important; text-decoration: none !important; position: relative !important; text-align: left !important; } .hp-subcat-hub__tile:hover, .hp-section-hub__tile:hover { border-color: rgba(190, 150, 90, 0.62) !important; box-shadow: 0 8px 20px -14px rgba(45, 36, 22, 0.28) !important; transform: translateY(-1px) !important; } .hp-subcat-hub__tile:focus-visible, .hp-section-hub__tile:focus-visible { outline: 2px solid var(--hp-primary) !important; outline-offset: 3px !important; } .hp-subcat-hub__thumb, .hp-section-hub__thumb { width: 60px !important; height: 60px !important; flex: 0 0 60px !important; border-radius: 8px !important; overflow: hidden !important; background: #fbfaf6 !important; border: 1px solid rgba(210, 200, 178, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .hp-subcat-hub__thumb img, .hp-section-hub__thumb img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 8% !important; background: transparent !important; } /* Title / count / arrow layout */ .hp-subcat-hub__tile > .min-w-0, .hp-section-hub__tile > .min-w-0 { flex: 1 1 auto !important; min-width: 0 !important; } .hp-subcat-hub__tile h3, .hp-section-hub__tile h3 { font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.28 !important; color: #1a1a1a !important; margin: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; } .hp-subcat-hub__count, .hp-section-hub__count { font-size: 0.72rem !important; font-weight: 600 !important; color: #b47a1c !important; margin: 3px 0 0 !important; line-height: 1 !important; } .hp-subcat-hub__tile svg, .hp-section-hub__tile svg { width: 1rem !important; height: 1rem !important; color: #b8a680 !important; flex-shrink: 0 !important; transition: transform 180ms ease, color 180ms ease !important; } .hp-subcat-hub__tile:hover svg, .hp-section-hub__tile:hover svg { color: var(--hp-primary) !important; transform: translateX(2px) !important; } /* NO IMAGE fallback: hide the arrow inside broken images */ .hp-subcat-hub__tile[data-hp-img-kind="noimage"] .hp-subcat-hub__thumb { background: #f4efe3 !important; } .hp-subcat-hub__tile[data-hp-img-kind="noimage"] .hp-subcat-hub__thumb img { opacity: 0.55 !important; } /* Mobile spacing */ @media (max-width: 640px) { .hp-subcat-hub__tile, .hp-section-hub__tile { padding: 0.65rem 0.75rem !important; gap: 0.7rem !important; min-height: 82px !important; } .hp-subcat-hub__thumb, .hp-section-hub__thumb { width: 52px !important; height: 52px !important; flex: 0 0 52px !important; } .hp-subcat-hub__tile h3, .hp-section-hub__tile h3 { font-size: 0.82rem !important; } .hp-subcat-hub__count, .hp-section-hub__count { font-size: 0.68rem !important; } } /* ===================================================================== * 4. DIAGNOSTIC-CARD whole-tile click (kept from P31B, still needed) * =====================================================================*/ .hp-diag-card { position: relative !important; cursor: pointer; } .hp-diag-card__cta { position: static !important; } .hp-diag-card__cta::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: transparent; } .hp-diag-card:focus-within, .hp-diag-card:has(.hp-diag-card__cta:focus-visible) { outline: 2px solid var(--hp-primary); outline-offset: 3px; } .hp-diag-card__cta:focus-visible { outline: none; } .hp-diag-card__actions { position: static !important; } .hp-diag-card__guide { position: relative !important; z-index: 3 !important; } .hp-diag-card__head, .hp-diag-card__title, .hp-diag-card__body { position: relative; z-index: 2; pointer-events: none; } .hp-diag-card__cta > span, .hp-diag-card__cta > svg { position: relative; z-index: 4; } /* ===================================================================== * 5. DIAGNOSTICS HEADING + INTRO SPACING * =====================================================================*/ #hp-diag-directions { padding-top: 1.25rem !important; padding-bottom: 0.4rem !important; } #hp-diag-directions > .mb-6 { margin-bottom: 0.85rem !important; } #hp-diag-directions h2 { font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; } #hp-diag-directions p { font-size: 0.85rem !important; margin-top: 0.2rem !important; line-height: 1.4 !important; } .hp-diag-hub { margin: 0 0 1.4rem !important; } .hp-diag-hub__head { margin: 0 0 0.85rem !important; } .hp-diag-hub__title { font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1.2 !important; } .hp-diag-hub__body { font-size: 0.85rem !important; margin-top: 0.2rem !important; line-height: 1.45 !important; } section.hp-diag-hub .hp-diag-hub__head + .hp-diag-hub__group, section.hp-diag-hub .hp-diag-hub__group:first-of-type { margin-top: 0.85rem !important; } section.hp-diag-hub .hp-diag-hub__group { margin-top: 1.4rem !important; padding: 1rem 1.1rem 1.15rem !important; } /* ===================================================================== * 6. BENEFITS ROW SPACING (final) * =====================================================================*/ .hp-trust-tile { padding: 1.05rem 1.4rem !important; gap: 0.9rem !important; align-items: flex-start !important; } .hp-trust-tile__icon { width: 1.35rem !important; height: 1.35rem !important; margin-top: 0.15rem !important; color: var(--hp-primary) !important; flex-shrink: 0 !important; } .hp-trust-tile__title { font-size: 0.9rem !important; font-weight: 600 !important; line-height: 1.25 !important; margin: 0 !important; } .hp-trust-tile__detail { font-size: 0.78rem !important; color: var(--hp-text-secondary) !important; margin: 0.15rem 0 0 !important; line-height: 1.35 !important; } @media (max-width: 640px) { .hp-trust-tile { padding: 0.85rem 0.95rem !important; gap: 0.7rem !important; } .hp-trust-tile__icon { width: 1.15rem !important; height: 1.15rem !important; } .hp-trust-tile__title { font-size: 0.82rem !important; } .hp-trust-tile__detail { font-size: 0.72rem !important; } } /* ========================================================================== * PHASE 32 — FINAL VISUAL QA * Additive CSS only. Product-card DOM/href logic untouched. * ==========================================================================*/ /* Category page header + short intro paragraph */ .hp-category-page .mb-6 { margin-bottom: 1.1rem !important; } .hp-category-page h1.text-2xl, .hp-category-page h1.sm\:text-3xl, .hp-category-page h1 { font-size: 1.5rem !important; /* 24 px */ font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; margin: 0 !important; } @media (min-width: 640px) { .hp-category-page h1 { font-size: 1.65rem !important; /* 26.4 px on sm+ */ } } .hp-cat-intro { margin-top: 0.5rem !important; } .hp-cat-intro__lede { margin: 0 !important; font-size: 0.9rem !important; line-height: 1.5 !important; color: var(--hp-text-secondary, #4d453b) !important; max-width: 62rem !important; } .hp-cat-intro ul { margin: 0.3rem 0 0 1rem !important; padding: 0 !important; font-size: 0.88rem !important; color: var(--hp-text-secondary, #4d453b) !important; line-height: 1.5 !important; } /* Kill dead vertical space between title/intro and first grid */ .hp-category-page .mb-6 + .jshop_list_category, .hp-category-page .mb-6 + .hp-section-hub, .hp-category-page .mb-6 + .jshop_list_product, .hp-category-page .mb-6 + .hp-product-grid { margin-top: 0.5rem !important; } .hp-category-page .jshop_list_category { margin-bottom: 1.25rem !important; } .hp-category-page .jshop_list_category > .grid { row-gap: 0.75rem !important; } /* Prevent hero image from adding dead space when there IS a real intro */ .hp-cat-hero { max-width: 42rem !important; margin: 0.75rem 0 0 !important; } .hp-cat-hero img { max-height: 220px !important; object-fit: contain !important; } /* Mobile: h1 smaller, intro compact */ @media (max-width: 640px) { .hp-category-page h1 { font-size: 1.3rem !important; } .hp-cat-intro__lede { font-size: 0.85rem !important; } .hp-cat-intro ul { font-size: 0.82rem !important; } } /* Final touch on photo well — keep Phase 31C setup, softer inner glow */ .hp-product-card__image-wrap, a.hp-product-card__image-wrap { background: radial-gradient(120% 100% at 50% 40%, #ffffff 0%, #ffffff 45%, #faf6ec 80%, #f3ecd8 100%) !important; border: 0 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.32) !important; } .hp-home-featured-grid .hp-product-card__image-wrap, .hp-diag-hub__product-image-wrap { background: radial-gradient(120% 100% at 50% 40%, #ffffff 0%, #ffffff 45%, #faf6ec 80%, #f3ecd8 100%) !important; border-bottom: 1px solid rgba(210, 200, 178, 0.32) !important; } /* Product card price down 1 pt for final balance */ .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.2rem !important; /* 19.2 px — clear but never dominant */ } @media (max-width: 640px) { .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.1rem !important; /* 17.6 px mobile */ } } /* Category tile visual — carry Phase 31C pattern, dial arrow contrast */ .hp-subcat-hub__tile svg, .hp-section-hub__tile svg { color: #8c7a52 !important; } .hp-subcat-hub__tile:hover svg, .hp-section-hub__tile:hover svg { color: var(--hp-primary) !important; } /* Diagnostics hub / benefits row spacing final */ .hp-trust-tile { padding: 1.05rem 1.4rem !important; gap: 0.9rem !important; } .hp-diag-hub__title { font-size: 1.1rem !important; } /* ========================================================================== * PHASE 32B — PRODUCT CARD ROW ALIGNMENT FIX * Enforce fixed-zone card structure: * 1. image area (aspect 1:1) * 2. title area (fixed 2-line height) * 3. stock/price row (fixed height, stock LEFT, price RIGHT) * 4. button row (fixed height, full-width) * * Product-card href logic UNTOUCHED (Phase 31D fix preserved). * ========================================================================== */ /* Card wrapper — equal-height flex column across every grid row */ .hp-product-card { display: flex !important; flex-direction: column !important; height: 100% !important; border: 1px solid rgba(210, 200, 178, 0.42) !important; border-radius: 12px !important; background: #ffffff !important; overflow: hidden !important; } /* Image area — clean, single subtle bottom seam only, no double frame */ .hp-product-card__image-wrap, a.hp-product-card__image-wrap { aspect-ratio: 1 / 1 !important; background: #fbfaf6 !important; /* Option B: clean near-white ivory */ border: 0 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.32) !important; padding: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; box-shadow: none !important; } .hp-product-card__image { width: 100% !important; height: 100% !important; padding: 8% !important; object-fit: contain !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .hp-home-featured-grid .hp-product-card__image-wrap, .hp-diag-hub__product-image-wrap { background: #fbfaf6 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.32) !important; border: 0 !important; } /* Body — 4 fixed zones stacked */ .hp-product-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0.85rem 0.95rem 0.95rem !important; gap: 0 !important; /* zones own their own spacing */ min-height: 0 !important; } /* Zone 2: title — FIXED 2-line clamp height */ .hp-product-card__eyebrow { display: none !important; } .hp-product-card__compat { display: none !important; } .hp-product-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 2.6em !important; max-height: 2.6em !important; font-size: 0.9rem !important; line-height: 1.3 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 0 0.7rem !important; flex: 0 0 auto !important; } .hp-product-card__title a, .hp-product-card__body > a { color: inherit !important; text-decoration: none !important; } /* Zone 3 + 4: footer container — always pinned to card bottom */ .hp-product-card__footer { display: flex !important; flex-direction: column !important; margin-top: auto !important; /* KEY: pushes stock/price + button to the bottom */ padding: 0 !important; gap: 0.55rem !important; /* between meta-row and button */ min-width: 0 !important; border-top: 0 !important; } /* Zone 3: meta-row — stock LEFT, price RIGHT, one row, FIXED height */ .hp-product-card__meta-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0.6rem !important; min-width: 0 !important; flex-wrap: nowrap !important; height: 2rem !important; /* fixed 32 px row so button below always aligns */ min-height: 2rem !important; max-height: 2rem !important; } /* Stock badge — pinned left, no ambiguity */ .hp-product-card__meta-row .hp-product-card__stock, .hp-product-card__footer .hp-product-card__stock { margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.72rem !important; line-height: 1 !important; padding: 0.32rem 0.6rem !important; border-radius: 999px !important; white-space: nowrap !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; } /* Price block — pinned right */ .hp-product-card__price-block { display: flex !important; flex-direction: column !important; align-items: flex-end !important; line-height: 1 !important; margin-left: auto !important; flex: 0 0 auto !important; text-align: right !important; } .hp-product-card__price-block .hp-product-card__price-old { font-size: 0.72rem !important; color: #8a7a5f !important; text-decoration: line-through !important; line-height: 1 !important; margin: 0 0 2px !important; display: block !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.25rem !important; /* 20 px desktop — visible not dominant */ font-weight: 700 !important; line-height: 1 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.005em !important; display: inline-block !important; } /* Zone 4: button row — FIXED height, full width inside content, comfortable padding */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--primary, .hp-product-card__footer .hp-btn--outline, .hp-product-card__footer .hp-btn--sm, .hp-product-card__footer .hp-btn--block { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; height: 2.35rem !important; /* 37.6 px — comfortable, not huge */ min-height: 2.35rem !important; max-height: 2.35rem !important; padding: 0 1rem !important; font-size: 0.86rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; border-radius: 8px !important; text-align: center !important; } /* Mobile: everything scales down but the alignment invariants stay */ @media (max-width: 640px) { .hp-product-card__body { padding: 0.7rem 0.75rem 0.8rem !important; } .hp-product-card__title { font-size: 0.85rem !important; line-height: 1.28 !important; min-height: 2.55em !important; max-height: 2.55em !important; margin: 0 0 0.6rem !important; } .hp-product-card__meta-row { height: 1.85rem !important; min-height: 1.85rem !important; max-height: 1.85rem !important; gap: 0.4rem !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.63rem !important; padding: 0.24rem 0.48rem !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.15rem !important; /* 18.4 px mobile */ } .hp-product-card__footer .hp-btn { height: 2.15rem !important; font-size: 0.82rem !important; padding: 0 0.8rem !important; } } /* ========================================================================== /* ========================================================================== /* ========================================================================== * PHASE 32C — VISIBLE TOP-SPACING + CARD BOTTOM + PHOTO AREA FIX * ==========================================================================*/ /* ==== TASK 1: KILL DEAD TOP SPACE ========================================= */ /* The category page sits inside a `.mx-auto.max-w-7xl.px-4.py-8` wrapper whose py-8 = 32 px top+bottom. That single rule contributes >50 % of the visible dead space. Trim it to py-3 = 12 px. */ .hp-main .mx-auto.max-w-7xl.py-8, main.hp-main .mx-auto.max-w-7xl.py-8, .hp-main > .mx-auto.max-w-7xl { padding-top: 0.35rem !important; /* 5.6 px — was 32 px */ padding-bottom: 1.25rem !important; } /* Also kill the 4 px padding on main + the 24 px breadcrumb / pt-6 container that sits between header and main content. */ main.hp-main, main.hp-main.flex-1 { padding-top: 0 !important; } .hp-app > .mx-auto.max-w-7xl.pt-6, .hp-app > div.mx-auto.max-w-7xl { padding-top: 0.6rem !important; padding-bottom: 0 !important; } .hp-main .mx-auto.max-w-7xl.py-8 > div:first-child { padding-top: 0 !important; margin-top: 0 !important; } .hp-main .mx-auto.max-w-7xl.py-8 > .jshop, .hp-main .mx-auto.max-w-7xl.py-8 > .jshop.hp-category-page { padding-top: 0 !important; margin-top: 0 !important; } .hp-main { padding-top: 0 !important; } /* Trim category-page inner container spacing */ .hp-category-page { padding-top: 0 !important; } .hp-category-page .mb-6 { margin-bottom: 0.75rem !important; } /* H1 sits directly under menu without inner top padding */ .hp-category-page > .mb-6 { padding-top: 0 !important; } .hp-category-page h1 { margin-top: 0 !important; padding-top: 0 !important; } /* Intro block right beneath H1, no big gap */ .hp-cat-intro { margin-top: 0.5rem !important; } /* Grid starts close after intro / hero */ .hp-category-page .mb-6 + .jshop_list_category, .hp-category-page .mb-6 + .hp-section-hub, .hp-category-page .mb-6 + .jshop_list_product, .hp-category-page .mb-6 + .hp-product-grid { margin-top: 0.5rem !important; } /* ==== TASK 2: PRODUCT CARD BOTTOM — DESIGNED ROW ========================== */ .hp-product-card { display: flex !important; flex-direction: column !important; height: 100% !important; border: 1px solid rgba(210, 200, 178, 0.42) !important; border-radius: 12px !important; background: #ffffff !important; overflow: hidden !important; } .hp-product-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0.75rem 0.85rem 0.85rem !important; gap: 0 !important; min-height: 0 !important; } .hp-product-card__eyebrow, .hp-product-card__compat { display: none !important; } /* Title — FIXED 2-line clamp, margin below acts as separator */ .hp-product-card__title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; min-height: 2.55em !important; max-height: 2.55em !important; font-size: 0.875rem !important; line-height: 1.28 !important; font-weight: 600 !important; color: #1a1a1a !important; margin: 0 0 0.55rem !important; flex: 0 0 auto !important; } /* Footer — column, pinned to bottom, DESIGNED gap between meta-row and button */ .hp-product-card__footer { display: flex !important; flex-direction: column !important; margin-top: auto !important; padding: 0 !important; gap: 0.6rem !important; /* ~10 px between meta-row and button */ border-top: 0 !important; } /* Meta row — stock LEFT, price RIGHT, BASELINE aligned, fixed height */ .hp-product-card__meta-row { display: flex !important; flex-direction: row !important; align-items: baseline !important; /* baseline align stock badge text + price */ justify-content: space-between !important; gap: 0.6rem !important; min-width: 0 !important; flex-wrap: nowrap !important; height: auto !important; min-height: 1.8rem !important; max-height: 1.8rem !important; } /* Stock chip on LEFT — smaller, calmer */ .hp-product-card__meta-row .hp-product-card__stock, .hp-product-card__footer .hp-product-card__stock { margin: 0 !important; padding: 0 !important; flex: 0 1 auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.7rem !important; /* 11.2 px — calmer */ line-height: 1 !important; padding: 0.3rem 0.55rem !important; border-radius: 999px !important; white-space: nowrap !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 0.35rem !important; background: #e6f4ec !important; /* soft green chip — designed */ color: #1b6a3d !important; border: 1px solid rgba(27, 106, 61, 0.15) !important; } /* Price on RIGHT — 18-20 px, calm */ .hp-product-card__price-block { display: flex !important; flex-direction: column !important; align-items: flex-end !important; line-height: 1 !important; margin-left: auto !important; flex: 0 0 auto !important; text-align: right !important; } .hp-product-card__price-block .hp-product-card__price-old { font-size: 0.72rem !important; color: #8a7a5f !important; text-decoration: line-through !important; line-height: 1 !important; margin: 0 0 2px !important; display: block !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.15rem !important; /* 18.4 px — visible not dominant */ font-weight: 700 !important; line-height: 1 !important; color: #1a1a1a !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; letter-spacing: -0.005em !important; display: inline-block !important; } /* Button — comfortable 42-44 px height, full-width in content */ .hp-product-card__footer .hp-btn, .hp-product-card__footer .hp-btn--primary, .hp-product-card__footer .hp-btn--outline, .hp-product-card__footer .hp-btn--sm, .hp-product-card__footer .hp-btn--block { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.4rem !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; height: 2.65rem !important; /* 42.4 px */ min-height: 2.65rem !important; max-height: 2.65rem !important; padding: 0 1rem !important; font-size: 0.86rem !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; border-radius: 8px !important; text-align: center !important; } /* Mobile — mirror the invariants but scale down */ @media (max-width: 640px) { .hp-main .mx-auto.max-w-7xl.py-8 { padding-top: 0.5rem !important; padding-bottom: 1rem !important; } .hp-category-page .mb-6 { margin-bottom: 0.6rem !important; } .hp-product-card__body { padding: 0.65rem 0.7rem 0.75rem !important; } .hp-product-card__title { font-size: 0.83rem !important; line-height: 1.25 !important; min-height: 2.5em !important; max-height: 2.5em !important; margin: 0 0 0.45rem !important; } .hp-product-card__meta-row { min-height: 1.7rem !important; max-height: 1.7rem !important; gap: 0.35rem !important; } .hp-product-card__meta-row .hp-stock-badge { font-size: 0.63rem !important; padding: 0.24rem 0.45rem !important; } .hp-product-card__price-block .hp-product-card__price, .hp-product-card__footer .hp-product-card__price { font-size: 1.05rem !important; /* 16.8 px mobile */ } .hp-product-card__footer .hp-btn { height: 2.35rem !important; font-size: 0.82rem !important; padding: 0 0.8rem !important; } } /* ==== TASK 3: FLAT PHOTO AREA — NO INNER FRAME =========================== */ .hp-product-card__image-wrap, a.hp-product-card__image-wrap { aspect-ratio: 1 / 1 !important; background: #ffffff !important; /* flat white — no gradient */ border: 0 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.22) !important; padding: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; box-shadow: none !important; } .hp-product-card__image { width: 100% !important; height: 100% !important; padding: 10% !important; /* comfortable breathing room, keeps product visible */ object-fit: contain !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Home featured grid + diag hub — same clean flat surface */ .hp-home-featured-grid .hp-product-card__image-wrap, .hp-diag-hub__product-image-wrap { background: #ffffff !important; border: 0 !important; border-bottom: 1px solid rgba(210, 200, 178, 0.22) !important; } /* ───────────────────────────────────────────────────────────── * Phase 33 FIX3 — required attribute pill UI * Wired by template.js hpBuildPills(): each .hp-attr-block gets a *
appended next to the native , * clean cart summary, delivery-first checkout skeleton * ───────────────────────────────────────────────────────────── */ /* Force-hide the native