/* ================================================================= Apple-style PDP — design experiment 2026-05-14 Scoped to so the rest of the site is unaffected. Two accent variants: - default (.apple-pdp) → Mr Robot Violet #7C3AED - .apple-pdp.apple-blue → Apple Action #0066cc Revert via _design-backups/pre-apple-2026-05-14/ ================================================================= */ .apple-pdp { /* --- Tokens (mirrors DESIGN.md "Apple alpha") ------------------------- */ --apple-accent: #7C3AED; --apple-accent-focus: #6D28D9; --apple-accent-on-dk: #a78bfa; --apple-ink: #1d1d1f; --apple-ink-80: #333333; --apple-ink-48: #7a7a7a; --apple-divider: #f0f0f0; --apple-hairline: #e0e0e0; --apple-canvas: #ffffff; --apple-parchment: #f5f5f7; --apple-pearl: #fafafc; --apple-tile-1: #272729; --apple-product-shadow: 3px 5px 30px rgba(0, 0, 0, .22); --apple-r-sm: 8px; --apple-r-md: 11px; --apple-r-lg: 18px; --apple-r-pill: 9999px; --apple-s-xs: 8px; --apple-s-sm: 12px; --apple-s-md: 17px; --apple-s-lg: 24px; --apple-s-xl: 32px; --apple-s-xxl: 48px; --apple-s-section: 80px; --apple-font-display: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif; --apple-font-text: 'SF Pro Text', system-ui, -apple-system, BlinkMacSystemFont, Inter, sans-serif; --apple-font-ar: 'SF Arabic', system-ui, -apple-system, Tajawal, 'IBM Plex Sans Arabic', sans-serif; background: var(--apple-parchment); color: var(--apple-ink); } /* Accent swap for the blue variant. */ .apple-pdp.apple-blue { --apple-accent: #0066cc; --apple-accent-focus: #0071e3; --apple-accent-on-dk: #2997ff; } /* Type — only inside the PDP wrapper. */ .apple-pdp, .apple-pdp p, .apple-pdp li, .apple-pdp span { font-family: var(--apple-font-text); font-size: 17px; line-height: 1.47; letter-spacing: -0.374px; color: var(--apple-ink); } html[dir="rtl"] .apple-pdp, html[lang="ar"] .apple-pdp, .apple-pdp[dir="rtl"] * { font-family: var(--apple-font-ar); letter-spacing: 0; } /* --- Product hero section ------------------------------------------------- */ .apple-pdp .product-name { font-family: var(--apple-font-display); font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.07; letter-spacing: -0.5px; color: var(--apple-ink); margin: 0 0 var(--apple-s-md); } .apple-pdp .product-short-description, .apple-pdp .product-tagline { font-family: var(--apple-font-display); font-size: clamp(20px, 1.8vw, 28px); font-weight: 400; line-height: 1.21; color: var(--apple-ink-80); margin: 0 0 var(--apple-s-lg); } /* Big, calm price. */ .apple-pdp .product-price-section { margin-bottom: var(--apple-s-lg); } .apple-pdp .product-price .current-price { font-family: var(--apple-font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 600; color: var(--apple-ink); letter-spacing: -0.5px; } .apple-pdp .product-price .old-price { color: var(--apple-ink-48); text-decoration: line-through; font-weight: 400; margin-inline-end: var(--apple-s-sm); } /* --- Product image gallery — single product-shadow on the hero shot ------- */ .apple-pdp .product-images-section { background: transparent; } .apple-pdp .main-product-image, .apple-pdp .product-main-image-wrapper img, .apple-pdp .product-image { filter: drop-shadow(var(--apple-product-shadow)); background: transparent; } .apple-pdp .product-image-thumbnails .thumbnail-item { border-radius: var(--apple-r-sm); border: 1px solid var(--apple-hairline); overflow: hidden; transition: border-color .15s; } .apple-pdp .product-image-thumbnails .thumbnail-item.active { border-color: var(--apple-accent); } /* --- Buttons (two pill grammars) ----------------------------------------- */ .apple-pdp .buy-now-btn, .apple-pdp #buy-now-btn, .apple-pdp button.buy-now-btn { background: var(--apple-accent); color: #fff; border: none; border-radius: var(--apple-r-pill); padding: 14px 28px; font-family: var(--apple-font-text); font-size: 17px; font-weight: 400; letter-spacing: -0.374px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--apple-s-xs); transition: transform .12s ease; box-shadow: none; } .apple-pdp .buy-now-btn:hover { background: var(--apple-accent-focus); } .apple-pdp .buy-now-btn:active { transform: scale(0.95); } .apple-pdp .buy-now-btn:focus-visible { outline: 2px solid var(--apple-accent-focus); outline-offset: 3px; } /* Variant chips → Apple configurator-option-chip style */ .apple-pdp .color-variants, .apple-pdp .capacity-variants, .apple-pdp .extra-dim-variants { display: flex; flex-wrap: wrap; gap: var(--apple-s-sm); margin-bottom: var(--apple-s-lg); } .apple-pdp .color-variant-btn, .apple-pdp .capacity-variant-btn, .apple-pdp .extra-dim-variants button, .apple-pdp .extra-dim-variants .dim-chip { background: var(--apple-canvas); color: var(--apple-ink); border: 1px solid var(--apple-hairline); border-radius: var(--apple-r-pill); padding: 10px 16px; font-size: 14px; line-height: 1.2; letter-spacing: -0.224px; cursor: pointer; transition: border-color .15s, transform .12s; } .apple-pdp .color-variant-btn.active, .apple-pdp .capacity-variant-btn.active, .apple-pdp .extra-dim-variants button.active, .apple-pdp .extra-dim-variants .dim-chip.active { border: 2px solid var(--apple-accent-focus); padding: 9px 15px; /* compensate for thicker border */ } .apple-pdp .color-variant-btn:active, .apple-pdp .capacity-variant-btn:active { transform: scale(0.97); } /* Section heading style used by variant labels. */ .apple-pdp .product-option-label, .apple-pdp .variant-section-title { font-family: var(--apple-font-text); font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--apple-ink); margin-bottom: var(--apple-s-xs); text-transform: none; } /* --- Description / spec tile region (alternating surface) ---------------- */ .apple-pdp .product-tabs-section { background: var(--apple-canvas); border-radius: 0; border: none; box-shadow: none; margin-top: var(--apple-s-xxl); padding: var(--apple-s-section) 0; } .apple-pdp .product-tabs-header { border-bottom: 1px solid var(--apple-hairline); margin-bottom: var(--apple-s-lg); } .apple-pdp .product-tab-btn { background: transparent; border: none; color: var(--apple-ink-48); font-family: var(--apple-font-text); font-size: 17px; font-weight: 400; padding: var(--apple-s-sm) var(--apple-s-md); cursor: pointer; position: relative; } .apple-pdp .product-tab-btn.active { color: var(--apple-ink); font-weight: 600; } .apple-pdp .product-tab-btn.active::after { content: ''; position: absolute; left: var(--apple-s-md); right: var(--apple-s-md); bottom: -1px; height: 2px; background: var(--apple-accent); } /* Specs as a dense link list (the 2.41 line-height "footer" pattern). */ .apple-pdp .specs-grid, .apple-pdp .specs-list, .apple-pdp .product-specs { column-gap: var(--apple-s-xxl); } .apple-pdp .spec-row, .apple-pdp .specs-list li { border: none !important; padding: 6px 0 !important; line-height: 1.6; color: var(--apple-ink); } .apple-pdp .spec-label { color: var(--apple-ink-48); font-weight: 400; } .apple-pdp .spec-value { color: var(--apple-ink); font-weight: 500; } /* Description body. */ .apple-pdp .product-description, .apple-pdp .product-overview { font-family: var(--apple-font-text); font-size: 17px; line-height: 1.47; color: var(--apple-ink-80); } /* --- Gift items: gentle pearl card --------------------------------------- */ .apple-pdp .gift-items-list { gap: var(--apple-s-sm); } .apple-pdp .gift-item-row { background: var(--apple-pearl); border: 1px solid var(--apple-hairline); border-radius: var(--apple-r-md); box-shadow: none !important; } /* --- Related products at the bottom — Apple "store-utility-card" --------- */ .apple-pdp .related-products-section .product-card, .apple-pdp .related-products-section .category-product-card { background: var(--apple-canvas); border: 1px solid var(--apple-hairline); border-radius: var(--apple-r-lg); box-shadow: none; } .apple-pdp .related-products-section .product-name { font-size: 17px; font-weight: 600; letter-spacing: -0.374px; } .apple-pdp .related-products-section .current-price { color: var(--apple-ink) !important; font-size: 17px !important; font-weight: 400 !important; } /* --- Links pick up the accent. ------------------------------------------- */ .apple-pdp a:not(.buy-now-btn):not(.add-to-cart-btn) { color: var(--apple-accent); text-decoration: none; } .apple-pdp a:not(.buy-now-btn):not(.add-to-cart-btn):hover { text-decoration: underline; } /* --- Theme toggle widget (top-right, persistent) ------------------------- */ #apple-design-toggle { position: fixed; top: 90px; right: 18px; z-index: 9997; display: flex; gap: 4px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--apple-r-pill, 9999px); padding: 4px; font-family: 'SF Pro Text', system-ui, sans-serif; font-size: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); } #apple-design-toggle button { border: none; background: transparent; color: #333; padding: 8px 12px; border-radius: 9999px; cursor: pointer; line-height: 1; transition: background .15s, color .15s; white-space: nowrap; } #apple-design-toggle button[aria-pressed="true"] { background: #1d1d1f; color: #fff; } [dir="rtl"] #apple-design-toggle { right: auto; left: 18px; } @media (max-width: 640px) { #apple-design-toggle { top: auto; bottom: 150px; right: 12px; font-size: 11px; } [dir="rtl"] #apple-design-toggle { right: auto; left: 12px; } } /* --- Misc cleanup: kill shadows on chrome inside .apple-pdp -------------- */ .apple-pdp .product-card, .apple-pdp .info-section, .apple-pdp .product-tabs-section, .apple-pdp .product-images-section { box-shadow: none !important; } /* Preserve product image natural drop-shadow only on the main shot. */ .apple-pdp .product-image-thumbnails img { filter: none !important; }