/* Theme Name: El Arabi Store Theme URI: https://elarabimedical.store Description: El Arabi Medical storefront — brand token set and component styling for elarabimedical.store. Child theme of Blocksy. Built RTL-first using CSS logical properties. Author: El Arabi Medical Version: 3.18.3 Template: blocksy Text Domain: elarabi-store */ /* ============================================================ 1. TOKENS Extracted from the El Arabi Medical identity: #B91456 (logo magenta) · #323449 (logo navy) · Poppins Deployment rule: ~90% neutral / 7% ink / 3% magenta. Magenta is a signal — CTA, sale, active state, focus ring. Never a background fill, never a body link, never a gradient. ============================================================ */ :root{ /* primary */ --p50:#FDF2F7; --p100:#FBE4EE; --p200:#F5C2D9; --p300:#EC8FB8; --p400:#DE5490; --p500:#C81E63; --p600:#B91456; --p700:#A61650; --p800:#8F1140; --p900:#6B0F33; /* neutrals */ --n0:#FFFFFF; --n25:#FCFCFD; --n50:#F6F7F9; --n100:#EEEFF3; --n200:#E4E5EC;--n300:#CDCFDA;--n400:#9EA7B8;--n500:#7C8095; --n600:#5F6177;--n700:#484A5F;--n800:#323449;--n900:#232433;--n950:#171822; /* semantic — error leans orange-red so it never reads as brand magenta */ --success:#147A4D; --success-bg:#E7F6EE; --warning:#B45309; --warning-bg:#FEF4E6; --error:#C93626; --error-dark:#A82A20; --error-bg:#FCEBE8; --info:#2E5AAC; --info-bg:#E9F0FA; --wa:#25D366; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px; /* Height of the sticky header. The brand ribbon pins directly under it, so the two must agree — change them together. */ --ea-headerh:76px; --sh-sm:0 1px 2px rgba(23,24,34,.06); --sh-md:0 8px 24px rgba(23,24,34,.10); --sh-lg:0 24px 48px rgba(23,24,34,.16); --dur-fast:120ms; --dur-base:200ms; --dur-slow:400ms; --ease:cubic-bezier(.2,0,0,1); --font-latin:'Poppins',system-ui,-apple-system,sans-serif; --font-arabic:'Cairo',system-ui,sans-serif; --font:var(--font-latin); /* --- map onto Blocksy's palette so core theme components inherit --- */ --theme-palette-color-1:#B91456; /* primary */ --theme-palette-color-2:#A61650; /* hover */ --theme-palette-color-3:#232433; /* headings */ --theme-palette-color-4:#5F6177; /* body */ --theme-palette-color-5:#E4E5EC; /* border */ --theme-palette-color-6:#F6F7F9; /* surface */ --theme-palette-color-7:#FFFFFF; --theme-palette-color-8:#323449; /* ink */ --theme-font-family:var(--font); --theme-text-color:var(--n600); --theme-headings-color:var(--n900); --theme-link-initial-color:var(--n800); --theme-link-hover-color:var(--p600); --theme-border-radius:var(--r-md); --theme-content-spacing:1.5em; --theme-button-border-radius:var(--r-full); --theme-button-background-initial-color:var(--p600); --theme-button-background-hover-color:var(--p700); --theme-button-text-initial-color:#fff; --theme-button-text-hover-color:#fff; } /* Arabic: swap family, kill tracking (connected script), give it air */ html[lang^="ar"], [dir="rtl"]{ --font:var(--font-arabic); } html[lang^="ar"] *, [dir="rtl"] *{ letter-spacing:0 !important; } html[lang^="ar"] body, [dir="rtl"] body{ line-height:1.8; } html[lang^="ar"] h1,html[lang^="ar"] h2,html[lang^="ar"] h3,html[lang^="ar"] h4, [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{ font-weight:700; line-height:1.4; } /* Arabic has no case — uppercase hierarchy must become weight */ html[lang^="ar"] .ea-eyebrow, html[lang^="ar"] .ea-badge, [dir="rtl"] .ea-eyebrow, [dir="rtl"] .ea-badge{ text-transform:none; font-weight:600; font-size:13px; } /* Browsers fake-slant Arabic and it looks broken */ html[lang^="ar"] em, html[lang^="ar"] i, [dir="rtl"] em, [dir="rtl"] i{ font-style:normal; font-weight:600; } /* ============================================================ 2. BASE ============================================================ */ body{ font-family:var(--font); color:var(--n600); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6{ font-family:var(--font); color:var(--n900); font-weight:600; letter-spacing:-.015em; } h1{ font-size:clamp(30px,4vw,40px); line-height:1.2; } h2{ font-size:clamp(26px,3.2vw,32px); line-height:1.25; } h3{ font-size:24px; } /* Retire pure black — it is half of why the old site reads harsh */ body, p, li, td{ color:var(--n600); } .ea-eyebrow{ font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--n500); } *:focus-visible{ outline:2px solid var(--p600); outline-offset:2px; border-radius:4px; } /* ============================================================ 3. BUTTONS — pill is the fastest "retail-modern" signal ============================================================ */ .wp-element-button, .wc-block-components-button, .button, button[type="submit"], input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{ font-family:var(--font); font-weight:500; letter-spacing:.01em; border-radius:var(--r-full) !important; min-height:48px; padding-inline:26px; transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base); } [dir="rtl"] .wp-element-button, [dir="rtl"] .button{ font-weight:600; } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt, .wc-block-components-button:not(.is-link){ background:var(--p600); color:#fff; border:0; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:not(.is-link):hover{ background:var(--p700); color:#fff; } .woocommerce a.button.alt:active, .woocommerce button.button.alt:active{ background:var(--p800); } /* ============================================================ 4. PRODUCT CARD Flat on white. No borders, no resting shadow. Image sits on a neutral tile. Add-to-cart is PERSISTENT — hover does not exist on the phones most of this traffic arrives on. ============================================================ */ .woocommerce ul.products li.product, .wc-block-grid__product, .wc-block-product-template .wc-block-product{ background:transparent; border:0; box-shadow:none; text-align:start; transition:transform var(--dur-base) var(--ease); } .woocommerce ul.products li.product:hover{ transform:translateY(-2px); } /* The tile belongs to the container, not the picture. Product images are background-free cut-outs (see the cutout pipeline in the project notes), so they float on the tile like a Framer product card: a soft pool of light behind, a low contact shadow under, and a small lift on hover. Anything that is still a white JPEG simply shows its white — it is not blended away, because multiply would also erase white packaging. */ .woocommerce ul.products li.product .ct-media-container, .woocommerce ul.products li.product a > img:only-child, .wc-block-grid__product-image, .wc-block-components-product-image{ display:block; position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--r-md); background: radial-gradient(78% 66% at 50% 42%, rgba(255,255,255,.72), rgba(255,255,255,0) 72%), linear-gradient(180deg, var(--n50) 0%, var(--n100) 100%); transition:box-shadow var(--dur-base), background-color var(--dur-base); } .woocommerce ul.products li.product a img, .wc-block-grid__product-image img, .wc-block-components-product-image img{ display:block; width:100%; height:100%; aspect-ratio:1; object-fit:contain; padding:7%; background:none; border-radius:0; box-shadow:none; filter:drop-shadow(0 14px 18px rgba(23,24,34,.13)) drop-shadow(0 2px 3px rgba(23,24,34,.06)); transform-origin:50% 62%; transition:transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); } .woocommerce ul.products li.product:hover .ct-media-container{ box-shadow:var(--sh-md); } .woocommerce ul.products li.product:hover a img{ transform:translateY(-6px) scale(1.045); filter:drop-shadow(0 26px 28px rgba(23,24,34,.16)) drop-shadow(0 3px 4px rgba(23,24,34,.06)); } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:15px; font-weight:500; color:var(--n800); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:44px; padding-top:6px; } .woocommerce ul.products li.product .price{ font-size:16px; font-weight:600; color:var(--n900); } .woocommerce ul.products li.product .price del{ color:var(--n600); font-weight:400; font-size:14px; opacity:1; } .woocommerce ul.products li.product .price ins{ color:var(--p600); text-decoration:none; font-weight:600; } .woocommerce ul.products li.product .button{ width:100%; min-height:40px; font-size:14px; background:transparent; color:var(--n800); border:1.5px solid var(--n200); } .woocommerce ul.products li.product .button:hover{ background:var(--p600); border-color:var(--p600); color:#fff; } /* Sale badge — show the number, not the word */ .woocommerce span.onsale{ background:var(--p600); color:#fff; border-radius:var(--r-full); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; min-height:0; min-width:0; line-height:1.5; inset-inline-start:10px; inset-block-start:10px; inset-inline-end:auto; margin:0; } [dir="rtl"] .woocommerce span.onsale{ text-transform:none; letter-spacing:0; } /* ============================================================ 5. PRODUCT PAGE ============================================================ */ .woocommerce div.product .product_title{ font-size:clamp(26px,3.4vw,38px); line-height:1.22; color:var(--n900); } .woocommerce div.product p.price, .woocommerce div.product span.price{ font-size:30px; font-weight:600; color:var(--n900); letter-spacing:-.01em; } .woocommerce div.product p.price ins{ color:var(--p600); text-decoration:none; } .woocommerce div.product p.price del{ font-size:18px; color:var(--n600); font-weight:400; } .woocommerce div.product .woocommerce-product-gallery__image img{ background:var(--n50); border-radius:var(--r-lg); padding:2%; } /* Gallery: thumbnails in a column to the left of the main image. Blocksy's flexy slider already drives its thumbnail strip from --pills-direction / --thumbs-width, so this only re-points those and re-orders the two children — no markup override, nothing to re-do when Blocksy updates. Below 1000px the strip goes back under the image, where a narrow screen has the width to spare. */ @media (min-width:1000px){ .single-product .woocommerce-product-gallery .flexy-container{ display:flex; align-items:flex-start; gap:16px; } .single-product .woocommerce-product-gallery .flexy{ order:2; flex:1 1 auto; min-width:0; } .single-product .woocommerce-product-gallery .flexy-pills{ order:1; flex:0 0 88px; width:88px; margin-block-start:0; --pills-direction:column; --thumbs-width:100%; --pills-wrap:nowrap; } .single-product .woocommerce-product-gallery .flexy-pills ol{ gap:var(--thumbs-spacing,12px); } /* Fallback for WooCommerce's own flexslider markup, in case the Blocksy gallery is ever switched off in the Customizer. */ .single-product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4{ display:flex; align-items:flex-start; gap:16px; } .single-product .woocommerce-product-gallery .flex-viewport{ order:2; flex:1 1 auto; min-width:0; } .single-product .woocommerce-product-gallery .flex-control-thumbs{ order:1; flex:0 0 88px; width:88px; display:flex; flex-direction:column; gap:12px; margin:0; padding:0; } .single-product .woocommerce-product-gallery .flex-control-thumbs li{ width:100%; margin:0; } } /* The main gallery image is never cropped. Blocksy frames it to a portrait ratio by default, which sliced the brand badge off the bottom-left corner of the Nina on-ear photographs. Every product image on this store is square by construction, so forcing 1:1 and object-fit:contain shows the whole frame with nothing letterboxed. */ .single-product .woocommerce-product-gallery .flexy-item, .single-product .woocommerce-product-gallery .flexy-item > *, .single-product .woocommerce-product-gallery .ct-media-container, .single-product .woocommerce-product-gallery__image{ --ratio:1/1; aspect-ratio:1; height:auto; } .single-product .woocommerce-product-gallery .flexy-item img, .single-product .woocommerce-product-gallery .ct-media-container img, .single-product .woocommerce-product-gallery__image img{ width:100%; height:100%; object-fit:contain; object-position:center; } /* Thumbnails carry the same tile as the product card, so a cut-out on transparency does not sit on bare white next to a grey main image. */ .single-product .woocommerce-product-gallery .flexy-pills img, .single-product .woocommerce-product-gallery .flex-control-thumbs img{ aspect-ratio:1; object-fit:contain; padding:6%; background:linear-gradient(180deg,var(--n50) 0%,var(--n100) 100%); border-radius:var(--r-md); border:1px solid transparent; transition:border-color .18s ease, opacity .18s ease; } .single-product .woocommerce-product-gallery .flexy-pills li.active img, .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{ border-color:var(--n300); } .woocommerce div.product form.cart div.quantity{ border:1.5px solid var(--n200); border-radius:var(--r-full); overflow:hidden; min-height:48px; } .woocommerce div.product .stock.in-stock{ color:var(--success); font-weight:500; } .woocommerce div.product .stock.out-of-stock{ color:var(--error-dark); font-weight:500; } /* Trust block beside the price — the actual objection for a 1,925 EGP device */ .ea-assurance{ border:1px solid var(--n200); border-radius:var(--r-md); margin-block-start:26px; overflow:hidden; } .ea-assurance__row{ display:flex; align-items:flex-start; gap:13px; padding:15px 18px; border-block-start:1px solid var(--n200); font-size:14px; } .ea-assurance__row:first-child{ border-block-start:0; } .ea-assurance__row b{ display:block; color:var(--n800); font-weight:500; font-size:14.5px; } .ea-assurance__row span{ font-size:13px; color:var(--n500); } .ea-assurance__icon{ color:var(--n700); flex:none; margin-block-start:2px; } /* ============================================================ 6. NOTICES — semantic, never brand magenta ============================================================ */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ border-radius:var(--r-md); border:0; border-inline-start:3px solid; padding:16px 20px; font-size:14.5px; } .woocommerce-message{ background:var(--success-bg); border-color:var(--success); color:var(--success); } .woocommerce-info{ background:var(--info-bg); border-color:var(--info); color:var(--info); } .woocommerce-error{ background:var(--error-bg); border-color:var(--error); color:var(--error-dark); } /* ============================================================ 7. TRUST BAR + WHATSAPP (markup injected in functions.php) ============================================================ */ .ea-trustbar{ background:var(--n900); color:#fff; font-size:12.5px; font-weight:500; } .ea-trustbar__inner{ max-width:1280px; margin-inline:auto; padding:0 24px; height:40px; display:flex; align-items:center; justify-content:center; gap:28px; overflow:hidden; white-space:nowrap; } .ea-trustbar__item{ display:flex; align-items:center; gap:8px; opacity:.92; } .ea-trustbar__dot{ width:4px; height:4px; border-radius:50%; background:var(--p600); flex:none; } .ea-wa{ position:fixed; inset-block-end:24px; inset-inline-end:24px; width:56px; height:56px; border-radius:var(--r-full); background:var(--wa); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-md); z-index:999; transition:transform var(--dur-fast); } .ea-wa:hover{ transform:scale(1.06); color:#fff; } @media(max-width:640px){ .ea-trustbar__inner{ gap:16px; font-size:11.5px; padding-inline:16px; } .ea-wa{ width:52px; height:52px; inset-block-end:16px; inset-inline-end:16px; } } /* ============================================================ 8. MOTION — calm. No parallax, no autoplay, no scroll-jacking. ============================================================ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .woocommerce ul.products li.product:hover{ transform:none; } .woocommerce ul.products li.product:hover a img{ transform:none; } .woocommerce ul.products li.product a img{ transition:none; } } /* ============================================================ 9. SITE CHROME — custom header/footer replace Blocksy's ============================================================ */ header.ct-header, footer.ct-footer, #header.ct-header, #footer.ct-footer{ display:none !important; } /* NB: Blocksy puts data-header/data-footer on — never select those bare. */ .ea-wrap{ max-width:1280px; margin-inline:auto; padding-inline:32px; } @media(max-width:640px){ .ea-wrap{ padding-inline:20px; } } /* logo lockup */ .ea-logo{ display:flex; align-items:center; gap:10px; flex:none; } .ea-logo .ea-mark{ width:42px; height:26px; } .ea-logo__wm{ line-height:1; letter-spacing:.02em; } .ea-logo__wm b, .ea-logo__wm em{ display:block; font-size:14px; font-weight:600; font-style:normal; } .ea-logo__wm b{ color:var(--n800); } .ea-logo__wm em{ color:var(--p600); } .ea-logo--reversed .ea-logo__wm b, .ea-logo--reversed .ea-logo__wm em{ color:#fff; } [dir="rtl"] .ea-logo__wm{ letter-spacing:0; } /* The lockup does not mirror on the Arabic site. Everything else in the header flips, and should — but this is a fixed brand asset with a Latin wordmark, not a line of running text. RTL was reversing the flex row and putting the EM monogram to the right of "ELARABI MEDICAL", which is not how the mark is drawn anywhere else it appears: the letterhead, the Nina photography badge, the PiC page hero. Forcing LTR on the anchor alone keeps the mark left and the words right while the header around it stays mirrored. Applies to the header and the reversed footer copy. */ [dir="rtl"] .ea-logo, html[lang^="ar"] .ea-logo{ direction:ltr; } /* header */ .ea-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.93); backdrop-filter:blur(12px); box-shadow:var(--sh-sm); } .ea-header__inner{ max-width:1280px; margin-inline:auto; padding-inline:32px; height:76px; display:flex; align-items:center; gap:24px; } .ea-nav{ display:flex; gap:24px; margin-inline-start:14px; } .ea-nav a{ font-size:15px; font-weight:500; color:var(--n700); white-space:nowrap; transition:color var(--dur-fast); } .ea-nav a:hover{ color:var(--p600); } .ea-search{ flex:1; max-width:340px; display:flex; align-items:center; gap:10px; background:var(--n50); border:1px solid var(--n200); border-radius:var(--r-full); height:44px; padding-inline:16px; } .ea-search input{ border:0; background:none; outline:none; font-family:inherit; font-size:14.5px; color:var(--n800); width:100%; } .ea-search input::placeholder{ color:var(--n400); } .ea-header__actions{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; } .ea-iconbtn{ width:42px; height:42px; border-radius:var(--r-full); display:grid; place-items:center; color:var(--n700); position:relative; transition:background var(--dur-fast); } .ea-iconbtn:hover{ background:var(--n100); color:var(--p600); } .ea-cartdot{ position:absolute; inset-block-start:5px; inset-inline-end:5px; min-width:17px; height:17px; border-radius:var(--r-full); background:var(--p600); color:#fff; font-size:10.5px; font-weight:600; display:grid; place-items:center; padding-inline:4px; } /* Always in the markup so the AJAX add-to-cart fragment has an element to replace; hidden, not omitted, when the basket is empty. */ .ea-cartdot.is-empty{ display:none; } /* "Added to your basket" confirmation. Fixed above everything that sticks — the header is z-index 100 and the brand ribbon 90. Logical properties only: it sits at the inline end, which is the right on /en/ and the left on /ar/. */ .ea-toast{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:1200; display:flex; align-items:center; gap:14px; padding-block:12px; padding-inline:18px 16px; background:var(--n800, #22242f); color:#fff; font-size:14px; font-weight:500; border-radius:var(--r-md, 12px); box-shadow:var(--sh-md); max-inline-size:calc(100vw - 32px); opacity:0; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease; pointer-events:none; } .ea-toast.is-in{ opacity:1; transform:none; pointer-events:auto; } .ea-toast__link{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; } .ea-toast__link:hover{ color:#fff; opacity:.85; } @media (max-width:560px){ .ea-toast{ inset-inline:16px; inset-block-end:16px; justify-content:space-between; } } @media (prefers-reduced-motion:reduce){ .ea-toast{ transition:none; transform:none; } } @media(max-width:1080px){ .ea-nav, .ea-search{ display:none; } } /* buttons used in custom chrome */ .ea-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px; padding-inline:26px; border-radius:var(--r-full); font-size:16px; font-weight:500; transition:background var(--dur-base), color var(--dur-base), border-color var(--dur-base); } .ea-btn--primary{ background:var(--p600); color:#fff; } .ea-btn--primary:hover{ background:var(--p700); color:#fff; } .ea-btn--ghost{ border:1.5px solid var(--n300); color:var(--n800); } .ea-btn--ghost:hover{ border-color:var(--n800); background:var(--n50); } .ea-btn--white{ background:#fff; color:var(--p900); font-weight:600; } /* ============================================================ 10. HOME PAGE ============================================================ */ .ea-display{ font-size:clamp(34px,5vw,56px); line-height:1.14; letter-spacing:-.02em; color:var(--n900); } [dir="rtl"] .ea-display{ line-height:1.35; } .ea-lede{ font-size:18px; line-height:1.6; color:var(--n600); } .ea-hero{ padding-block:clamp(40px,6vw,84px) clamp(40px,5vw,72px); } .ea-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .ea-hero__copy{ max-width:540px; } .ea-hero__copy .ea-display{ margin-block:14px 18px; } .ea-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; } .ea-hero__media{ position:relative; aspect-ratio:1/.92; background:radial-gradient(78% 66% at 50% 42%, rgba(255,255,255,.72), rgba(255,255,255,0) 72%), linear-gradient(180deg, var(--n50), var(--n100)); border-radius:var(--r-lg); display:grid; place-items:center; overflow:hidden; } .ea-hero__media::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 45%, rgba(185,20,86,.055), transparent 70%); } .ea-hero__media img{ width:74%; height:auto; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 26px 40px rgba(23,24,34,.16)); background:none; padding:0; } .ea-hero__tag{ position:absolute; inset-block-end:18px; inset-inline-start:18px; z-index:2; background:#fff; border-radius:var(--r-full); padding:8px 16px 8px 10px; display:flex; align-items:center; gap:10px; box-shadow:var(--sh-md); font-size:13px; font-weight:500; color:var(--n800); max-width:calc(100% - 36px); } .ea-hero__tag b{ background:var(--success-bg); color:var(--success); border-radius:var(--r-full); font-size:11px; padding:3px 9px; font-weight:600; } .ea-hero__tag .amount, .ea-hero__tag bdi{ font-weight:600; } .ea-steps{ border-block:1px solid var(--n200); padding-block:30px 0; } .ea-steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); } .ea-step{ padding:24px 26px 34px; border-inline-start:1px solid var(--n200); } .ea-step:first-child{ border:0; padding-inline-start:0; } .ea-step__n{ font-size:40px; font-weight:600; color:var(--n900); letter-spacing:-.02em; line-height:1; } .ea-step p{ font-size:13.5px; line-height:1.5; color:var(--n600); margin-top:10px; max-width:210px; } .ea-section{ padding-block:clamp(56px,7vw,96px); } .ea-section--grey{ background:var(--n50); } .ea-section--tight{ padding-block:0 clamp(56px,7vw,96px); } .ea-sechead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; } .ea-sechead h2{ margin-top:6px; } .ea-sechead__sub{ margin-top:10px; max-width:520px; font-size:16.5px; } .ea-more{ font-size:15px; font-weight:500; color:var(--n800); border-bottom:1.5px solid var(--n300); padding-bottom:2px; white-space:nowrap; } .ea-more:hover{ color:var(--p600); border-color:var(--p600); } .ea-cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .ea-cat{ background:#fff; border-radius:var(--r-md); padding:22px 16px; text-align:center; transition:transform var(--dur-base), box-shadow var(--dur-base); } .ea-cat:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); } .ea-cat__ic{ width:44px; height:44px; margin:0 auto 12px; border-radius:var(--r-full); background:var(--p50); display:grid; place-items:center; color:var(--p600); } .ea-cat b{ display:block; font-size:13.5px; font-weight:500; color:var(--n800); line-height:1.35; } .ea-cat__n{ font-size:12px; color:var(--n500); } .ea-brands{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--n200); border-radius:var(--r-lg); overflow:hidden; background:#fff; } .ea-brands div{ padding:30px 20px; text-align:center; border-inline-start:1px solid var(--n200); } .ea-brands div:first-child{ border:0; } .ea-brands b{ display:block; font-size:19px; font-weight:600; color:var(--n800); letter-spacing:-.01em; } .ea-brands span{ font-size:12.5px; color:var(--n500); } .ea-split{ display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-lg); overflow:hidden; } .ea-pane{ padding:clamp(34px,4.4vw,60px); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; } .ea-pane--ink{ background:var(--n900); } .ea-pane--maroon{ background:var(--p900); } .ea-pane h2{ color:#fff; position:relative; } .ea-pane p{ color:rgba(255,255,255,.8); margin-top:16px; max-width:400px; font-size:16px; position:relative; } .ea-kicker{ font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:auto; position:relative; } [dir="rtl"] .ea-kicker{ text-transform:none; letter-spacing:0; } .ea-split--solo{ grid-template-columns:1fr; } .ea-pane--center{ align-items:center; justify-content:center; text-align:center; min-height:300px; } .ea-pane--center .ea-kicker{ margin-bottom:14px; } .ea-pane--center p{ margin-inline:auto; max-width:560px; } .ea-pane--center h2{ max-width:640px; } .ea-pane__mark{ position:absolute; top:-30px; inset-inline-end:-50px; opacity:.07; width:290px; height:auto; } .ea-pane h2 .amount, .ea-pane h2 bdi{ color:#fff; } .ea-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; } .ea-why__ic{ width:46px; height:46px; border-radius:var(--r-full); background:var(--p50); color:var(--p600); display:grid; place-items:center; margin-bottom:16px; } .ea-why h4{ font-size:17px; margin-bottom:8px; } .ea-why p{ font-size:14.5px; line-height:1.6; } /* ── pre-footer band + footer ───────────────────────────── */ .ea-band{ background:var(--p900); color:#fff; position:relative; overflow:hidden; } .ea-band__mark{ position:absolute; top:-90px; inset-inline-end:-70px; width:430px; height:auto; opacity:.06; } .ea-band__inner{ max-width:1280px; margin-inline:auto; padding:64px 32px; position:relative; z-index:1; display:flex; align-items:center; gap:40px; justify-content:space-between; flex-wrap:wrap; } .ea-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); max-width:560px; } .ea-band p{ color:rgba(255,255,255,.78); margin-top:12px; max-width:520px; } .ea-footer{ background:var(--n950); color:rgba(255,255,255,.62); padding-top:64px; } .ea-footer__inner{ max-width:1280px; margin-inline:auto; padding-inline:32px; } .ea-footer__cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; } .ea-footer__about{ font-size:14.5px; max-width:320px; margin-top:18px; } .ea-footer h5{ color:#fff; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; } [dir="rtl"] .ea-footer h5{ text-transform:none; letter-spacing:0; font-size:15px; } .ea-footer ul{ list-style:none; margin:0; padding:0; } .ea-footer li{ margin-bottom:11px; font-size:14.5px; } .ea-footer a{ color:inherit; } .ea-footer a:hover{ color:#fff; } .ea-pay{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; } .ea-pay span{ border:1px solid rgba(255,255,255,.18); border-radius:6px; padding:6px 11px; font-size:11.5px; color:rgba(255,255,255,.72); } .ea-wordmark{ border-top:1px solid rgba(255,255,255,.1); padding-block:34px 26px; text-align:center; font-size:clamp(46px,12vw,150px); font-weight:600; letter-spacing:-.03em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16); user-select:none; } .ea-legal{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:34px; font-size:13px; } @media(max-width:1080px){ .ea-hero__grid, .ea-split{ grid-template-columns:1fr; gap:34px; } .ea-cats{ grid-template-columns:repeat(3,1fr); } .ea-why, .ea-brands, .ea-footer__cols{ grid-template-columns:repeat(2,1fr); } .ea-steps__grid{ grid-template-columns:repeat(2,1fr); } .ea-step{ border-inline-start:0; padding-inline:0; } .ea-brands div{ border-inline-start:0; border-top:1px solid var(--n200); } .ea-brands div:first-child, .ea-brands div:nth-child(2){ border-top:0; } } @media(max-width:640px){ :root{ --ea-headerh:66px; } .ea-cats{ grid-template-columns:repeat(2,1fr); } .ea-why, .ea-footer__cols{ grid-template-columns:1fr; } .ea-header__inner{ padding-inline:20px; height:66px; } .ea-band__inner, .ea-footer__inner{ padding-inline:20px; } } /* language switcher — text, never a flag: Arabic is a language, not a country */ .ea-lang{ display:inline-flex; align-items:center; height:36px; padding-inline:14px; border:1.5px solid var(--n200); border-radius:var(--r-full); font-size:13.5px; font-weight:500; color:var(--n700); margin-inline-end:6px; white-space:nowrap; transition:border-color var(--dur-fast), color var(--dur-fast); } .ea-lang:hover{ border-color:var(--p600); color:var(--p600); } @media(max-width:640px){ .ea-lang{ height:32px; padding-inline:11px; font-size:12.5px; } } /* ─── Shop by brand ───────────────────────────────────────────────────────── Three tiles, one of which leaves the site. The logos stay in full colour — greyscale-until-hover reads as "disabled" on the 65% of traffic that has no hover at all, and the brand colours are exactly the shelf recognition this module exists to borrow. They are contained on a neutral tile instead, the same way sixty full-colour packshots already are. Per-brand logo heights equalise optical mass: a 5.7:1 wordmark set to the same height as a circular mark becomes a billboard. */ .ea-brandrow__title{ font-size:clamp(22px,2.4vw,30px); line-height:1.2; letter-spacing:-.01em; margin:0 0 22px; } .ea-brandrow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .ea-brandcell{ display:contents; } /* The logo is the tile. It sits alone in the upper two thirds, centred, with the meta line and the call to action held quietly at the foot — so at rest the row reads as four marks, and the words only matter once you have chosen one. */ .ea-brandtile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-height:236px; padding:26px 22px 22px; border-radius:24px; background:var(--n50); text-decoration:none; color:var(--n800); } .ea-brandtile:focus-visible{ outline:2px solid var(--p600); outline-offset:4px; } .ea-brandtile__logo{ display:flex; align-items:center; justify-content:center; flex:1 1 auto; width:100%; min-height:96px; } .ea-brandtile__logo img{ width:auto; max-width:min(200px, 82%); object-fit:contain; } .ea-brandtile__meta{ font-size:14px; line-height:1.5; color:var(--n600); max-width:24ch; min-height:4.5em; /* three lines, so the four calls to action share a baseline */ display:flex; align-items:flex-end; justify-content:center; text-wrap:balance; } .ea-brandtile__cta{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--n800); } /* Logical-property mirroring: the chevron points "forward", which is left in Arabic. The external-link arrow mirrors too, so it never points back into the page it is taking you out of. */ [dir="rtl"] .ea-brandtile__icon{ transform:scaleX(-1); } .ea-brandrow__note{ margin:20px 0 0; font-size:13px; color:var(--n600); } /* Below 768 the tiles become full-width rows: four 90px squares would make the logos illegible and leave no room for the meta line — and the meta line is the only thing telling a shopper that the last tile leaves the site. */ @media (max-width:767.98px){ .ea-brandrow{ grid-template-columns:1fr; gap:12px; } .ea-brandtile{ flex-direction:row; align-items:center; text-align:start; gap:16px; min-height:88px; padding:14px 16px; border-radius:16px; } .ea-brandtile__logo{ flex:0 0 96px; width:96px; min-height:40px; } .ea-brandtile__logo img{ max-width:96px; } .ea-brandtile__meta{ flex:1 1 auto; max-width:none; font-size:14px; } .ea-brandtile__cta{ display:none; } .ea-brandtile::after{ content:""; flex:0 0 auto; width:9px; height:9px; border-top:2px solid var(--n600); border-inline-end:2px solid var(--n600); transform:rotate(45deg); } [dir="rtl"] .ea-brandtile::after{ transform:rotate(-135deg); } } /* ─── Brand landing page ──────────────────────────────────────────────────── */ .ea-brandpage__title{ font-size:clamp(30px,4vw,44px); line-height:1.08; letter-spacing:-.02em; margin:6px 0 14px; } .ea-brandpage__intro{ max-width:60ch; font-size:17px; line-height:1.65; color:var(--n600); margin:0; } .ea-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; } .ea-chip{ display:inline-flex; align-items:center; padding:8px 14px; border-radius:999px; background:var(--n50); color:var(--n800); font-size:14px; text-decoration:none; transition:background .2s ease; } .ea-chip:hover{ background:var(--n100); } /* Brand page breadcrumb. The dark-pane .ea-kicker was the wrong class here — it is white-on-ink by design and rendered as an invisible label with a default blue link on a light background. */ .ea-crumb{ font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin:0; } [dir="rtl"] .ea-crumb{ text-transform:none; letter-spacing:0; } .ea-crumb a{ color:var(--n500); text-decoration:none; } .ea-crumb a:hover{ color:var(--p600); } .ea-brandpage .ea-sechead{ align-items:baseline; margin-bottom:28px; } /* Brand-page header. Centred as one stack — crumb, logo, name, intro — with the logo at roughly twice its old size and no box behind it: on the brand's own page the mark is the subject, not a label. The H1 stays; the logo carries recognition, the heading carries the words search and screen readers need. */ .ea-brandpage__head{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0 12px; } .ea-brandpage__head .ea-crumb{ margin-bottom:22px; } .ea-brandpage__head .ea-brandpage__intro{ margin:0 auto; } .ea-brandmark{ display:inline-flex; align-items:center; justify-content:center; margin:4px 0 22px; } .ea-brandmark img{ width:auto; max-width:min(420px, 80vw); } .ea-brandmark--square img{ height:132px; } .ea-brandmark--stack img{ height:148px; } .ea-brandmark--wide img{ height:64px; } @media (max-width:767.98px){ .ea-brandmark{ margin:0 0 16px; } .ea-brandmark--square img{ height:96px; } .ea-brandmark--stack img{ height:108px; } .ea-brandmark--wide img{ height:46px; } } /* ─── Hero product rotator ────────────────────────────────────────────────── Only the merchandise moves. The headline, the paragraph and both CTAs are fixed, so there is nothing a shopper can miss by looking away — which is the difference between a shop window and an ad banner. Crossfade rather than horizontal slide: a slide has a direction, and a direction has to be mirrored in Arabic. A fade has no direction at all, so the same transition is correct in both languages. */ .ea-hero__panel{ display:flex; flex-direction:column; gap:24px; } /* The tile keeps its own sizing from .ea-hero__media; slides stack inside it, so the panel height never changes between slides and there is no CLS. */ /* Nothing here pans horizontally, so tell the browser that up front: it keeps a slightly diagonal scroll from being read as a swipe. */ .ea-rotator{ touch-action:pan-y; } .ea-rotator__slide{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; /* visibility carries the state as well as opacity, so a slide that is meant to be hidden is hidden even if its transition never runs — a throttled or motion-reduced browser must not be able to leave two slides half-painted on top of each other. It is switched with a delay so it does not cut the fade short. */ visibility:hidden; pointer-events:none; transition:opacity 400ms ease, visibility 0s linear 400ms; z-index:1; } .ea-rotator__slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity 600ms cubic-bezier(.2,0,0,1), visibility 0s; } /* The 16px rise is the whole "premium" of this component. The outgoing image holds still and simply fades — its transform reset is delayed until after the fade has finished, so nothing is ever seen snapping back. */ .ea-rotator__slide img{ transform:translateY(16px); transition:transform 0s linear 400ms; } .ea-rotator__slide.is-active img{ transform:translateY(0); transition:transform 600ms cubic-bezier(.2,0,0,1); } /* A swipe should feel like a direct response, so it runs at half the speed of an automatic change. */ .ea-rotator.is-swiping .ea-rotator__slide, .ea-rotator.is-swiping .ea-rotator__slide.is-active, .ea-rotator.is-swiping .ea-rotator__slide.is-active img{ transition-duration:300ms; } /* Pill swaps 100ms after the image starts — the stagger is what stops the two changes reading as one abrupt cut. */ .ea-hero__tag{ transition:opacity 300ms ease; } .ea-hero__tag.is-swapping{ opacity:0; } /* ── Controls ─────────────────────────────────────────────────────────────── Below the tile, never inside it: the pill already owns the bottom-inline-start corner, and controls over a product photo are how carousels end up unreadable on a white packshot. */ .ea-rotator__controls{ display:flex; align-items:center; gap:14px; } .ea-rotator__controls[hidden]{ display:none; } .ea-rotator__dots{ display:flex; align-items:center; gap:0; } /* 44px hit area, 8px of ink. The button is mostly transparent padding — touch targets are not allowed to be the size they look. */ .ea-rotator__dot{ appearance:none; border:0; background:none; /* 8px of ink inside a 42x44 target. The dot you see is not the dot you press — adjacent 16px targets are how people end up on the wrong slide. */ padding:18px 17px; margin:0; cursor:pointer; line-height:0; display:block; /* The progress fill is absolutely positioned against this button, so the button has to be the containing block. Without it the fill escapes to the nearest positioned ancestor and the progress indicator silently vanishes. */ position:relative; } .ea-rotator__dot::before{ content:""; display:block; width:8px; height:8px; border-radius:var(--r-full); background:var(--n300); transition:width .3s cubic-bezier(.2,0,0,1), background .3s ease; } .ea-rotator__dot:hover::before{ background:var(--n500); } .ea-rotator__dot:focus-visible{ outline:2px solid var(--p600); outline-offset:2px; border-radius:var(--r-full); } /* The active dot stretches into a 26px track and fills over the dwell, so the indicator and the progress bar are the same object. */ .ea-rotator__dot[aria-current="true"]::before{ width:26px; background:var(--n200); } .ea-rotator__dot .ea-rotator__fill{ position:absolute; inset-block-start:18px; inset-inline-start:17px; display:block; width:0; height:8px; border-radius:var(--r-full); background:var(--n800); } .ea-rotator__dot[aria-current="true"] .ea-rotator__fill{ animation:ea-dotfill 6000ms linear forwards; } .ea-rotator.is-paused ~ .ea-rotator__controls .ea-rotator__dot[aria-current="true"] .ea-rotator__fill, .ea-hero__panel:has(.ea-rotator.is-paused) .ea-rotator__dot[aria-current="true"] .ea-rotator__fill{ animation-play-state:paused; } @keyframes ea-dotfill{ from{ width:0; } to{ width:26px; } } .ea-rotator__toggle{ appearance:none; border:0; background:var(--n50); color:var(--n600); width:32px; height:32px; border-radius:var(--r-full); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; transition:background .2s ease, color .2s ease; } .ea-rotator__toggle svg{ fill:currentColor; } .ea-rotator__toggle:hover{ background:var(--n100); color:var(--n800); } .ea-rotator__toggle:focus-visible{ outline:2px solid var(--p600); outline-offset:2px; } /* Paused shows a play triangle, so the control names its next action, not its current state. */ .ea-rotator__toggle.is-paused svg{ display:none; } .ea-rotator__toggle.is-paused::after{ content:""; width:0; height:0; border-block:6px solid transparent; border-inline-start:9px solid currentColor; border-inline-end:0; margin-inline-start:2px; } /* ── Reduced motion ───────────────────────────────────────────────────────── No autoplay at all — the script refuses to start — and what movement remains is a short cross-dissolve with no travel. */ @media ( prefers-reduced-motion: reduce ){ /* transition:none, not a short duration. A duration that rounds to zero still creates a transition the browser can stall at its start value, and a stalled hero is a blank hero. With no transition the computed opacity is always the final one. */ .ea-rotator__slide, .ea-rotator__slide.is-active{ transition:none; } .ea-rotator__slide img, .ea-rotator__slide.is-active img{ transform:none; transition:none; } .ea-rotator__dot[aria-current="true"] .ea-rotator__fill{ animation:none; width:26px; } } /* ── Mobile ───────────────────────────────────────────────────────────────── The hero stacks, so the panel becomes full width and the controls centre under the tile. */ @media ( max-width:1023.98px ){ .ea-hero__panel{ gap:18px; } .ea-rotator__controls{ justify-content:center; } } /* ── Eight dots on a phone ────────────────────────────────────────────────── At full size the row is 7×42 + one 60px active dot + 14px + 32px toggle = 400px, and a 360px Android has 320px between the gutters. The dots have to stay on ONE line — a second row of dots reads as a second carousel — so below 420px the target shrinks to 32×44 (padding 12px, ink unchanged) and the gap closes to 10px: 7×32 + 50 + 10 + 32 = 316px, which fits 360px with 4px to spare and 375px comfortably. 32px is still double the 16px that causes wrong-slide taps, and above the 24px WCAG 2.5.8 minimum. 36px targets were tried first and do not fit: 7×36 + 54 + 10 + 32 = 348px. The wrap on the controls is the safety net for ≤340px devices only — there the toggle drops to its own centred line under the dots, and the dots still never wrap. */ @media ( max-width:419.98px ){ .ea-rotator__controls{ gap:10px; flex-wrap:wrap; row-gap:8px; } .ea-rotator__dots{ flex-wrap:nowrap; } .ea-rotator__dot{ padding:18px 12px; } .ea-rotator__dot .ea-rotator__fill{ inset-inline-start:12px; } } /* Below 400px the pill has to lose something, and the words "IN STOCK" are the least valuable thing in it — the green dot carries the same meaning in a twelfth of the width, and the product name and price survive intact. The name+price span used to be forced onto one line and ellipsised — on a 320px phone that cut the PRICE itself short ("299 …" instead of "299 EGP"), which is the one number nobody is allowed to lose. It now wraps onto a second line instead: the pill grows a little taller, never narrower than its content, so every character — price included — stays on screen down to 320px. */ @media ( max-width:399.98px ){ .ea-hero__tag{ padding:8px 12px 8px 8px; gap:8px; font-size:12.5px; align-items:flex-start; } .ea-hero__tag b{ font-size:0; padding:0; width:8px; height:8px; flex:0 0 8px; margin-block-start:4px; border-radius:var(--r-full); background:var(--success); } .ea-hero__tag span{ white-space:normal; overflow-wrap:break-word; line-height:1.35; } } /* "Shop by brand" now sits immediately under the hero, at the owner's request, so it needs its own top rhythm — .ea-section--tight is written for sections that follow a full-padded one and starts at zero, which would have let the brand row collide with the hero's rotator controls. */ .ea-hero + .ea-section--tight{ padding-block-start:clamp(24px,3.5vw,48px); } /* ─── Promo band ──────────────────────────────────────────────────────────── The designer's wide banner at its own 2.15:1 shape, now at the very top of the home page, above the hero. The picture is decorative — alt="" — and the heading and call to action sit beside it as real text, so the band still says something to a screen reader, to Google, and to anyone whose images have not loaded. Baked-in artwork is never the only copy on this site. */ /* Above the hero: breathing room under the header, and a small gap below, because the hero's own top padding follows. The spacing belongs to the band as a whole — the slides inside it carry none, or a slider would scroll its own padding. */ .ea-promos{ padding-block:clamp(18px,2.5vw,28px) clamp(4px,1vw,10px); } .ea-promo{ padding-block:0; } .ea-promo__link{ display:block; position:relative; border-radius:var(--r-lg); overflow:hidden; text-decoration:none; background:var(--n950); } .ea-promo__art{ display:block; width:100%; height:auto; transition:transform .4s cubic-bezier(.2,0,0,1); } .ea-promo__link:hover .ea-promo__art{ transform:scale(1.015); } .ea-promo__copy{ position:absolute; inset-block-end:0; inset-inline:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; background:linear-gradient(to top, rgba(9,10,18,.55), transparent); color:#fff; } .ea-promo__title{ font-size:14px; font-weight:600; } .ea-promo__cta{ font-size:13.5px; font-weight:500; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; } .ea-promo__link:focus-visible{ outline:2px solid var(--p600); outline-offset:3px; } /* Artwork that carries its own headline gets none of our copy strip painted across the bottom of someone else's composition. The SiBionics banner sets its title in English and Arabic inside the picture; ours would land on top. It keeps the standard corner radius. An earlier version squared the corners too, back when the artwork was keyed to transparency and any radius would have clipped the shield. The artwork is now an opaque full-bleed rectangle, so square corners only made it the odd slide out. The heading and call to action are not deleted with the strip, only taken out of sight: rule 2 still holds, so a screen reader and a crawler still get real text and a real link rather than a bare picture. */ .ea-promo--bare .ea-promo__link{ background:none; } .ea-promo__copy--sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* The whole point of a bare banner is that it is not a card; growing it on hover would reintroduce the frame it is meant not to have. */ .ea-promo--bare .ea-promo__link:hover .ea-promo__art{ transform:none; } /* ─── Banner slider ────────────────────────────────────────────────────────── Several banners slide instead of stacking. The track is a real horizontal scroller with scroll-snap, so swipe and trackpad work natively and the row still scrolls if the script never loads — the enhancement is the autoplay and the controls, not the sliding itself. */ .ea-promos__wrap{ position:relative; } .ea-promos__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; /* No radius here. Each framed slide rounds its own link, so a radius on the track only clips — and it clipped the corners of the frameless slide, which is the one thing that must not be cropped. */ } .ea-promos__track::-webkit-scrollbar{ display:none; } .ea-promos--slider .ea-promo{ flex:0 0 100%; scroll-snap-align:center; padding-block:0; } .ea-promos--slider .ea-promo + .ea-promo{ padding-block-start:0; } /* Arrows sit inside the banner, out of the way of the copy strip. */ .ea-promos__nav{ position:absolute; inset-block-start:calc(50% - 40px); inline-size:40px; block-size:40px; padding:0; display:none; align-items:center; justify-content:center; border:0; border-radius:var(--r-full); cursor:pointer; background:rgba(255,255,255,.9); color:var(--n800); box-shadow:0 4px 14px rgba(15,18,32,.18); transition:background .18s ease, transform .18s ease; } @media (min-width:768px){ .ea-promos--slider .ea-promos__nav{ display:flex; } } .ea-promos__nav:hover{ background:#fff; transform:scale(1.06); } .ea-promos__nav svg{ inline-size:20px; block-size:20px; } .ea-promos__nav--prev{ inset-inline-start:16px; } .ea-promos__nav--next{ inset-inline-end:16px; } [dir="rtl"] .ea-promos__nav svg{ transform:scaleX(-1); } .ea-promos__dots{ display:flex; justify-content:center; gap:8px; margin-block-start:14px; } .ea-promos__dot{ inline-size:26px; block-size:20px; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; } .ea-promos__dot span{ display:block; inline-size:22px; block-size:4px; border-radius:2px; background:var(--n300); transition:background .2s ease, inline-size .2s ease; } .ea-promos__dot[aria-current="true"] span{ background:var(--p600); inline-size:30px; } .ea-promos__dot:focus-visible{ outline:2px solid var(--p600); outline-offset:2px; border-radius:var(--r-full); } /* Phones get a narrower crop of the same artwork, served by . The wide banner is 174px tall on a 375px screen and its baked copy is unreadable at that size; the crop keeps the logo and the offer and loses only the far right of the photography, which is decoration. That is what lets the band run on mobile at all — it used to be hidden outright. The box is sized with `aspect-ratio`, not a fixed height, and the ratio comes per banner from `--ea-mr` (set inline from PHP): normally the mobile image's own native ratio, so `cover` has nothing left to crop beyond the mobile file itself. One banner (PiC's Ice Spray footballer) cannot be cropped at all on a phone width without cutting the product — its art spans the full width, can included — so it is flagged `mobile_contain` and served uncropped, `contain`- fitted into a slightly shorter box instead of cover-filled into a cropped one. `.ea-promo__link`'s own background (n950, near-black) shows as the letterbox bars, which is close to this artwork's own dark corners. */ /* 28 Sep, second pass: the caption used to overlay the bottom of the artwork on every width (a gradient strip, see `.ea-promo__copy` above). On phones that overlay was hiding the art's OWN baked text — Liply's "LIP CARE AND PROTECTION", Nina's birthstone collage, Little Tickle's product row all sat right where the gradient + our title/CTA landed. Below 768px the caption moves out of the picture entirely: `.ea-promo__link` becomes a column, the art keeps its own aspect-ratio box (`.ea-promo__media`, sized exactly as before — see the note above `.ea-promo__art`'s cover/contain rules, now scoped to the media box instead of the whole link), and the caption renders as a plain, solid, non-overlapping bar underneath it — still inside the same rounded card, since `.ea-promo__link` already clips to `border-radius` with `overflow:hidden`. The bar's colour is `--ea-cap-bg`, each banner's own brand `field` token (set inline from PHP) rather than one generic bar, and white text keeps the same contrast the gradient strip guaranteed before. SiBionics ('bare') gets this bar too now: 'bare' only ever meant "nothing painted OVER the art", which is moot once the strip lives below it — see `.ea-promo__copy--sr` below. The slider's arrow buttons are unaffected: they are only ever shown at `min-width:768px` (`.ea-promos__nav` display rule, above), so they never need to re-centre around the taller card. */ @media ( max-width:767.98px ){ .ea-promo__link{ display:flex; flex-direction:column; } .ea-promo__media{ display:block; aspect-ratio:var(--ea-mr, 1.82); overflow:hidden; } .ea-promo__media .ea-promo__art{ block-size:100%; inline-size:100%; object-fit:cover; } /* Video is both the media box and the art in one element (no wrapper) — same cover/contain rules, just on itself. */ .ea-promo__art.ea-promo__media{ block-size:100%; inline-size:100%; object-fit:cover; } /* Bottom-aligned: the letterbox bar lands entirely above the art rather than split top and bottom, so the bottom of the visible photograph still meets the caption bar directly — same composition as every cover-fit slide — instead of leaving a plain gap between them. */ .ea-promo__link--contain-m .ea-promo__media .ea-promo__art, .ea-promo__link--contain-m .ea-promo__art.ea-promo__media{ object-fit:contain; object-position:50% 100%; } .ea-promos__dots{ margin-block-start:10px; } .ea-promo__copy{ position:static; inset:auto; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:10px 14px; background:var(--ea-cap-bg, var(--n900)); } /* Bare banners (SiBionics) were visually-hidden (`--sr`, screen-reader-only) because their strip used to paint over artwork that already carries its own headline. That no longer happens — the bar sits below the art now — so on mobile only, undo the visually-hidden clip and show the same bar every other banner gets. Desktop is untouched: `--sr` still applies there, unchanged, since the "nothing over the art" reason still holds when the strip IS an overlay. */ .ea-promo__copy--sr{ position:static; inline-size:auto; block-size:auto; padding:10px 14px; margin:0; overflow:visible; clip-path:none; white-space:normal; border:0; } .ea-promo__title{ font-size:13px; } .ea-promo__cta{ font-size:12.5px; white-space:normal; } } /* ─── Brand tiles: fluid hover ─────────────────────────────────────────────── Motion vocabulary, borrowed from the Framer references the owner pointed at and reduced to what those pages actually do: one decelerating curve for fades, a slightly overshooting one for the enlarge, and nothing but transform and opacity ever animating — never box-shadow, never layout. The hovered tile grows over its neighbours (the owner is happy for it to cover them), the neighbours ease back a touch so the row moves as one thing, and the tile leans a few pixels toward the pointer, which is the detail that makes it feel alive rather than switched on. */ .ea-brandtile{ --ea-s:1; --ea-mx:0px; --ea-my:0px; position:relative; isolation:isolate; transform-origin:center; transform:translate3d(var(--ea-mx), var(--ea-my), 0) scale(var(--ea-s)); will-change:transform; transition: transform .42s cubic-bezier(.34,1.3,.64,1), opacity .32s cubic-bezier(.4,0,.2,1); } /* The shadow lives on a pseudo-element whose opacity fades, so the shadow itself never animates; that is what keeps the enlarge smooth on a laptop GPU. */ .ea-brandtile::before{ content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; box-shadow:0 34px 70px -22px rgba(23,24,34,.42), 0 10px 22px -12px rgba(23,24,34,.22); opacity:0; transition:opacity .42s cubic-bezier(.4,0,.2,1); } .ea-brandtile__wash{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; opacity:0; background:var(--n800); transition:opacity .36s cubic-bezier(.4,0,.2,1); } .ea-brandtile__wash img{ width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.12); transition:transform .9s cubic-bezier(.22,1,.36,1); } /* Scrim over the photograph so the white logo plate and white type stay legible whatever happens to sit behind them. */ .ea-brandtile__wash::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(23,24,34,.84), rgba(23,24,34,.26)); } /* The logo grows on its own, a beat behind the tile, onto a white plate. */ .ea-brandtile__logo{ position:relative; transition:transform .5s cubic-bezier(.22,1,.36,1); } /* The white plate is the logo's own box — padding around the mark, not a slab over the artwork — so it grows with the logo and the photograph stays visible around it. content-box keeps the declared heights as logo heights. */ .ea-brandtile__logo img, .ea-brandtile__wordmark{ box-sizing:content-box; padding:14px 22px; border-radius:18px; background:rgba(255,255,255,0); transition:background-color .3s cubic-bezier(.4,0,.2,1), color .3s cubic-bezier(.4,0,.2,1); } .ea-brandtile__logo--square img{ height:72px; } .ea-brandtile__logo--stack img{ height:78px; } .ea-brandtile__logo--wide img{ height:36px; } .ea-brandtile__logo--word{ display:flex; align-items:center; justify-content:center; } /* A brand with no logo artwork gets an honest type lockup, not an invented mark. */ .ea-brandtile__wordmark{ font-size:28px; font-weight:600; letter-spacing:-.015em; line-height:1; color:var(--n800); } .ea-brandtile__meta, .ea-brandtile__cta{ transition:color .3s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.22,1,.36,1); } @media ( hover:hover ) and ( pointer:fine ){ .ea-brandtile:hover, .ea-brandtile:focus-visible{ --ea-s:1.18; z-index:4; } .ea-brandtile:hover::before, .ea-brandtile:focus-visible::before{ opacity:1; } .ea-brandtile:hover .ea-brandtile__wash, .ea-brandtile:focus-visible .ea-brandtile__wash{ opacity:1; } .ea-brandtile:hover .ea-brandtile__wash img, .ea-brandtile:focus-visible .ea-brandtile__wash img{ transform:scale(1); } .ea-brandtile:hover .ea-brandtile__logo, .ea-brandtile:focus-visible .ea-brandtile__logo{ transform:scale(1.2); } .ea-brandtile:hover .ea-brandtile__logo img, .ea-brandtile:hover .ea-brandtile__wordmark, .ea-brandtile:focus-visible .ea-brandtile__logo img, .ea-brandtile:focus-visible .ea-brandtile__wordmark{ background-color:#fff; } .ea-brandtile:hover .ea-brandtile__meta, .ea-brandtile:hover .ea-brandtile__cta, .ea-brandtile:focus-visible .ea-brandtile__meta, .ea-brandtile:focus-visible .ea-brandtile__cta{ color:#fff; } .ea-brandtile:hover .ea-brandtile__meta, .ea-brandtile:hover .ea-brandtile__cta{ transform:translateY(-4px); } /* The three tiles not under the pointer ease back and soften, so the row reads as one surface responding, not one tile shouting. */ .ea-brandrow:has(.ea-brandtile:hover) .ea-brandtile:not(:hover){ --ea-s:.965; opacity:.62; } } /* Touch gets a press state instead; the brand artwork lives on the brand page, which is one tap away. */ .ea-brandtile:active{ --ea-s:.985; } /* Entrance: each tile rises and settles in turn as the row scrolls into view. `backwards` fill hides the tile during its delay and releases it afterwards, so the hover transform above owns the element once it has landed. */ @keyframes ea-rise{ from{ opacity:0; transform:translate3d(0,40px,0) scale(.9); } } .ea-brandtile.is-waiting{ opacity:0; } .ea-brandtile.is-rising{ animation:ea-rise .7s cubic-bezier(.4,0,.2,1) both; animation-delay:calc(var(--ea-i, 0) * 100ms); animation-fill-mode:backwards; } /* ─── Brand strip (≥768): every brand on screen, no scrolling ──────────────── Was a scroll-snap strip showing four tiles with a fifth peeking, because the row held five brands. The owner asked for all of them visible at once, and with seven a scroller hides more than it shows. So it is a wrapping grid: four across then three on a desktop, three across on a tablet, two on a phone. Nothing is off screen, nothing rotates, and the arrows — which were markup with no script behind them — are gone. The tiles are a little narrower than they were at four-across, so the minimum height comes down with them; the logo still owns the upper two thirds. */ @media ( min-width:768px ){ .ea-brandrow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } } @media ( min-width:1024px ){ .ea-brandrow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } .ea-brandtile{ min-height:224px; padding:24px 18px 20px; } } /* A brand with no products yet: present, legible, and plainly not a link. */ .ea-brandtile--soon{ cursor:default; } .ea-brandtile--soon:hover{ transform:none; } .ea-brandtile__cta--soon{ color:var(--n500); font-weight:500; } .ea-brandtile--soon .ea-brandtile__logo{ opacity:.72; } /* Reduced motion removes the motion, not the state. The hovered tile still enlarges and shows its artwork — instantly — because that state carries the brand imagery. What goes is everything that moves on its own: the overshoot easings, the artwork drift, the lean toward the pointer, and the entrance. Worth knowing: Windows with "Animation effects" switched off reports this, and the owner's own machine does. */ @media ( prefers-reduced-motion: reduce ){ .ea-brandtile, .ea-brandtile::before, .ea-brandtile__wash, .ea-brandtile__wash img, .ea-brandtile__logo, .ea-brandtile__logo img, .ea-brandtile__wordmark, .ea-brandtile__meta, .ea-brandtile__cta{ transition:none; transition-duration:0s !important; } .ea-brandtile{ --ea-mx:0px !important; --ea-my:0px !important; } .ea-brandtile__wash img, .ea-brandtile:hover .ea-brandtile__wash img{ transform:none; } .ea-brandtile:hover .ea-brandtile__meta, .ea-brandtile:hover .ea-brandtile__cta{ transform:none; } .ea-brandtile.is-rising{ animation:none; } .ea-brandtile.is-waiting{ opacity:1; } .ea-promo__art{ transition:none; } .ea-promos__track{ scroll-behavior:auto; } } /* ─── Category cards on brand pages ───────────────────────────────────────── Replaces the pill chips. The photograph is permanent and the label is live text from the WooCommerce term — never baked into the image — so it translates, and so Google can read it. */ .ea-catcards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; } .ea-catcard{ display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:var(--n50); text-decoration:none; color:var(--n800); transition:transform .2s ease, box-shadow .2s ease; } .ea-catcard__media{ display:grid; place-items:center; aspect-ratio:16/10; padding:14px; overflow:hidden; } .ea-catcard__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .3s cubic-bezier(.2,0,0,1); } /* One product cut-out has to sit smaller than a group photograph of a whole range, or a single lonely box fills the card edge to edge. */ .ea-catcard__img--product{ max-height:82%; } .ea-catcard__label{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 16px 16px; font-size:15px; font-weight:500; background:#fff; } .ea-catcard__count{ font-size:12.5px; font-weight:400; color:var(--n500); white-space:nowrap; } @media ( hover:hover ) and ( pointer:fine ){ .ea-catcard:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(23,24,34,.10); } .ea-catcard:hover .ea-catcard__img{ transform:scale(1.06); } } .ea-catcard:focus-visible{ outline:2px solid var(--p600); outline-offset:2px; } @media ( max-width:767.98px ){ .ea-catcards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .ea-catcard__label{ padding:12px; font-size:14px; } .ea-catcard__count{ display:none; } } @media ( prefers-reduced-motion: reduce ){ .ea-catcard, .ea-catcard:hover, .ea-catcard__img{ transition:none; transform:none; } } /* ─── Product card: packaging first, product on hover ─────────────────────── The second image sits exactly on top of the first and cross-fades in. Both are in normal flow terms the same size, so the card never changes height and the grid never reflows mid-hover. */ .ct-media-container{ position:relative; } .ea-card__reveal{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; pointer-events:none; transition:opacity .28s ease, transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease); } @media ( hover:hover ) and ( pointer:fine ){ .ct-media-container:hover .ea-card__reveal, li.product:hover .ea-card__reveal{ opacity:1; } } /* On touch the reveal is never attached at all — see inc/cards.php — so there is nothing to hide and no second image is downloaded. */ @media ( prefers-reduced-motion: reduce ){ .ea-card__reveal{ transition:opacity 120ms ease; } } /* ============================================================ 11. PiC SOLUTION BRAND PAGE PiC's own four-range structure, in PiC's own colours. The brand's navy and red are scoped to this page only — they are borrowed, not adopted, and nothing here leaks into the storefront's own magenta-on-neutral system. ============================================================ */ .ea-picpage{ --pic-navy:#1e2f6d; --pic-navy-deep:#16245a; --pic-red:#e1251b; --pic-ink-on-navy:rgba(255,255,255,.82); } /* Hero: a navy field the width of the viewport, copy left, the four ranges as a jump-nav right. On a phone the nav becomes a horizontal scroller so the ranges stay one tap away instead of pushing the products off screen. */ .ea-pichero{ background: radial-gradient(120% 140% at 15% 0%, #2a3f86 0%, rgba(42,63,134,0) 60%), linear-gradient(180deg, var(--pic-navy) 0%, var(--pic-navy-deep) 100%); color:#fff; padding-block:clamp(28px,5vw,56px) clamp(32px,5vw,60px); margin-block-end:clamp(28px,4vw,48px); } .ea-pichero__grid{ display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:minmax(0,1fr); align-items:center; } @media (min-width:900px){ .ea-pichero__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } } .ea-pichero__logo{ width:76px; height:auto; border-radius:var(--r-md); background:#fff; padding:8px; margin-block-end:18px; } .ea-picpage__title{ font-size:clamp(30px,4vw,44px); line-height:1.12; margin:0; color:#fff; letter-spacing:-.015em; } .ea-picpage__tag{ font-style:italic; font-weight:600; font-size:clamp(19px,2.2vw,26px); color:#fff; margin:10px 0 0; } .ea-picpage__intro{ color:var(--pic-ink-on-navy); max-width:52ch; margin:14px 0 0; font-size:15.5px; } .ea-crumb--onnavy a{ color:var(--pic-ink-on-navy); } .ea-crumb--onnavy a:hover{ color:#fff; } /* "Made in Italy" is a fact printed on the packaging, set the way PiC sets it: small caps over the tricolour rule. */ .ea-madein{ display:flex; align-items:center; gap:10px; margin:22px 0 0; } .ea-madein__label{ font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#fff; } [dir="rtl"] .ea-madein__label{ text-transform:none; letter-spacing:0; } .ea-madein__flag{ display:flex; width:66px; height:9px; border-radius:2px; overflow:hidden; } .ea-madein__flag i{ flex:1; } .ea-madein__flag i:nth-child(1){ background:#008c45; } .ea-madein__flag i:nth-child(2){ background:#fff; } .ea-madein__flag i:nth-child(3){ background:#cd212a; } .ea-pichero__side{ display:flex; flex-direction:column; gap:20px; } .ea-pichero__side .ea-bslider{ max-width:none; } /* Range jump-nav */ .ea-picnav{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:620px){ .ea-picnav{ grid-template-columns:repeat(4,minmax(0,1fr)); } } .ea-picnav__item{ display:flex; flex-direction:column; gap:10px; background:#fff; border-radius:var(--r-md); padding:14px 12px 12px; text-decoration:none; color:var(--pic-navy); transition:transform .18s ease, box-shadow .18s ease; } .ea-picnav__item:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(10,18,48,.28); } .ea-picnav__item img{ width:100%; height:92px; object-fit:contain; display:block; } .ea-picnav__item span{ font-size:13px; font-weight:600; line-height:1.25; text-align:center; } /* Range sections. The heading rule is PiC red — the one place the brand's accent appears at full strength, so it reads as a marker rather than decoration. */ .ea-picrange__head{ margin-block-end:clamp(22px,3vw,34px); } .ea-picrange__head h2{ font-size:clamp(22px,2.6vw,30px); margin:0; color:var(--pic-navy); padding-block-end:12px; position:relative; } .ea-picrange__head h2::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0; width:52px; height:3px; background:var(--pic-red); border-radius:2px; } .ea-picrange__head p{ margin:12px 0 0; color:var(--n600); font-size:15px; } .ea-picsub{ margin-block-end:clamp(30px,4vw,46px); } .ea-picsub:last-child{ margin-block-end:0; } .ea-sechead--sub{ align-items:baseline; margin-bottom:20px; } .ea-sechead--sub h3{ font-size:17px; font-weight:600; margin:0; color:var(--n800); } /* ─── §12 Per-brand theming ────────────────────────────────────────────────── Every rule here reads its colours from three custom properties set inline on the section — --bt-accent, --bt-ink, --bt-field — so one stylesheet serves seven brands and adding an eighth is a row in a PHP array, not a new block of CSS. What the brand does NOT get to change is the product card, the price, the magenta call to action, the type family or the grid: those are what a shopper compares across brands, and the moment they vary the store stops reading as one shop. See inc/brand-theme.php for the tokens and the choice of page archetype. */ /* The masthead every brand page opens with, PiC excepted — it keeps the hero it already had. White type on the brand's field colour, so the logo sits on something of its own rather than on our page grey. */ .ea-bmast{ background:var(--bt-field); color:#fff; padding-block:clamp(22px,3vw,34px) clamp(28px,4vw,44px); border-block-end:3px solid var(--bt-accent); } .ea-crumb--onfield a{ color:rgba(255,255,255,.78); } .ea-crumb--onfield a:hover{ color:#fff; } .ea-bmast__grid{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,3vw,38px); margin-top:14px; } .ea-bmast__main{ display:flex; align-items:center; gap:clamp(18px,3vw,38px); flex:1 1 380px; min-width:0; } .ea-bmast__logo{ flex:none; display:grid; place-items:center; width:clamp(92px,13vw,148px); aspect-ratio:1; background:#fff; border-radius:var(--r-lg); padding:14px; } .ea-bmast__logo img{ max-width:100%; max-height:100%; object-fit:contain; } .ea-bmast__title{ margin:0; color:#fff; font-size:clamp(28px,4.2vw,44px); line-height:1.1; } .ea-bmast__voice{ margin:8px 0 0; font-size:clamp(15px,1.9vw,19px); color:rgba(255,255,255,.9); } .ea-bmast__intro{ margin:10px 0 0; max-width:62ch; color:rgba(255,255,255,.76); font-size:15.5px; } .ea-bmast__meta{ margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; color:rgba(255,255,255,.72); } .ea-bmast__meta span{ position:relative; } .ea-bmast__meta span + span::before{ content:''; position:absolute; inset-inline-start:-10px; top:50%; width:3px; height:3px; border-radius:50%; background:var(--bt-accent); transform:translateY(-50%); } @media (max-width:640px){ .ea-bmast__grid{ gap:16px; } .ea-bmast__logo{ width:80px; padding:10px; } } /* Nina's masthead carries the flyer's line-art woman, re-inked in white and faded to 55% so she sits IN the maroon rather than on it. Anchored to the inline end, so RTL flips her to the left without a second rule, and the copy is padded away from her on the same side. Under 900px she goes: a 40%-wide face behind two lines of copy is noise, not decoration. */ .ea-bmast--face{ position:relative; overflow:hidden; } .ea-bmast--face .ea-wrap{ position:relative; z-index:1; } .ea-bmast__face{ position:absolute; inset-inline-end:clamp(8px,4vw,64px); inset-block-end:0; height:100%; width:auto; max-height:100%; opacity:.55; pointer-events:none; user-select:none; } .ea-bmast--face .ea-bmast__copy{ max-width:62ch; padding-inline-end:clamp(120px,16vw,220px); } @media (max-width:899px){ .ea-bmast__face{ display:none; } .ea-bmast--face .ea-bmast__copy{ padding-inline-end:0; } } /* ─── The brand-page slider ─────────────────────────────────────────────── "Hero products + potential promos for that specific brand", beside the masthead copy on desktop and below it on mobile. Reuses the homepage hero rotator's crossfade/dots/pause-toggle script and markup contract wholesale (see elarabi_brand_slider_render() in inc/brand-theme.php) — this block only supplies the compact sizing and the brand-tokened surface the hero tile does not need, because a brand masthead is not the LCP hero. .ea-bmast--slider widens .ea-bmast__copy back out: the slider now owns the inline-end column the Nina face used to occupy, so the padding reserved for her is dropped on every brand, not only Nina. */ .ea-bmast--slider .ea-bmast__copy{ padding-inline-end:0; } .ea-bmast__grid:has(.ea-bslider) .ea-bmast__main{ flex-basis:420px; } .ea-bslider{ flex:1 1 320px; min-width:260px; max-width:400px; gap:12px; } .ea-bslider__media{ position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; background:rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(255,255,255,.14) inset; } .ea-bslide{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; text-align:center; text-decoration:none; color:inherit; } .ea-bslide:focus-visible{ outline:2px solid #fff; outline-offset:-4px; border-radius:var(--r-lg); } .ea-bslide__media{ display:block; width:66%; max-width:180px; } .ea-bslide__media img{ width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.28)); } .ea-bslide__info{ display:flex; flex-direction:column; gap:2px; } .ea-bslide__name{ font-size:13.5px; font-weight:600; color:#fff; max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ea-bslide__price{ font-size:13px; color:rgba(255,255,255,.82); } .ea-bslide__price ins{ text-decoration:none; } /* Promo slides carry their own copy instead of a product photo, on a soft tint of the brand accent so a shopper still reads it as "part of the same panel" rather than a banner stitched on. */ .ea-bslide__promo{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; height:100%; justify-content:center; padding:18px; background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--bt-accent) 38%, transparent), transparent 70%); } .ea-bslide__kicker{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--bt-accent); border-radius:var(--r-full); padding:3px 10px; } .ea-bslide__headline{ font-size:17px; font-weight:700; color:#fff; max-width:24ch; line-height:1.25; } .ea-bslide__sub{ font-size:12.5px; color:rgba(255,255,255,.78); max-width:28ch; } .ea-bslide__cta{ margin-top:4px; font-size:12.5px; font-weight:600; color:#fff; } .ea-bslider .ea-rotator__controls{ justify-content:center; gap:10px; } .ea-bslider .ea-rotator__toggle{ width:28px; height:28px; background:rgba(255,255,255,.14); color:#fff; } .ea-bslider .ea-rotator__toggle:hover{ background:rgba(255,255,255,.24); color:#fff; } .ea-bslider .ea-rotator__dot::before{ background:rgba(255,255,255,.38); } .ea-bslider .ea-rotator__dot:hover::before{ background:rgba(255,255,255,.6); } .ea-bslider .ea-rotator__dot[aria-current="true"]::before{ background:rgba(255,255,255,.3); } .ea-bslider .ea-rotator__dot .ea-rotator__fill{ background:#fff; } @media (max-width:899px){ .ea-bslider{ flex-basis:100%; max-width:420px; margin-inline:auto; order:3; } .ea-bmast__grid:has(.ea-bslider) .ea-bmast__main{ flex-basis:100%; } } /* Reduced motion inherits the rotator's own rule (transition:none on the slide, no dot-fill animation); nothing brand-slider-specific to add. */ /* ── 3.17.0 · bigger product, plus the family strip ────────────────────────── The product picture now fills most of the card (it used to sit at 66% of the width, 180px at most), and under it a strip of the OTHER in-stock products from the same brand and category shows how big the range is. The card is a fixed aspect ratio and every product slide carries a strip box of the same height (hidden, not removed, when a product has no family), so nothing moves when the slides change. The slide is no longer one big link: the picture + name + price are the link, and each thumbnail is its own. Layout is by container width, not viewport: under 520px the strip sits below the picture (a phone, and every masthead); from 520px (the wide PiC hero) it sits beside it. Logical properties only, so Arabic mirrors for free. */ .ea-bslider__media{ container-type:inline-size; container-name:bs; aspect-ratio:1 / 1.18; } @media (min-width:620px){ .ea-pichero__side .ea-bslider__media{ aspect-ratio:16 / 10; } } .ea-bslide--product{ overflow:hidden; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px; padding:12px 12px 10px; } .ea-bslide--product .ea-bslide__main{ flex:1 1 0; min-block-size:0; display:flex; flex-direction:column; align-items:center; gap:6px; color:inherit; text-decoration:none; border-radius:var(--r-md); } .ea-bslide--product .ea-bslide__main:focus-visible{ outline:2px solid #fff; outline-offset:2px; } .ea-bslide--product .ea-bslide__media{ flex:1 1 0; min-block-size:0; inline-size:100%; max-inline-size:none; display:block; } .ea-bslide--product .ea-bslide__media img{ inline-size:100%; block-size:100%; object-fit:contain; } .ea-bslide--product .ea-bslide__info{ align-items:center; text-align:center; max-inline-size:100%; } .ea-bslide--product .ea-bslide__name{ max-inline-size:100%; } .ea-bfam{ flex:0 0 auto; min-block-size:72px; display:flex; flex-direction:column; gap:6px; } .ea-bfam.is-empty{ visibility:hidden; } .ea-bfam__label{ margin:0; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82); } .ea-bfam__list{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; } .ea-bfam__list li{ flex:1 1 0; min-inline-size:0; max-inline-size:54px; } .ea-bfam__item{ display:block; aspect-ratio:1; background:#fff; border-radius:10px; padding:3px; box-shadow:0 1px 2px rgba(0,0,0,.22); transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base); } .ea-bfam__item:hover{ transform:translateY(-2px); box-shadow:0 6px 12px rgba(0,0,0,.28); } .ea-bfam__item:active{ transform:none; } .ea-bfam__item:focus-visible, .ea-bfam__more:focus-visible{ outline:2px solid #fff; outline-offset:2px; } .ea-rotator__slide .ea-bfam .ea-bfam__item img{ display:block; inline-size:100%; block-size:100%; object-fit:contain; transform:none; transition:none; } .ea-bfam__list li.ea-bfam__morewrap{ flex:0 0 auto; max-inline-size:none; } .ea-bfam__more{ display:inline-flex; align-items:center; justify-content:center; min-block-size:44px; padding-inline:12px; border:1px solid rgba(255,255,255,.55); border-radius:var(--r-full); background:rgba(255,255,255,.14); color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background var(--dur-base); } .ea-bfam__more:hover{ background:rgba(255,255,255,.26); color:#fff; } @container bs (min-width:520px){ .ea-bslide--product{ flex-direction:row; align-items:center; gap:24px; padding:22px 26px; } .ea-bslide--product .ea-bslide__main{ flex:1 1 0; min-inline-size:0; block-size:100%; } .ea-bfam{ flex:0 0 34%; max-inline-size:34%; min-inline-size:0; min-block-size:0; } /* 3.18.3: at most two rows of three, then the "+N more" chip — a long product name used to push a full strip past the card's inline edge. */ .ea-bfam__list li:nth-child(n+7):not(.ea-bfam__morewrap){ display:none; } .ea-bfam__list{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); } .ea-bfam__list li{ max-inline-size:none; } .ea-bfam__list li.ea-bfam__morewrap{ grid-column:span 3; } .ea-bfam__more{ inline-size:100%; } } @media (prefers-reduced-motion:reduce){ .ea-bfam__item, .ea-bfam__more{ transition:none; } } /* ─── The brand ribbon on a product page ───────────────────────────────────── The owner asked for a bar under the navigation carrying the brand's theme, logo and other products. The other products are NOT in it: at 375px a row of thumbnails above the title pushes the price and the add-to-cart button off the screen, and nobody explores a brand before they have seen the product they tapped. So this carries identity and one route into the range, and the siblings sit beside the buy decision instead — see .ea-bsibs. It is not sticky. Blocksy's header already is, and a second fixed strip plus a sticky add-to-cart would leave a phone showing three bars and a sliver of product. */ /* Sticky, at the owner's request. It pins directly under the header — hence --ea-headerh, which the header and this rule share; if one changes the other must. z-index sits below the header's 100 so the two never fight. The background is opaque BECAUSE it is sticky: the accent tint is painted as a second layer over a solid white base, so once the ribbon is floating over the page it never lets product imagery show through it. The cost is real and worth naming: header plus ribbon is 114 px of fixed chrome on a 66 px-header phone. That is why it tightens to 38 px once stuck, and why the siblings row still lives beside the buy box rather than in here. */ .ea-bribbon{ position:sticky; top:var(--ea-headerh); z-index:90; border-block-start:3px solid var(--bt-accent); border-block-end:1px solid var(--n100); background-color:#fff; background-image:linear-gradient(90deg, color-mix(in srgb, var(--bt-accent) 7%, transparent), transparent 62%); transition:box-shadow .2s ease; } .ea-bribbon__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding-block:6px; transition:min-height .18s ease, padding-block .18s ease; } /* Set by assets/brand-bar.js once the ribbon has pinned. Without the script the ribbon still sticks — it simply keeps its resting height. */ .ea-bribbon.is-stuck{ box-shadow:0 6px 18px rgba(23,24,34,.09); } .ea-bribbon.is-stuck .ea-bribbon__in{ min-height:38px; padding-block:2px; } .ea-bribbon.is-stuck .ea-bribbon__logo{ height:20px; } .ea-bribbon__sentinel{ height:0; } /* Anything the ribbon can cover needs the same offset, or a link to "#pic-…" or a tab anchor lands with its heading hidden behind the bar. */ .woocommerce div.product .woocommerce-tabs ul.tabs li a, .ea-bsibs, .ea-nstory{ scroll-margin-block-start:calc(var(--ea-headerh) + 60px); } /* PiC range-card jump links land under the sticky header plus the brand ribbon (~42px); Nina's birth-month calendar anchor shares the same offset. */ #pic-health, #pic-digital, #pic-insupen, #pic-wound, #birth-month{ scroll-margin-top:calc(var(--ea-headerh) + 56px); } @media (prefers-reduced-motion:reduce){ .ea-bribbon, .ea-bribbon__in{ transition:none; } } .ea-bribbon__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; } .ea-bribbon__logo{ height:24px; width:auto; max-width:112px; object-fit:contain; flex:none; } .ea-bribbon__name{ font-weight:600; font-size:14.5px; color:var(--bt-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ea-bribbon__all{ flex:none; font-size:13.5px; font-weight:600; color:var(--bt-ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px; } .ea-bribbon__all:hover{ text-decoration:underline; text-underline-offset:3px; } [dir="rtl"] .ea-bribbon__all span{ transform:scaleX(-1); } /* A logo already carries the brand name as artwork, so on a phone the word is redundant and the space is better spent keeping "See all" on the same line. */ @media (max-width:520px){ .ea-bribbon__name{ display:none; } .ea-bribbon__logo{ height:22px; } /* With no logo the name IS the identity, so it stays whatever the width. */ .ea-bribbon__brand--nologo .ea-bribbon__name{ display:block; } } /* "More from ", under the buy box. Replaces Woo's related products rather than joining it, so the page carries one row and not two. */ .ea-bsibs{ padding-block-start:clamp(28px,4vw,44px); } .ea-bsibs .ea-sechead h2{ font-size:clamp(19px,2.4vw,24px); } .ea-bsibs .ea-sechead h2::after{ content:''; display:block; width:34px; height:3px; margin-top:8px; background:var(--bt-accent); border-radius:2px; } /* ─── Nina: the lookbook ───────────────────────────────────────────────────── The birthstone calendar off page 3 of the A5 flyer. Months we do not stock still show — a shopper looking for August has to see that August exists before they will trust the chart — but only stocked stones are links. */ .ea-stones{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; } /* The
  • is a bare grid cell; the card is the single inner wrapper (an for stocked stones, a otherwise) so a linked month never draws two boxes. Gem spans both text rows; month and stone name stack beneath. */ .ea-stone{ display:block; min-width:0; } .ea-stone__in{ display:grid; grid-template-columns:26px 1fr; column-gap:12px; align-items:center; min-width:0; height:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--n100); border-radius:var(--r-md); background:#fff; text-decoration:none; color:inherit; transition:border-color .18s, transform .18s; } a.ea-stone__in:hover{ border-color:var(--bt-accent); transform:translateY(-2px); } .ea-stone--out .ea-stone__in{ opacity:.55; } .ea-stone__gem{ grid-row:1 / span 2; width:26px; height:26px; border-radius:50%; background:radial-gradient(60% 55% at 34% 30%, rgba(255,255,255,.85), transparent 58%), var(--gem); box-shadow:inset 0 0 0 1px rgba(0,0,0,.10); } .ea-stone__month{ grid-column:2; font-weight:600; font-size:14px; line-height:1.2; } .ea-stone__name{ grid-column:2; margin:0; font-size:12.5px; line-height:1.25; color:var(--n600); } .ea-stone__month, .ea-stone__name{ overflow-wrap:anywhere; } /* The two stud sizes, drawn at their real relative diameters (2.78 and 3.96 mm) rather than at two arbitrary sizes — the whole point of the section is that the difference is small and a parent wants to see how small. */ .ea-nsizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; } .ea-nsize{ padding:22px; border:1px solid var(--n100); border-radius:var(--r-lg); background:#fff; } .ea-nsize__dot{ display:block; width:calc(var(--d) * 9px); height:calc(var(--d) * 9px); border-radius:50%; background:radial-gradient(60% 55% at 34% 30%, #fff, transparent 60%), var(--bt-accent); margin-bottom:14px; } .ea-nsize h3{ margin:0; font-size:17px; } .ea-nsize__mm{ margin:2px 0 8px; font-weight:600; color:var(--bt-ink); } .ea-nsize p{ margin:0; font-size:14px; color:var(--n600); } .ea-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; } .ea-fact{ padding-inline-start:16px; border-inline-start:3px solid var(--bt-accent); } .ea-fact h3{ margin:0 0 6px; font-size:15.5px; } .ea-fact p{ margin:0; font-size:14px; color:var(--n600); line-height:1.55; } /* The two "how it's done" clips. Cards sit side by side from 560px up and stack below it; the video keeps a 16:9 box via aspect-ratio so the layout never jumps once the poster or the clip itself loads. */ .ea-nvideos__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; } .ea-nvideo{ margin:0; } .ea-nvideo video{ display:block; width:100%; aspect-ratio:16 / 9; border-radius:var(--r-lg); background:#000; object-fit:cover; } .ea-nvideo figcaption{ margin-block-start:10px; display:flex; flex-direction:column; gap:2px; } .ea-nvideo figcaption strong{ font-size:15px; color:var(--bt-ink); } .ea-nvideo figcaption span{ font-size:13.5px; color:var(--n600); line-height:1.5; } @media (max-width:559px){ .ea-nvideos__grid{ grid-template-columns:1fr; } } /* The four-petal promise panel from the centre of the flyer: two rows of two rounded quadrants, magenta and cyan alternating, a grey rule between the rows and a thin grey outline standing off each petal. The 26px radius sits on the OUTER corner of each quadrant only, which is what makes four boxes read as one flower. Logical corner properties, so RTL mirrors the flower rather than breaking it. Under 560px they stack in one column and every petal takes the full radius — one quadrant on its own is just a lump. */ .ea-npromise{ padding-block-start:clamp(28px,4vw,44px); } .ea-npetals{ list-style:none; margin:0 auto; padding:0; position:relative; max-width:760px; display:grid; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:18px; } .ea-npetals::before{ content:''; position:absolute; inset-inline:-4%; top:50%; height:5px; background:#c9ccd1; transform:translateY(-50%); border-radius:3px; } .ea-npetal{ position:relative; display:grid; place-items:center; text-align:center; min-height:118px; padding:18px 22px; color:#fff; font-weight:600; font-size:clamp(17px,2.1vw,22px); line-height:1.2; border-radius:6px; outline:2px solid #c9ccd1; outline-offset:3px; } .ea-npetal--magenta{ background:var(--bt-accent); } .ea-npetal--cyan{ background:var(--bt-cyan, #1fb6c9); } .ea-npetal:nth-child(1){ border-start-start-radius:26px; } .ea-npetal:nth-child(2){ border-start-end-radius:26px; } .ea-npetal:nth-child(3){ border-end-start-radius:26px; } .ea-npetal:nth-child(4){ border-end-end-radius:26px; } @media (max-width:560px){ .ea-npetals{ grid-template-columns:1fr; row-gap:12px; } .ea-npetals::before{ display:none; } .ea-npetal, .ea-npetal:nth-child(n){ border-radius:26px; min-height:88px; } } /* The four badges from the foot of the flyer. Each disc is drawn in CSS at 64px: a check on the accent (the flyer's own is the TÜV mark, which is not ours to print), brushed steel, a pink crystal cut on the same highlight as the birthstone gems, and gold. 4-up, 2-up on a phone. */ .ea-nbadges-wrap{ padding-block-start:0; } .ea-nbadges{ list-style:none; margin:0; padding:clamp(22px,3vw,34px) 0 0; border-block-start:1px solid var(--n100); display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px; } .ea-nbadge{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; } .ea-nbadge__disc{ display:grid; place-items:center; width:64px; height:64px; border-radius:50%; margin-block-end:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 10px rgba(23,24,34,.10); } /* The check is an inline SVG, not a rotated border: borders would have to be physical to keep the glyph the right way round under RTL, and this file does not use physical properties. */ .ea-nbadge__disc--check{ background-color:var(--bt-accent); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; background-size:32px 32px; } .ea-nbadge__disc--steel{ background: radial-gradient(70% 70% at 30% 26%, rgba(255,255,255,.95), transparent 55%), conic-gradient(from 210deg, #f4f5f7, #b9bcc3 22%, #eef0f3 40%, #a9adb5 58%, #f1f2f4 76%, #c1c4ca 90%, #f4f5f7); } .ea-nbadge__disc--crystal{ --gem:#e35f9a; background: radial-gradient(60% 55% at 34% 30%, rgba(255,255,255,.85), transparent 58%), conic-gradient(from 20deg, var(--gem), #f6b8d2 18%, var(--gem) 36%, #c93f7f 50%, #f9cadd 64%, var(--gem) 82%, #d24d8b 100%); } .ea-nbadge__disc--gold{ background: radial-gradient(70% 70% at 30% 26%, rgba(255,255,255,.75), transparent 55%), conic-gradient(from 200deg, #f6d878, #c9961c 24%, #f4d572 44%, #b8840f 62%, #f8e08e 80%, #d5a52a 92%, #f6d878); } .ea-nbadge__h{ font-size:14.5px; font-weight:700; color:var(--n900); line-height:1.25; } .ea-nbadge__p{ margin-top:4px; font-size:13px; color:var(--n600); line-height:1.4; } @media (max-width:720px){ .ea-nbadges{ grid-template-columns:repeat(2,1fr); } } /* ─── HTL: the size chooser ────────────────────────────────────────────────── One product in three lengths. A grid of three thumbnails would show the same box three times and leave the shopper reading 3 mm type on a photograph, so the length is set in the largest type on the card and the boxes' own colour coding carries across as the top rule. */ .ea-hsizes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; } .ea-hsize{ display:block; padding:24px 22px; background:#fff; color:inherit; text-decoration:none; border:1px solid var(--n100); border-radius:var(--r-lg); border-block-start:4px solid var(--boxc); transition:transform .18s, box-shadow .18s; } a.ea-hsize:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(23,24,34,.09); } .ea-hsize__len{ display:block; font-size:38px; font-weight:700; line-height:1; letter-spacing:-.02em; } .ea-hsize__len small{ font-size:16px; font-weight:600; margin-inline-start:3px; } .ea-hsize__g{ display:block; margin-top:8px; font-weight:600; color:var(--bt-ink); } .ea-hsize__dia{ display:block; margin-top:4px; font-size:13.5px; color:var(--n600); } .ea-hsize__price{ display:block; margin-top:12px; font-weight:600; } .ea-hnote{ margin-top:20px; padding:14px 16px; border-radius:var(--r-md); background:var(--n50); font-size:14px; color:var(--n700); max-width:74ch; } /* Fact chips beside the price. Deliberately not buttons and not links — they are reassurance at the moment of deciding, and anything clickable there competes with add-to-cart. */ .ea-chips{ list-style:none; margin:14px 0 18px; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .ea-chips li{ font-size:12.5px; font-weight:600; line-height:1; padding:7px 11px; border-radius:var(--r-full); color:var(--bt-ink); background:color-mix(in srgb, var(--bt-accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--bt-accent) 26%, transparent); } /* The birthstone chip leads the row on a Nina stud: a 12px gem in the stone's own colour, on the same highlight as the brand page's calendar, so the two read as the same object. It is the one chip that answers "is this the right one", where the rest answer "is this safe". */ .ea-chips__birth{ display:inline-flex; align-items:center; gap:7px; color:var(--n900); background:#fff; border-color:color-mix(in srgb, var(--bt-accent) 45%, transparent); } .ea-chips__gem{ flex:none; width:12px; height:12px; border-radius:50%; background:radial-gradient(60% 55% at 34% 30%, rgba(255,255,255,.85), transparent 58%), var(--gem); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } /* "Key features" list — manufacturer facts, one per line, with a small check glyph in the brand accent colour. Logical properties throughout so it flips cleanly in the Arabic (RTL) layout. */ .ea-keyfeatures-wrap{ margin:4px 0 18px; max-width:60ch; } .ea-keyfeatures__h{ margin:0 0 10px; font-size:15px; font-weight:700; color:var(--n900); } .ea-keyfeatures{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .ea-keyfeatures li{ position:relative; padding-inline-start:24px; font-size:14px; line-height:1.5; color:var(--n700); } .ea-keyfeatures li::before{ content:""; position:absolute; inset-inline-start:0; top:0.35em; width:14px; height:14px; border-radius:50%; background:var(--bt-accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 3.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 7.7a1 1 0 1 1 1.4-1.4L6.5 9.1l5.8-5.8a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/10px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.7 3.3a1 1 0 0 1 0 1.4l-6.5 6.5a1 1 0 0 1-1.4 0L2.3 7.7a1 1 0 1 1 1.4-1.4L6.5 9.1l5.8-5.8a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/10px no-repeat; } .ea-nstory .ea-facts{ margin-top:4px; } .ea-nstory__birth{ margin:-12px 0 18px; font-size:15px; } .ea-nstory__birth a{ display:inline-flex; align-items:center; gap:8px; color:var(--n900); font-weight:600; text-decoration:none; } .ea-nstory__birth a .ea-chips__gem{ width:14px; height:14px; } .ea-nstory__birth a:hover{ color:var(--bt-ink); text-decoration:underline; text-underline-offset:3px; } .ea-nstory__sizes{ margin-top:18px; font-size:14.5px; color:var(--n700); max-width:70ch; } /* ─── §13 The 1+1 offer ────────────────────────────────────────────────────── Wording is "1+1", not "offer" — the shelf-edge vernacular an Egyptian shopper already reads in a pharmacy, which says what the deal IS rather than announcing that a deal exists. The mechanic and the reasoning behind it live in inc/offers.php. */ .ea-offerbadge{ position:absolute; inset-block-start:10px; inset-inline-start:10px; z-index:2; background:var(--p600); color:#fff; font-size:12px; font-weight:700; letter-spacing:.02em; padding:5px 9px; border-radius:var(--r-full); pointer-events:none; } .ea-offerbadge--inline{ position:static; display:inline-block; margin-inline-end:8px; } .ea-offerbox{ margin:16px 0 18px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--p600) 26%, transparent); background:color-mix(in srgb, var(--p600) 6%, transparent); border-radius:var(--r-md); } .ea-offerbox__head{ margin:0; font-size:14.5px; font-weight:600; color:var(--n800); } .ea-offerbox__row{ list-style:none; display:flex; gap:8px; margin:12px 0 0; padding:0; flex-wrap:wrap; } .ea-offerbox__row li span{ display:block; width:52px; height:52px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--n100); overflow:hidden; } .ea-offerbox__row img{ width:100%; height:100%; object-fit:contain; } .ea-offerbox__note{ margin:10px 0 0; font-size:13px; color:var(--n600); } /* The chooser under the free line. Cards, never a