/* ══ CosClub tenant theme layer ═══════════════════════════════════════════════ Loaded last by ui_head() (see _ui.php) and deliberately NOT part of the template package, so everything here survives a template redeploy. Put store-specific overrides in this file, never in storefront.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Sale price clipped off the edge of the product card ────────────────── While a sale campaign is live the card prints TWO figures in one column: $14.99$11.99 .was-price is inline, so the pair sits on a single line. .member-val runs at 20px in the heading font and a four-up card leaves each .p-col roughly 65px of content box, so the second figure — the price the shopper actually pays — was pushed past the card edge and clipped by .product-card{overflow:hidden}. Medicube Dual Toner Pad 2.0 rendered as a struck-through $14.99 with the real $11.99 nowhere on screen. Stacking the pre-sale figure ABOVE the live one keeps a column exactly one price wide, sale or no sale, so it cannot overflow however narrow the card gets. min-width:0 is the belt and braces: a flex item otherwise refuses to shrink below its own content, which is what turned a too-wide column into an overflow rather than a wrap. Applies to every grid that uses this markup — Shop All (shop/index.php) and the homepage / category grids (cc_card in _cats.php). ───────────────────────────────────────────────────────────────────────── */ .pricing-block{min-width:0;} .p-col{min-width:0;} .retail-val, .member-val, .single-price{display:block;min-width:0;overflow-wrap:break-word;} .was-price{ display:block; margin:0 0 1px; font-size:11px; line-height:1.25; letter-spacing:0; } /* Phones drop the grid to two-up, which produces the narrowest cards on the site. Trim the live figure and the column gutters to match. */ @media(max-width:700px){ .member-val, .single-price{font-size:17px;} .p-col.member{padding-left:8px;} .p-col.retail{padding-right:8px;} } /* ── Registered entity and address in the footer ────────────────────────── ui_legal_identity() now prints the trading statement and postal address above the copyright line. The site previously showed neither, on any page. Give the entity line its own row and a slightly quieter weight than the copyright so the bar still reads as one small block rather than two competing lines. ───────────────────────────────────────────────────────────────────────── */ .footer-legal{ display:block; margin-bottom:5px; opacity:.85; } @media(max-width:560px){ .footer-bottom{line-height:1.7;} } /* ══ NAVIGATION ══════════════════════════════════════════════════════════════ Markup lives in ui_head() / ui_nav_shop_menu() in _ui.php. The styling sits here rather than in storefront.css only because this file survives a template redeploy; if the template is ever redeployed the nav markup reverts and these rules become harmless dead CSS, which is the gentler failure of the two. ── WHAT THIS REPLACED ───────────────────────────────────────────────────── Four links: Shop All, New In, Categories, Membership. Two of them were homepage anchors rather than destinations — /#new and /#categories — so "Categories" from any other page threw you to the homepage and scrolled you to a row of circles. It read as lackluster because it was a bookmark, not a menu. Meanwhile the real category pages (/category/skincare and friends), the product-type taxonomy, and the whole /brands directory were unreachable from the header. Worse, storefront.css hid .nav-links entirely below 640px and nothing replaced it, so on a phone the header was a logo and three icons: no browse path at all, on the device most of this store's traffic arrives from. ── THE BREAKPOINT ───────────────────────────────────────────────────────── 860px, not the 640px storefront.css used. Four links plus a dropdown plus four icons plus the Join pill stops fitting well before 640. Below it the same markup becomes an off-canvas drawer — one DOM, two presentations, so there is no second copy of the menu to keep in step. This file loads after storefront.css, so the display:flex below wins over that file's `@media(max-width:640px){.nav-links{display:none}}` on equal specificity by order alone. Do not "fix" that by adding !important. ═══════════════════════════════════════════════════════════════════════════ */ /* Skip link — first focusable thing on the page, visible only when focused. Part of closing F26: the nav icons were unreachable by keyboard and there was no way past the header at all. */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:500; background:var(--club-900);color:#fff; padding:11px 20px;border-radius:0 0 10px 0; font-family:var(--body-font);font-weight:700;font-size:14px; } .skip-link:focus{left:0;} /* The search and bag controls are real