/** * Global Product Card — single source of truth. * * This is the OPSIM product card identity, promoted from what used to be the * "Featured Products 1" (.fp-style-minimal) treatment. Every place a product is * rendered goes through template-parts/product/product-card.php and is styled * here — Featured Products 1/2/3, the shop archive, category archives, filtered * (AJAX) results, recommended/related products, and any other WooCommerce loop * via woocommerce/content-product.php. * * Do NOT restyle .fp-product-card from a section stylesheet. Sections own their * heading, padding and column count; the card itself is owned here. * * Enqueued globally as `opsim-product-card` in inc/performance/assets.php. */ .fp-product-card { /* Component tokens — override on a section only for a deliberate variant. */ --pc-ink: #1a1a1a; --pc-muted: #776f67; /* 4.9:1 on white, 4.5:1 on #f5f5f5 (WCAG AA); was #8a8279, 3.8:1. */ --pc-ground: #f6f3f0; --pc-img-border: rgba(26, 26, 26, 0.09); /* The storefront master radius. This card image is the visual reference the global system was derived from; it now consumes the token so the card and the rest of the store can never drift apart. */ --pc-radius: var(--opsim-radius); --pc-atc-size: clamp(32px, 2.5vw, 36px); display: flex; flex-direction: column; /* Natural content height — never a forced card height. */ height: auto; min-height: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; } /* ── Image ───────────────────────────────────────────────────────────── * The wrapper is the positioning context for the add-to-cart control, so the * button is anchored to the image and not to the whole card. */ .product-image-wrapper { position: relative; } .fp-product-image-link { display: flex; align-items: center; justify-content: center; position: relative; aspect-ratio: var(--fp-img-ratio, 1 / 1); overflow: hidden; background-color: var(--pc-ground); border: 1px solid var(--pc-img-border); border-radius: var(--pc-radius); } .fp-product-image-link img, .fp-product-image-link .opsim-product-img { width: 100%; height: 100%; object-fit: var(--fp-img-fit, cover); display: block; image-rendering: -webkit-optimize-contrast; transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* Second gallery image, cross-faded on hover. */ .fp-product-image-link .opsim-hover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 1; } .fp-product-card:hover .fp-product-image-link.has-hover-image .opsim-primary-img { opacity: 0; transform: scale(1.025); } .fp-product-card:hover .fp-product-image-link.has-hover-image .opsim-hover-img { opacity: 1; transform: scale(1.025); } /* ── Natural (un-cropped) ratio ──────────────────────────────────────── * * Selected by Customizer → WooCommerce → Product Images → Product Image * Ratio. `OPSIM\Helpers\ProductImage\body_class()` puts .has-natural-ratio on * , so these descendant selectors reach every product card on the page * whatever rendered it. They used to be paired with * `.fp-product-card.has-natural-ratio` variants for a class that was only ever * printed on the Featured Products section wrapper — the card itself never * carried it, so those never matched and are gone. * * There is no fixed pixel width anywhere here: the frame drops its * aspect-ratio and the image keeps its own proportions under a max-height, so * the card stays fluid at every breakpoint. */ .has-natural-ratio .fp-product-image-link { aspect-ratio: auto; min-height: 180px; } .has-natural-ratio .fp-product-image-link img, .has-natural-ratio .fp-product-image-link .opsim-product-img { height: auto; max-height: 400px; object-fit: contain; } .has-natural-ratio .fp-product-image-link .opsim-hover-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; max-height: 400px; object-fit: contain; } .has-natural-ratio .fp-product-card:hover .fp-product-image-link.has-hover-image .opsim-hover-img { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } .fp-discount-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255, 255, 255, 0.92); color: var(--fp-accent, var(--opsim-brand)); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; padding: 5px 10px; border-radius: 0; } /* ── Type ────────────────────────────────────────────────────────────── * flex-grow lets leftover row height collect BELOW the price, so the price * always sits directly under the title and buttons stay aligned across a row. */ .fp-product-info { padding: clamp(10px, 1.2vw, 18px) 4px 0; display: flex; flex-direction: column; justify-content: flex-start; flex-grow: 1; /* Title and price follow the reading direction, flush with the image edge. * `start` (not `left`) so RTL mirrors automatically. */ text-align: start; } .fp-product-title { font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-ink); line-height: 1.35; /* No fixed height: a one-line name must not reserve two lines. Long names * are still capped at two lines by the clamp below. */ height: auto; min-height: 0; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fp-product-title a { color: inherit; text-decoration: none; } .fp-product-price { display: flex; /* Flush with the title, not centred. flex-start is direction-relative, so * RTL flips it without a separate rule. baseline keeps the struck-through * old price sitting on the same line as the sale price. */ justify-content: flex-start; align-items: baseline; gap: 6px; margin-top: clamp(6px, 0.95vw, 11px); margin-bottom: 0; } .fp-price-new { color: var(--pc-ink); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; } /* Brand colour earns its place only when there is a genuine reduction. */ .fp-product-card:has(.fp-price-old) .fp-price-new { color: var(--fp-accent, var(--opsim-brand)); } .fp-price-old { color: var(--pc-muted); text-decoration: line-through; font-size: 12px; } /* ── Inline discount badge ───────────────────────────────────────────── * Sits directly after .fp-price-new in the same baseline-aligned flex row, * so it needs no positioning of its own to line up with the price digits. * * Deliberately quiet. This appears on every discounted card in a grid, and a * loud percentage is the fastest way to make a jewellery catalogue read like a * clearance rail. It borrows the corner badge's exact vocabulary — square * edge, 500 weight, wide letter-spacing, brand ink — so the two read as one * system rather than two competing labels. * * No transition and no :hover: the card already animates its image and its * add-to-cart control, and a third moving element on hover is noise. */ .fp-price-discount { color: var(--fp-accent, var(--opsim-brand)); background: rgba(var(--opsim-brand-rgb), 0.07); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; /* line-height 1 keeps the padded box tight to the glyphs, so the badge stays shorter than the price beside it. */ line-height: 1; padding: 3px 5px; border-radius: 0; /* "89% OFF" must never wrap to a second line and grow the card. */ white-space: nowrap; } .fp-price-currency { font-size: 11px; font-weight: 400; margin-left: 1px; } /* ── Add to cart: small circular action inside the image ──────────────── * .fp-atc-circle opts this control out of the shared button contract in * assets/css/base.css (whose background/border/radius/shadow/transition are * !important), which is what lets the styling below stay plain CSS. */ .fp-atc-btn { position: absolute; /* Logical property: bottom-right in LTR, bottom-left in RTL. */ inset-inline-end: clamp(7px, 0.8vw, 11px); bottom: clamp(7px, 0.8vw, 11px); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--pc-atc-size); height: var(--pc-atc-size); min-height: 0; padding: 0; margin: 0; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--fp-accent, var(--opsim-brand)); color: #fff; box-shadow: none; transition: none; cursor: pointer; text-decoration: none; -webkit-appearance: none; appearance: none; } .fp-atc-btn svg { width: calc(var(--pc-atc-size) * 0.45); height: calc(var(--pc-atc-size) * 0.45); margin: 0; flex-shrink: 0; fill: currentColor; display: inline-block; } /* Label stays in the accessibility tree but is not painted — an icon-only * control must still announce itself. */ .fp-atc-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .fp-atc-btn:focus-visible { outline: 2px solid var(--pc-ink); outline-offset: 3px; } .fp-atc-btn.out-of-stock { background: #ccc; cursor: not-allowed; opacity: 0.7; } .fp-atc-btn.is-loading { color: transparent; pointer-events: none; } .fp-atc-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: button-spin 0.6s linear infinite; } @keyframes button-spin { to { transform: rotate(360deg); } } /* ── Shared grid rhythm ──────────────────────────────────────────────── * Column COUNT stays with each section (they legitimately differ); the gap is * part of the card identity so it is defined once, here. */ .products-grid, .shop-products-grid { gap: clamp(18px, 2.4vw, 32px) clamp(10px, 1.6vw, 24px); } @media (max-width: 767px) { .fp-product-card { --pc-atc-size: clamp(28px, 7.5vw, 32px); } .fp-product-info { padding-left: 2px; padding-right: 2px; } .fp-product-title { font-size: 11px; letter-spacing: 0.06em; } .fp-price-new { font-size: 12px; } .fp-price-old { font-size: 11px; } /* Two cards per row on a phone: the badge steps down with the prices so "1.900 Dhs 189 Dhs 89% OFF" still fits one line in a half-width card. */ .fp-price-discount { font-size: 9px; letter-spacing: 0.08em; padding: 2px 4px; } }