/** Shopify CDN: Minification failed Line 1544:79 Expected "]" to go with "[" Line 1544:80 Unexpected "]" **/ /* RAVEN LOCK-3 */ @import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo+Narrow:wght@500;600;700&display=swap"); @font-face { font-family: "Raven Narrow A"; src: local("Arial Narrow"), local("ArialNarrow"); font-weight: 1 549; size-adjust: 100%; ascent-override: 104.0%; descent-override: 31.0%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Narrow A"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 550 1000; size-adjust: 100%; ascent-override: 104.0%; descent-override: 31.0%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Narrow B"; src: local("Arial"), local("ArialMT"); font-weight: 1 549; size-adjust: 82%; ascent-override: 126.83%; descent-override: 37.8%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Narrow B"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 1000; size-adjust: 81.5%; ascent-override: 127.61%; descent-override: 38.04%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Narrow C"; src: local("Roboto"), local("Roboto-Regular"); font-weight: 1 549; size-adjust: 86.5%; ascent-override: 120.23%; descent-override: 35.84%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Narrow C"; src: local("Roboto Bold"), local("Roboto-Bold"); font-weight: 550 1000; size-adjust: 87.5%; ascent-override: 118.86%; descent-override: 35.43%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Black A"; src: local("Arial Black"), local("ArialBlack"), local("Arial-Black"); font-weight: 1 1000; size-adjust: 100%; ascent-override: 104.0%; descent-override: 31.0%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Black B"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 1 1000; size-adjust: 113%; ascent-override: 92.04%; descent-override: 27.43%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } @font-face { font-family: "Raven Black C"; src: local("Roboto Black"), local("Roboto-Black"); font-weight: 1 1000; size-adjust: 121%; ascent-override: 85.95%; descent-override: 25.62%; line-gap-override: 0%; unicode-range: U+0000-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; } :root { --raven-g1-bg: #060912; --raven-g1-ink: #e9eef7; --raven-g1-muted: #8b97ae; --raven-feather-icon: url(/cdn/shop/files/feather-icon-side.png?v=1789733648); --raven-hero-base: clamp(96px, 11vw, 148px); } body { background-color: var(--raven-g1-bg) !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; animation: raven-gate1-grid-light 18s ease-in-out infinite alternate !important; } @keyframes raven-gate1-grid-light { 0% { background-position: 0 0, 0 0, -45% 0; } 100% { background-position: 0 0, 0 0, 145% 0; } } #MainContent, body.template-index #MainContent, body.template-collection #MainContent, body.template-list-collections #MainContent, body.template-page #MainContent { background: transparent !important; } #MainContent .shopify-section, #MainContent .section, #MainContent .section-background, #MainContent [class*="color-custom"], .shopify-section-group-footer-group .section-background { background: transparent !important; background-color: transparent !important; background-image: none !important; } #MainContent .section-background, .shopify-section-group-footer-group .section-background { opacity: 0 !important; visibility: hidden !important; } #MainContent [class*="color-custom"] { --color-background: transparent !important; --color-background-rgb: 6, 9, 18 !important; } /* Header = site atmosphere */ #header-group, #header-component, #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .section-background, #header-group .section-background, #header-component [class*="color-custom"], header.header-section, header.shopify-section, .shopify-section-group-header-group, .shopify-section-group-header-group.header-section, .header-section { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } #header-group .section-background, header.header-section .section-background { opacity: 0 !important; visibility: hidden !important; } #header-group, #header-component { position: relative; z-index: 70 !important; } .raven-site-feathers { position: fixed !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; overflow: hidden !important; opacity: 0.7 !important; } .raven-site-feathers video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 40% !important; mix-blend-mode: screen !important; opacity: 0.55 !important; } /* Opening feathers — full hero frame; beat contain CSS */ .raven-opening-feathers { position: absolute !important; inset: 0 !important; z-index: 5 !important; pointer-events: none !important; overflow: hidden !important; width: 100% !important; height: 100% !important; } .raven-opening-feathers video, [id*="hero_jVaWmY"] .raven-opening-feathers video, [id*="hero_jVaWmY"] video.raven-opening-feathers__vid { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; object-fit: cover !important; object-position: 50% 40% !important; mix-blend-mode: screen !important; opacity: 0.7 !important; display: block !important; } #MainContent .hero, [id*="hero_jVaWmY"] .hero, [id*="hero_jVaWmY"] .hero__container { position: relative !important; } #MainContent, .raven-demo-home, .shopify-section-group-footer-group { position: relative; z-index: 2 !important; } .raven-feather-icon { display: block !important; width: 140px !important; height: 58px !important; margin: 10px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-feather-icon--sm { width: 88px !important; height: 36px !important; margin: 8px auto !important; } .raven-demo-home { color: var(--raven-g1-ink); font-family: "Archivo Narrow", "Raven Narrow A", "Raven Narrow B", "Raven Narrow C", sans-serif; padding: 8px 16px 48px; } .raven-demo-home .section-block { max-width: 1280px; margin: 0 auto 48px; } .raven-demo-home .kicker { text-align: center; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; color: var(--raven-g1-muted); margin-bottom: 6px; } .raven-demo-home h2 { text-align: center; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; font-size: clamp(1.2rem, 3vw, 1.75rem); margin: 0; } .raven-demo-home .sub { text-align: center; color: var(--raven-g1-muted); max-width: 36rem; margin: 10px auto 0; line-height: 1.55; } .raven-title-with-feather { text-align: center; } .raven-keyline { text-align: center; margin: 18px auto 0; max-width: 40rem; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; font-size: clamp(0.95rem, 2.2vw, 1.35rem); line-height: 1.35; } .raven-keyline span { display: block; } /* Hero pyramid */ .raven-hero-pyramid { margin-top: 12px; } .raven-hero-pyramid__row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 0.8vw, 10px); flex-wrap: nowrap; } .raven-hero-cube { flex: 0 0 auto; } .raven-hero-cube.sz-100 { width: var(--raven-hero-base); } .raven-hero-cube.sz-90 { width: calc(var(--raven-hero-base) * 0.9); } .raven-hero-cube.sz-80 { width: calc(var(--raven-hero-base) * 0.8); } .raven-hero-cube.sz-60 { width: calc(var(--raven-hero-base) * 0.6); } .raven-hero-cube .raven-cat-cube { display: block; text-decoration: none; color: inherit; } .raven-hero-cube .raven-cat-cube__stage { aspect-ratio: 3/4; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(110,110,110,0.4); } .raven-hero-pyramid__labels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 720px; margin: 14px auto 0; text-align: center; } .raven-hero-pyramid__quartet .drop { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--raven-g1-muted); } .raven-hero-pyramid__quartet .name { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem; } @media (max-width: 749px) { :root { --raven-hero-base: clamp(56px, 18vw, 88px); } .raven-hero-pyramid__row { overflow-x: auto; justify-content: flex-start; padding: 0 8px; } } /* Drop rows — cover video + equal category cubes Override contain-mobile `.raven-lock3-drops { display: none !important }` */ .raven-demo-home .raven-lock3-drops, .raven-lock3-drops { display: flex !important; flex-direction: column !important; gap: 28px !important; width: 100% !important; margin: 4px 0 28px !important; visibility: visible !important; } .raven-demo-home .raven-lock3-drop, .raven-lock3-drop { display: grid !important; grid-template-columns: minmax(140px, 1fr) minmax(0, 5fr); gap: 10px; align-items: stretch; width: 100% !important; margin: 0 !important; } @media (max-width: 749px) { .raven-lock3-drop { grid-template-columns: 1fr; } } .raven-lock3-drop__cover { position: relative; display: block; text-decoration: none; color: inherit; aspect-ratio: 3/4; overflow: hidden; background: #000; border: 1px solid rgba(110,110,110,0.45); } .raven-lock3-drop__cover video { width: 100%; height: 100%; object-fit: cover; display: block; } .raven-lock3-drop__cover-lbl { position: absolute; inset: auto 0 0 0; padding: 10px 8px; background: linear-gradient(transparent, rgba(6,9,18,0.92)); font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .raven-lock3-drop__cubes { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; align-items: stretch; } .raven-lock3-drop__cubes .raven-cat-cube:not(:has(img)) { display: none !important; } @media (max-width: 749px) { .raven-lock3-drop__cubes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .raven-lock3-drop__cubes .raven-cat-cube { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; } .raven-lock3-drop__cubes .raven-cat-cube__stage { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(110,110,110,0.4); } .raven-cat-cube__ph { width: 100%; height: 100%; background: #111; } .raven-cat-cube .car, .raven-hero-cube .car { position: relative; width: 100%; height: 100%; } .raven-cat-cube .slide, .raven-hero-cube .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; } .raven-cat-cube .slide.is-on, .raven-hero-cube .slide.is-on { opacity: 1; } .raven-cat-cube .slide img, .raven-hero-cube .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .raven-lock3-drop__shop { grid-column: 1 / -1; text-align: center; margin-top: 4px; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem; color: var(--raven-g1-ink); text-decoration: underline; text-underline-offset: 4px; } /* Looks / teasers / faq (keep) */ .raven-look-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; max-width: 1100px; margin: 18px auto 0; } @media (max-width: 749px) { .raven-look-grid { grid-template-columns: 1fr; } } .raven-look-entry { display: block; text-decoration: none; color: inherit; border: 1px solid rgba(110,110,110,0.4); background: rgba(0,0,0,0.25); } .raven-look-entry .car { position: relative; aspect-ratio: 4/5; background: #0a0a0a; } .raven-look-entry .slide { position: absolute; inset: 0; opacity: 0; } .raven-look-entry .slide.is-on { opacity: 1; } .raven-look-entry .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .raven-look-entry .body { padding: 12px; } .raven-look-entry .body strong { display: block; letter-spacing: 0.12em; font-size: 0.85rem; } .raven-look-entry .body span { display: block; color: var(--raven-g1-muted); font-size: 0.8rem; margin-top: 4px; } .raven-look-entry .lbl { display: none !important; } .raven-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto; } @media (max-width: 749px) { .raven-teaser-grid { grid-template-columns: 1fr; } } .raven-teaser-card { display: block; text-decoration: none; color: inherit; border: 1px solid rgba(110,110,110,0.4); background: #000; } .raven-teaser-card video { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .raven-teaser-card .info { padding: 12px 14px 16px; text-align: left; } .raven-teaser-card .info strong { display: block; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; font-weight: 400; } .raven-teaser-card .cta { margin-top: 10px; letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--raven-g1-muted); } .raven-faq-list { list-style: none; padding: 0; max-width: 720px; margin: 16px auto 0; } .raven-faq-q { width: 100%; display: flex; gap: 10px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(110,110,110,0.35); color: inherit; text-align: left; padding: 12px 0; cursor: pointer; font: inherit; letter-spacing: 0.06em; text-transform: uppercase; } .raven-faq-q .plus::before { content: "+"; display: grid; place-items: center; width: 1.2rem; } .raven-faq-item.is-open .plus::before { content: "–"; } .raven-faq-a { display: none; padding: 0 0 12px 1.8rem; color: var(--raven-g1-muted); line-height: 1.5; } .raven-faq-item.is-open .raven-faq-a { display: block; } .cta-row { text-align: center; margin-top: 18px; } .button, .raven-demo-home a.button { display: inline-block; padding: 12px 22px; background: #e9eef7; color: #060912 !important; text-decoration: none; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; } .button-secondary { display: inline-block; padding: 11px 20px; border: 1px solid rgba(233,238,247,0.55); color: #e9eef7; text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; } .raven-complete-look { text-align: center; padding: 18px 12px 8px; } .raven-complete-look__title { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; font-size: clamp(1rem, 2.5vw, 1.4rem); } .raven-complete-look__sub { color: var(--raven-g1-muted); margin: 8px auto; line-height: 1.45; } .raven-complete-look__row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; } .raven-complete-look__row a { display: inline-block; padding: 10px 14px; border: 1px solid rgba(233,238,247,0.45); text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; color: #e9eef7; } .raven-complete-look__row a.is-primary { background: #e9eef7; color: #060912; border-color: #e9eef7; } .raven-text-feather { display: block; width: 88px; height: 36px; margin: 14px auto; background: var(--raven-feather-icon) center / contain no-repeat; opacity: 0.9; } .raven-drops-feather-injected { display: block; margin: 10px auto; } #raven-footer-join.raven-footer-join { --rfj-bg: url(/cdn/shop/files/preview_images/2f629c6da13046cebe25bd5f3c64c90f.thumbnail.0000000000.jpg?v=1789719606) !important; } .raven-footer-join__title, .raven-footer-join__sub { color: #fff !important; } .raven-footer-join__form { position: absolute !important; left: 50% !important; bottom: 5% !important; transform: translateX(-50%) !important; width: min(500px, 92vw) !important; z-index: 3 !important; } /* LOCK11 neutralized: was hiding ALL bundles h1 including title */ #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section { display: none !important; } /* Hide Horizon collections list when raven rows present */ body.template-list-collections #MainContent .shopify-section:has(.raven-lock3-drops) ~ .shopify-section, body.template-list-collections #MainContent .shopify-section:has(.collection-list) { /* keep only our section — hide legacy list if both exist via order */ } body.template-list-collections .ui-test-collection-list { display: none !important; } @media (prefers-reduced-motion: reduce) { .raven-site-feathers, .raven-opening-feathers { display: none !important; } body { animation: none !important; } } /* ===== LOCK-4 A–N ===== */ /* A — outline buttons everywhere */ .button, .raven-demo-home a.button, a.button, button.button, .button-primary, .shopify-payment-button__button--unbranded, .raven-complete-look__row a, .raven-complete-look__row a.is-primary, .raven-drop-filter__btn, .raven-drop-filter__btn.is-active, #MainContent .button, #MainContent a.button { background: transparent !important; background-color: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233,238,247,0.7) !important; box-shadow: none !important; } .raven-drop-filter__btn.is-active { background: transparent !important; color: #e9eef7 !important; border-color: #e9eef7 !important; } .button-secondary, a.button-secondary { background: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233,238,247,0.55) !important; } /* D — quartet labels span cube widths */ .raven-hero-pyramid__labels { display: flex !important; justify-content: center !important; align-items: flex-start !important; gap: clamp(14px, 2.2vw, 36px) !important; max-width: none !important; width: 100% !important; margin: 16px auto 0 !important; padding: 0 !important; text-align: center !important; } .raven-hero-pyramid__quartet { flex: 0 0 auto !important; width: calc(var(--raven-hero-base) * 3.3 + 3 * clamp(4px, 0.8vw, 10px)) !important; text-align: center !important; } .raven-hero-pyramid__quartet .raven-feather-icon { width: 56px !important; height: 28px !important; margin: 0 auto 8px !important; display: block !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-hero-pyramid__quartet .drop { font-size: clamp(0.78rem, 1.4vw, 0.95rem) !important; letter-spacing: 0.22em !important; color: var(--raven-g1-muted) !important; } .raven-hero-pyramid__quartet .name { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; font-size: clamp(0.95rem, 1.8vw, 1.2rem) !important; letter-spacing: 0.16em !important; } /* L */ .raven-looks-headline { text-align: center !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: clamp(1.15rem, 3vw, 1.7rem) !important; font-weight: 400 !important; color: #e9eef7 !important; margin: 0 0 10px !important; } #ravenLooks > .raven-feather-icon { display: block !important; width: 88px !important; height: 36px !important; margin: 0 auto 12px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } /* F teasers center */ .raven-teaser-card .info { text-align: center !important; } /* E track carousel */ [data-raven-carousel] .car, .raven-cat-cube__stage .car, .raven-look-entry .car { position: relative !important; overflow: hidden !important; width: 100% !important; height: 100% !important; } .raven-car-track { display: flex !important; flex-direction: row !important; height: 100% !important; width: 100% !important; will-change: transform; } .raven-car-track .slide { position: relative !important; flex: 0 0 100% !important; width: 100% !important; height: 100% !important; opacity: 1 !important; inset: auto !important; } .raven-car-track .slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* K — keep 5 equal columns even if one empty briefly */ .raven-lock3-drop__cubes { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .raven-lock3-drop__cubes .raven-cat-cube:not(:has(img)) { display: flex !important; } /* I — kill residual header tint */ #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, header.header-section, header.shopify-section { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* H — FAQ answer links = paragraph size */ body.template-page #MainContent .rte a, body.template-page #MainContent details a, body.template-page #MainContent .accordion a, #MainContent .raven-faq-page a, #MainContent details.details a, #MainContent .faq a, #MainContent a[href^="mailto:"], #MainContent .rte a[href*="policy"] { font-size: 0.9rem !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: underline !important; text-underline-offset: 2px !important; } /* G — hide feathers injected between FAQ details */ #MainContent details + .raven-text-feather, #MainContent details + span.raven-feather-icon, #MainContent .accordion details + .raven-text-feather { display: none !important; } /* J — EN = ILS triggers */ #header-component .raven-l10n .dropdown-localization__button, #header-component header-actions .dropdown-localization__button, #header-component .raven-l10n--language .dropdown-localization__button, #header-component .raven-l10n--location .dropdown-localization__button { min-width: 64px !important; justify-content: center !important; text-align: center !important; padding-inline: 0.55rem !important; border: 1px solid rgba(233,238,247,0.35) !important; box-sizing: border-box !important; } /* M — footer parity (white stack like home) */ #raven-footer-join.raven-footer-join { --rfj-bg: url(/cdn/shop/files/preview_images/2f629c6da13046cebe25bd5f3c64c90f.thumbnail.0000000000.jpg?v=1789719606) !important; } .raven-footer-join__title, .raven-footer-join__sub { color: #fff !important; } /* Contact CTAs outline */ .raven-about-ctas .button, .raven-about-ctas .button-secondary, .raven-contact-ctas .button, .raven-contact-ctas a { background: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233,238,247,0.7) !important; } /* LOCK4b — hide Contact template form; Products look CTAs outline */ #MainContent:has(.raven-contact-email) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.contact-form) { display: none !important; } a[href*="/pages/full-look"], a[href*="/pages/top-bottom"], a[href*="/pages/easy-start"], .raven-complete-look__row a, .raven-complete-look__row a.is-primary, #MainContent a.is-primary { background: transparent !important; background-color: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233,238,247,0.7) !important; } /* LOCK4c FAQ link size beat wave11 clamp */ #MainContent a, #MainContent .rte a, #MainContent details a, #MainContent details .rte a, #MainContent a[href^="mailto:"], #MainContent a[href*="policies"], #MainContent a[href*="policy"] { font-size: 0.9rem !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important; } /* LOCK10 neutralized feather hide */ .raven-faq-page .raven-text-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 12px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } /* LOCK4d contact+faq */ #MainContent .shopify-section:has(form.contact-form), #MainContent .shopify-section:has(.contact-form), #MainContent form.contact-form, #MainContent .contact-form, #MainContent .contact, section:has(> .contact-form), .shopify-section--contact-form { display: none !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* neutralized by LOCK5 */ .raven-faq-page .raven-about-logo { max-width: 220px !important; width: 220px !important; height: auto !important; margin: 0 auto 12px !important; display: block !important; } .raven-faq-page .raven-text-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 12px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } /* ===== LOCK-5 PATH FIX ===== */ /* === 1.1/1.2 restore About+Contact logo (undo LOCK4d global hide) === */ #MainContent .raven-about-hero { display: block !important; } body.template-page:has(.raven-faq-page) #MainContent .raven-about-hero { display: none !important; } #MainContent .raven-about-logo { display: block !important; max-width: min(860px, 72vw) !important; width: min(860px, 72vw) !important; height: auto !important; margin: 0 auto !important; } body.template-page:has(.raven-about-copy) .raven-text-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 14px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } /* === 1.3 FAQ title center + large logo === */ body.template-page:has(.raven-faq), body.template-page:has(.raven-faq-page) { /* page title */ } body.template-page:has(.raven-faq-page) #MainContent .main-page-title, body.template-page:has(.raven-faq-page) #MainContent h1, body.template-page:has(.raven-faq-page) #MainContent .page-title, body.template-page:has(.raven-faq) #MainContent .main-page-title, body.template-page:has(.raven-faq) #MainContent h1.main-page-title, body.template-page:has(.raven-faq-page) .section .text-block h1, body.template-page:has(.raven-faq-page) .section .text-block h2 { text-align: center !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .raven-faq-page { text-align: center !important; max-width: none !important; } .raven-faq-page .raven-about-logo { max-width: min(860px, 72vw) !important; width: min(860px, 72vw) !important; height: auto !important; margin: 0 auto 12px !important; display: block !important; } /* === 1.4 Footer full-bleed cover === */ .shopify-section-group-footer-group, .shopify-section-group-footer-group > .shopify-section, .raven-footer-join-section, #raven-footer-join.raven-footer-join { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #raven-footer-join.raven-footer-join { --rfj-bg: url(/cdn/shop/files/preview_images/2f629c6da13046cebe25bd5f3c64c90f.thumbnail.0000000000.jpg?v=1789719606) !important; } #raven-footer-join .raven-footer-join__frame { width: 100% !important; max-width: none !important; background-size: cover !important; background-position: center 40% !important; background-repeat: no-repeat !important; background-color: #060912 !important; min-height: min(70vh, 640px) !important; aspect-ratio: auto !important; } .raven-footer-join__title, .raven-footer-join__sub { color: #fff !important; } /* === 2 Header = site grid === */ #header-group, #header-component, header.header-section, .shopify-section-group-header-group { background-color: #050505 !important; background-image: linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; animation: raven-grid-light 18s ease-in-out infinite !important; } #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .header, #header-component .header__columns, #header-group .section-background, header.header-section .section-background { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* === 3 Pyramid 100-90-80-70 + larger + quartet edge-to-edge === */ :root { --raven-hero-base: clamp(118px, 13.5vw, 178px) !important; } .raven-hero-cube.sz-100 { width: var(--raven-hero-base) !important; } .raven-hero-cube.sz-90 { width: calc(var(--raven-hero-base) * 0.9) !important; } .raven-hero-cube.sz-80 { width: calc(var(--raven-hero-base) * 0.8) !important; } .raven-hero-cube.sz-70, .raven-hero-cube.sz-60 { width: calc(var(--raven-hero-base) * 0.7) !important; } .raven-hero-pyramid__labels { display: flex !important; justify-content: center !important; align-items: flex-start !important; gap: clamp(4px, 0.8vw, 10px) !important; max-width: none !important; width: auto !important; margin: 16px auto 0 !important; } .raven-hero-pyramid__quartet { flex: 0 0 auto !important; /* 0.7+0.8+0.9+1.0 = 3.4 bases + 3 gaps */ width: calc(var(--raven-hero-base) * 3.4 + 3 * clamp(4px, 0.8vw, 10px)) !important; max-width: none !important; text-align: center !important; box-sizing: border-box !important; } .raven-hero-pyramid__quartet .raven-feather-icon { display: block !important; width: 100% !important; max-width: 100% !important; height: clamp(28px, 3.2vw, 44px) !important; margin: 0 auto 10px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-hero-pyramid__quartet .drop { font-size: clamp(0.95rem, 1.8vw, 1.25rem) !important; letter-spacing: 0.22em !important; width: 100% !important; } .raven-hero-pyramid__quartet .name { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; font-size: clamp(1.15rem, 2.4vw, 1.65rem) !important; letter-spacing: 0.16em !important; width: 100% !important; } @media (max-width: 749px) { :root { --raven-hero-base: clamp(64px, 20vw, 96px) !important; } } /* === 4 Drop rows: title → feather → cubes === */ .raven-lock3-drop { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .raven-lock3-drop__cover { display: none !important; /* cover moves into row as lazy cube */ } .raven-lock3-drop__shop { order: -2 !important; display: block !important; text-align: center !important; width: 100% !important; margin: 0 !important; padding: 8px 0 0 !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: clamp(1rem, 2.2vw, 1.45rem) !important; color: #e9eef7 !important; text-decoration: none !important; border: 0 !important; background: transparent !important; } .raven-lock3-drop > .raven-feather-icon, .raven-lock3-drop__feather { order: -1 !important; display: block !important; width: 100% !important; height: clamp(28px, 3vw, 42px) !important; margin: 0 auto 4px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-lock3-drop__cubes { order: 0 !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: clamp(4px, 0.8vw, 10px) !important; } .raven-lock3-drop__cubes .raven-cat-cube__stage, .raven-lock3-drop__cubes .raven-cat-cube__ph { background: transparent !important; background-color: transparent !important; } .raven-lock3-drop__cover-cube .raven-cat-cube__stage { background: #000 !important; position: relative !important; } /* beat LOCK4 5-col rule — cover + 5 cats */ .raven-demo-home .raven-lock3-drop__cubes, .raven-lock3-drop__cubes { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .raven-lock3-drop__cover-cube video { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .raven-lock3-drop__cover-cube .raven-lock3-drop__cover-lbl { position: absolute !important; left: 0; right: 0; bottom: 0; padding: 10px 6px !important; text-align: center !important; font-size: clamp(0.55rem, 1vw, 0.75rem) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #fff !important; background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important; } @media (max-width: 749px) { .raven-lock3-drop__cubes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Collections +20% */ [data-raven-collections-drops] .raven-lock3-drops { max-width: 1536px !important; width: min(1536px, 100%) !important; margin-left: auto !important; margin-right: auto !important; } /* === 5 Home FAQ plus on the RIGHT (match FAQ page) === */ .raven-faq-q { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; } .raven-faq-q .plus { order: 2 !important; flex: 0 0 auto !important; margin-inline-start: auto !important; } .raven-faq-q > span:not(.plus) { order: 1 !important; flex: 1 1 auto !important; text-align: left !important; } /* Teasers center */ .raven-teaser-card, .raven-teaser-card .info, .raven-teaser-grid { text-align: center !important; } /* Outline buttons */ .button, a.button, .button-primary, .raven-complete-look__row a, .raven-complete-look__row a.is-primary, .raven-drop-filter__btn, .raven-drop-filter__btn.is-active, .raven-about-ctas a, .raven-contact-ctas a { background: transparent !important; background-color: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233,238,247,0.7) !important; border-radius: 0 !important; } /* Contact form stay hidden */ #MainContent .shopify-section:has(form.contact-form), #MainContent .shopify-section:has(.contact-form), #MainContent form.contact-form { display: none !important; height: 0 !important; overflow: hidden !important; } /* LOCK5b feather gap under SHOP title */ .raven-lock3-drop > .raven-feather-icon, .raven-lock3-drop__feather { flex: 0 0 auto !important; min-height: 36px !important; height: 36px !important; margin: 4px 0 14px !important; position: relative !important; z-index: 1 !important; } .raven-lock3-drop__cubes { margin-top: 0 !important; } /* LOCK5c FAQ page title truly centered */ body.template-page:has(.raven-faq-page) #MainContent .text-block, body.template-page:has(.raven-faq-page) #MainContent .text-block.h1, body.template-page:has(.raven-faq-page) #MainContent h1, body.template-page:has(.raven-faq) #MainContent .text-block, body.template-page:has(.raven-faq) #MainContent h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: none !important; } /* LOCK5d FAQ title center — beat theme text-block */ #MainContent:has(.raven-faq-page) .text-block, #MainContent:has(.raven-faq-page) .text-block.h1, #MainContent:has(.raven-faq-page) .text-block--AYlh6OEFDWGttMnoyQ__heading, #MainContent:has(.raven-faq-page) h1, #MainContent:has(.raven-faq) .text-block, #MainContent:has(.raven-faq) h1, #MainContent:has(.raven-faq-page) .section .spacing-style { text-align: center !important; } #MainContent:has(.raven-faq-page) .text-block * { text-align: center !important; } /* ===== LOCK-6 FIX SHOT ===== */ /* ========== 1) HEADER = site atmosphere (transparent → body grid + feathers) ========== */ #header-group, #header-component, header.header-section, .shopify-section-group-header-group, .shopify-section-group-header-group.header-section, #header-component .header, #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .header__columns, #header-component .section-background, #header-group .section-background, #header-component [class*="color-custom"], #header-group [class*="color-custom"], sticky-header, #header-component sticky-header { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; --color-background: transparent !important; --color-background-rgb: 6, 9, 18 !important; } #header-group .section-background, header.header-section .section-background { opacity: 0 !important; visibility: hidden !important; } /* body grid must be the continuous site bg (blue-black) */ body { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; } .raven-site-feathers { position: fixed !important; inset: 0 !important; z-index: 2 !important; pointer-events: none !important; opacity: 0.7 !important; } #header-group, #header-component { position: relative !important; z-index: 70 !important; } /* ========== 2) L10N panels — language width like currency + opaque bg ========== */ dropdown-localization-component.raven-l10n--language { --width: min(360px, calc(100vw - 16px)) !important; } dropdown-localization-component.raven-l10n--language localization-form-component, dropdown-localization-component.raven-l10n--language .localization-wrapper, dropdown-localization-component.raven-l10n--language .localization-wrapper.right-bound, dropdown-localization-component.raven-l10n--language .localization-wrapper.left-bound { min-width: min(360px, calc(100vw - 16px)) !important; width: min(360px, calc(100vw - 16px)) !important; max-width: calc(100vw - 16px) !important; } dropdown-localization-component.raven-l10n--language .localization-wrapper, dropdown-localization-component.raven-l10n--location .localization-wrapper, dropdown-localization-component.raven-l10n--language .localization-wrapper.right-bound, dropdown-localization-component.raven-l10n--language .localization-wrapper.left-bound, dropdown-localization-component.raven-l10n--location .localization-wrapper.right-bound, dropdown-localization-component.raven-l10n--location .localization-wrapper.left-bound, dropdown-localization-component.raven-l10n--language localization-form-component, dropdown-localization-component.raven-l10n--location localization-form-component, dropdown-localization-component.raven-l10n--language .localization-form, dropdown-localization-component.raven-l10n--location .localization-form, dropdown-localization-component.raven-l10n--language .language-selector, dropdown-localization-component.raven-l10n--location .country-selector, .raven-lang-list { background: #050505 !important; background-color: #050505 !important; background-image: none !important; opacity: 1 !important; } .raven-lang-list { width: 100% !important; min-width: 100% !important; } .raven-lang-list button { width: 100% !important; box-sizing: border-box !important; background: #050505 !important; } .raven-lang-list button[aria-current="true"] { background: #1a3a8a !important; } @media screen and (min-width: 750px) { dropdown-localization-component.raven-l10n--location .localization-wrapper { min-width: min(360px, calc(100vw - 16px)) !important; } } /* ========== 3) About — logo gap + feathers + show WHY ========== */ #MainContent .raven-about-hero { display: block !important; text-align: center !important; margin: 0 auto !important; padding: 0 16px !important; } #MainContent .raven-about-logo, .raven-about-logo { display: block !important; width: min(860px, 72vw) !important; max-width: min(900px, 100%) !important; height: auto !important; /* PNG transparent pad — pull title↔glyph tight */ margin: 12px auto 20px !important; /* LOCK11 no-overlap */ filter: none !important; } body.template-page:has(.raven-about-copy) .raven-text-feather, #MainContent .raven-text-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 14px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; opacity: 0.9 !important; } /* Undo LOCK3/4 sibling hide — restore WHY + Contact form/social */ #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section { display: block !important; } #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section:has(.ui-test-collection-list), #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section:has(.collection-list) { display: none !important; } /* Undo LOCK4b contact form hide */ #MainContent:has(.raven-contact-email) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-email) .shopify-section:has(.social-icons__wrapper), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.social-icons__wrapper) { display: block !important; } /* ========== 4/5) FAQ — centered logo, tight under title ========== */ #MainContent:has(.raven-faq) .raven-faq-page, #MainContent:has(.raven-faq-page) .raven-faq-page { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: none !important; } #MainContent:has(.raven-faq) .raven-faq-page, #MainContent:has(.raven-faq) .raven-faq-page *, #MainContent:has(.raven-faq-page) .raven-faq-page, #MainContent:has(.raven-faq-page) .raven-faq-page * { text-align: center !important; } #MainContent:has(.raven-faq) .raven-faq-page .raven-about-logo, #MainContent:has(.raven-faq-page) .raven-faq-page .raven-about-logo, .raven-faq-page .raven-about-logo { display: block !important; margin-left: auto !important; margin-right: auto !important; width: min(860px, 72vw) !important; max-width: min(900px, 100%) !important; } /* title section padding — kill huge hole under FAQ / About / Contact titles */ body.template-page:has(.raven-about-hero) #MainContent > .shopify-section:first-child .section, body.template-page:has(.raven-faq-page) #MainContent > .shopify-section:first-child .section, body.template-page:has(.raven-contact-email) #MainContent > .shopify-section:first-child .section { padding-block-start: 8px !important; padding-block-end: 0 !important; --section-padding-block: 0px !important; } body.template-page:has(.raven-about-hero) #MainContent > .shopify-section:first-child .text-block, body.template-page:has(.raven-faq-page) #MainContent > .shopify-section:first-child .text-block, body.template-page:has(.raven-contact-email) #MainContent > .shopify-section:first-child .text-block { padding-block: 0 !important; margin-block: 0 !important; } /* ========== 6) Bundles — title above feather; feather above SHOP PRODUCTS ========== */ body[data-page-handle="bundles"] .raven-bundles-title, body[data-page-handle="bundles"] .raven-title-with-feather .raven-bundles-title { display: block !important; text-align: center !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-size: clamp(1.1rem, 3vw, 1.6rem) !important; font-weight: 400 !important; color: #e9eef7 !important; margin: 8px auto 0 !important; } body[data-page-handle="bundles"] .raven-look-grid { margin-bottom: 28px !important; } body[data-page-handle="bundles"] .raven-bundles-feather, body[data-page-handle="bundles"] .raven-text-feather.raven-bundles-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 8px auto 20px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } body[data-page-handle="bundles"] .raven-bundles-shop, body[data-page-handle="bundles"] a.button[href*="/collections/products"], body[data-page-handle="bundles"] p:has(> a.button[href*="/collections/products"]) { position: static !important; display: block !important; text-align: center !important; margin: 0 auto 24px !important; } /* keep FAQ answers left after centering header */ #MainContent:has(.raven-faq) .raven-faq, #MainContent:has(.raven-faq) .raven-faq-item, #MainContent:has(.raven-faq) .raven-faq-item summary, #MainContent:has(.raven-faq) .raven-faq-item p { text-align: left !important; } /* ===== LOCK-7 NOTES SHOT ===== */ /* 1) Pyramid — larger still + DROP1 feather mirrored */ :root { --raven-hero-base: clamp(130px, 14.5vw, 196px) !important; } .raven-hero-cube.sz-100 { width: var(--raven-hero-base) !important; } .raven-hero-cube.sz-90 { width: calc(var(--raven-hero-base) * 0.9) !important; } .raven-hero-cube.sz-80 { width: calc(var(--raven-hero-base) * 0.8) !important; } .raven-hero-cube.sz-70, .raven-hero-cube.sz-60 { width: calc(var(--raven-hero-base) * 0.7) !important; } .raven-hero-pyramid__quartet { width: calc(var(--raven-hero-base) * 3.4 + 3 * clamp(4px, 0.8vw, 10px)) !important; max-width: none !important; } .raven-hero-pyramid__quartet .raven-feather-icon { display: block !important; width: 100% !important; max-width: 100% !important; height: clamp(32px, 3.6vw, 52px) !important; margin: 0 auto 10px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-hero-pyramid__quartet--d1 > .raven-feather-icon { transform: scaleX(-1) !important; } .raven-hero-pyramid__quartet .drop { font-size: clamp(1.05rem, 2vw, 1.4rem) !important; letter-spacing: 0.22em !important; width: 100% !important; } .raven-hero-pyramid__quartet .name { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; font-size: clamp(1.25rem, 2.6vw, 1.85rem) !important; letter-spacing: 0.16em !important; width: 100% !important; } @media (max-width: 749px) { :root { --raven-hero-base: clamp(70px, 21vw, 104px) !important; } } /* 2) Drop feather UNDER shop title, full-width centered — never beside cover */ .raven-lock3-drop { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .raven-lock3-drop__shop { order: 1 !important; display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; } .raven-lock3-drop__feather, .raven-lock3-drop > .raven-feather-icon { order: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: clamp(28px, 3vw, 42px) !important; margin: 0 auto 6px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; grid-column: unset !important; float: none !important; } .raven-lock3-drop__cubes { order: 3 !important; width: 100% !important; } /* 4) Space Bundles looks → COMING / NEXT DROP */ #ravenLooks { margin-bottom: 56px !important; padding-bottom: 28px !important; } #ravenNextDrop { margin-top: 48px !important; padding-top: 28px !important; } #ravenLooks + #ravenNextDrop, .raven-demo-home #ravenLooks { margin-bottom: 64px !important; } /* ===== LOCK-8 DESKTOP ===== */ /* ===== A) HEADER = site grid (not black / not blue block) ===== */ body { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; } #header-group, #header-component, header.header-section, .shopify-section-group-header-group, sticky-header, #header-component sticky-header { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; --color-background: #060912 !important; } #header-component .header, #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .header__columns, #header-component .section-background, #header-group .section-background, #header-component [class*="color-custom"], #header-group [class*="color-custom"] { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; box-shadow: none !important; } #header-group .section-background, header.header-section .section-background { opacity: 0 !important; visibility: hidden !important; } /* ===== A) L10N — flat list like currency, site bg opaque, no blue ===== */ dropdown-localization-component.raven-l10n--language, dropdown-localization-component.raven-l10n--location { --width: max-content !important; } dropdown-localization-component.raven-l10n--language .language-selector__label { display: none !important; } dropdown-localization-component.raven-l10n--language localization-form-component, dropdown-localization-component.raven-l10n--language .localization-wrapper, dropdown-localization-component.raven-l10n--language .localization-wrapper.right-bound, dropdown-localization-component.raven-l10n--language .localization-wrapper.left-bound, dropdown-localization-component.raven-l10n--location localization-form-component, dropdown-localization-component.raven-l10n--location .localization-wrapper, dropdown-localization-component.raven-l10n--location .localization-wrapper.right-bound, dropdown-localization-component.raven-l10n--location .localization-wrapper.left-bound { min-width: 0 !important; width: max-content !important; max-width: min(280px, calc(100vw - 16px)) !important; padding: 8px !important; background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; border: 1px solid rgba(180, 200, 230, 0.28) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important; opacity: 1 !important; } dropdown-localization-component.raven-l10n--language .localization-form, dropdown-localization-component.raven-l10n--location .localization-form, dropdown-localization-component.raven-l10n--language .language-selector, dropdown-localization-component.raven-l10n--location .country-selector { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; width: 100% !important; min-width: 0 !important; } dropdown-localization-component.raven-l10n--language .localization-form__select, dropdown-localization-component.raven-l10n--language .language-selector .svg-wrapper.icon-caret { display: none !important; } .raven-lang-list { display: flex !important; flex-direction: column !important; gap: 2px !important; width: max-content !important; min-width: 9.5rem !important; background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.09) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.12) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; border: none !important; padding: 0 !important; margin: 0 !important; } .raven-lang-list button { display: block !important; width: 100% !important; text-align: left !important; padding: 8px 12px !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: #e9eef7 !important; font: inherit !important; letter-spacing: 0.04em !important; cursor: pointer !important; } .raven-lang-list button:hover, .raven-lang-list button[aria-current="true"] { background: rgba(180, 200, 230, 0.12) !important; color: #fff !important; } dropdown-localization-component.raven-l10n--location .country-selector__list button[aria-current="true"], dropdown-localization-component.raven-l10n--location .country-selector button[aria-current="true"], dropdown-localization-component.raven-l10n--location .localization-form__list button[aria-current="true"] { background: rgba(180, 200, 230, 0.12) !important; } /* ===== B) DROPS — kill 2-col grid; title → feather → row ===== */ .raven-demo-home .raven-lock3-drop, .raven-lock3-drop, [data-raven-collections-drops] .raven-lock3-drop { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: none !important; gap: 10px !important; width: 100% !important; } .raven-lock3-drop__shop { order: 1 !important; display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; grid-column: unset !important; } .raven-lock3-drop__feather, .raven-lock3-drop > .raven-feather-icon { order: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; height: clamp(28px, 3vw, 42px) !important; margin: 0 auto 6px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; grid-column: unset !important; float: none !important; } .raven-lock3-drop__cubes { order: 3 !important; width: 100% !important; grid-column: unset !important; } .raven-lock3-drop__cover { display: none !important; } /* ===== B) HEROES — titles larger, cubes NOT oversized, no card bg ===== */ :root { --raven-hero-base: clamp(96px, 11vw, 148px) !important; } .raven-hero-cube.sz-100 { width: var(--raven-hero-base) !important; } .raven-hero-cube.sz-90 { width: calc(var(--raven-hero-base) * 0.9) !important; } .raven-hero-cube.sz-80 { width: calc(var(--raven-hero-base) * 0.8) !important; } .raven-hero-cube.sz-70, .raven-hero-cube.sz-60 { width: calc(var(--raven-hero-base) * 0.6) !important; } .raven-hero-pyramid__quartet { width: calc(var(--raven-hero-base) * 3.3 + 3 * clamp(4px, 0.8vw, 10px)) !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .raven-hero-pyramid__quartet .drop { font-size: clamp(1.15rem, 2.4vw, 1.65rem) !important; letter-spacing: 0.22em !important; } .raven-hero-pyramid__quartet .name { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; font-size: clamp(1.45rem, 3.1vw, 2.15rem) !important; letter-spacing: 0.16em !important; } .raven-hero-cube, .raven-hero-cube .raven-cat-cube__stage, .raven-look-entry, .raven-look-entry .body { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } .raven-look-entry { border-color: rgba(110,110,110,0.45) !important; } .raven-look-entry .car { height: auto !important; aspect-ratio: 4/5 !important; background: transparent !important; } @media (max-width: 749px) { :root { --raven-hero-base: clamp(56px, 18vw, 88px) !important; } } /* ===== C/D) Bundles hub + steps ===== */ body[data-page-handle="bundles"] .raven-bundles-title { display: block !important; } body[data-page-handle="bundles"] a.button[href*="/collections/products"], body[data-page-handle="bundles"] p:has(> a.button[href*="/collections/products")]), body[data-page-handle="bundles"] .raven-bundles-shop { display: none !important; } .raven-complete-look { text-align: center !important; max-width: 42rem !important; margin: 20px auto 28px !important; padding: 0 16px !important; background: transparent !important; } .raven-complete-look__title { letter-spacing: 0.16em !important; text-transform: uppercase !important; font-size: clamp(1.05rem, 2.4vw, 1.45rem) !important; margin: 0 0 10px !important; } .raven-complete-look__sub { color: #8b97ae !important; line-height: 1.55 !important; margin: 0 0 10px !important; } .raven-complete-look__feather { display: block !important; width: 88px !important; height: 36px !important; margin: 10px auto 18px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-complete-look__row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; } .raven-complete-look__row a { display: inline-block !important; padding: 10px 14px !important; border: 1px solid rgba(233,238,247,0.75) !important; color: #e9eef7 !important; text-decoration: none !important; letter-spacing: 0.08em !important; background: transparent !important; } .raven-bundle-step { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid rgba(110,110,110,0.45) !important; padding: 18px 16px 22px !important; margin: 16px auto !important; max-width: 720px !important; text-align: center !important; } .raven-bundle-step .raven-text-feather, .raven-bundle-step .raven-step-feather { display: block !important; width: 72px !important; height: 30px !important; margin: 12px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-step-car { position: relative !important; width: min(280px, 70vw) !important; aspect-ratio: 4/5 !important; margin: 8px auto 14px !important; overflow: hidden !important; background: transparent !important; } .raven-step-car .slide img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } /* ===== F) About / Contact ===== */ #MainContent .raven-text-feather, .raven-why-block .raven-text-feather, .raven-contact-feather { display: block !important; width: 88px !important; height: 36px !important; margin: 14px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section { display: block !important; } #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section:has(.ui-test-collection-list), #MainContent .shopify-section:has(.raven-about-copy) ~ .shopify-section:has(.collection-list) { display: none !important; } #MainContent:has(.raven-contact-email) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-email) .shopify-section:has(.social-icons__wrapper), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.social-icons__wrapper), #MainContent:has(.raven-contact-email) .shopify-section:has(form), body.template-page:has(.raven-contact-email) .contact-form, body.template-page:has(.raven-contact-email) .contact-form__form { display: block !important; visibility: visible !important; opacity: 1 !important; } /* ===== LOCK-8B HOTFIX ===== */ /* Header + popovers: visible site grid (beat color-custom-popover black) */ #header-group, #header-component, #header-component .header, .shopify-section-group-header-group { background-color: #060912 !important; background-image: linear-gradient(rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.16) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; } dropdown-localization-component .localization-wrapper, dropdown-localization-component .localization-wrapper.right-bound, dropdown-localization-component .localization-wrapper.left-bound, dropdown-localization-component .localization-wrapper.color-custom-popover, .localization-wrapper.color-custom-popover, .color-custom-popover.localization-wrapper, localization-form-component, .raven-l10n .localization-form, .raven-l10n .language-selector, .raven-l10n .country-selector { background-color: #060912 !important; background-image: linear-gradient(rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.16) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; --color-background: #060912 !important; --color-background-rgb: 6, 9, 18 !important; color: #e9eef7 !important; } /* Language = flat list like currency countries (no nested select UI) */ dropdown-localization-component.raven-l10n--language { --width: 280px !important; } dropdown-localization-component.raven-l10n--language .localization-wrapper, dropdown-localization-component.raven-l10n--language localization-form-component { width: 280px !important; min-width: 280px !important; max-width: min(280px, calc(100vw - 16px)) !important; } dropdown-localization-component.raven-l10n--language .language-selector__label, .raven-l10n--language .language-selector__label { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; font-size: 0 !important; } dropdown-localization-component.raven-l10n--language .localization-form__select, dropdown-localization-component.raven-l10n--language select[name="language_code"], dropdown-localization-component.raven-l10n--language .language-selector .svg-wrapper.icon-caret { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0) !important; } .raven-lang-list { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 4px 0 !important; background-color: #060912 !important; background-image: linear-gradient(rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 220, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.16) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: fixed, fixed, fixed !important; } .raven-lang-list button { display: block !important; width: 100% !important; min-width: 100% !important; box-sizing: border-box !important; text-align: left !important; padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #e9eef7 !important; font-size: 0.875rem !important; letter-spacing: 0.02em !important; } .raven-lang-list button:hover, .raven-lang-list button[aria-current="true"] { background: rgba(200, 220, 255, 0.12) !important; color: #fff !important; } /* Currency panel same opaque site bg */ dropdown-localization-component.raven-l10n--location .localization-wrapper { width: 280px !important; min-width: 280px !important; } /* ===== LOCK-9 UNIFIED ===== */ /* ===== Kill ALL contact-form hides (LOCK4b/4d/stay-hidden) ===== */ body.template-page:has(.raven-contact-page) #MainContent .shopify-section:has(.contact-form), body.template-page:has(.raven-contact-page) #MainContent .shopify-section:has(form.contact-form), body.template-page:has(.raven-contact-email) #MainContent .shopify-section:has(.contact-form), body.template-page:has(.raven-contact-ctas) #MainContent .shopify-section:has(.contact-form), body.template-page:has(.raven-contact-page) #MainContent form.contact-form, body.template-page:has(.raven-contact-page) #MainContent .contact-form, body.template-page:has(.raven-contact-email) #MainContent form.contact-form, body.template-page:has(.raven-contact-email) #MainContent .contact-form, #MainContent:has(.raven-contact-page) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-page) .shopify-section:has(form.contact-form), #MainContent:has(.raven-contact-page) form.contact-form, #MainContent:has(.raven-contact-page) .contact-form, #MainContent:has(.raven-contact-email) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-email) .shopify-section:has(form.contact-form), #MainContent:has(.raven-contact-email) form.contact-form, #MainContent:has(.raven-contact-email) .contact-form, #MainContent:has(.raven-contact-ctas) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-ctas) form.contact-form { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 16px auto 48px !important; padding: 0 !important; } #MainContent:has(.raven-contact-email) .shopify-section:has(.social-icons__wrapper), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.social-icons__wrapper), #MainContent:has(.raven-contact-page) .shopify-section:has(.social-icons__wrapper) { display: block !important; height: auto !important; overflow: visible !important; } /* ===== About/Contact/FAQ feathers — beat LOCK4 hide ===== */ body.template-page:has(.raven-about-page) #MainContent .raven-text-feather, body.template-page:has(.raven-contact-page) #MainContent .raven-text-feather, body.template-page:has(.raven-about-copy) #MainContent .raven-text-feather, body.template-page:has(.raven-why-block) #MainContent .raven-text-feather, #MainContent .raven-about-page .raven-text-feather, #MainContent .raven-contact-page .raven-text-feather, #MainContent .raven-why-block .raven-text-feather, #MainContent .raven-about-copy .raven-text-feather, .raven-about-page .raven-text-feather, .raven-contact-page .raven-text-feather, .raven-why-block .raven-text-feather { display: block !important; visibility: visible !important; width: 96px !important; height: 40px !important; margin: 16px auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; opacity: 0.95 !important; font-size: 0 !important; line-height: 0 !important; } /* FAQ enlarge feather under logo */ #MainContent:has(.raven-faq-page) .raven-faq-page .raven-text-feather, .raven-faq-page .raven-text-feather { display: block !important; width: 120px !important; height: 52px !important; margin: 14px auto 18px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; opacity: 0.95 !important; } /* Bundles home — enlarge feather under BUILD YOUR LOOK headline */ #ravenLooks .raven-text-feather, #ravenLooks .raven-feather-icon, #ravenLooks .raven-looks-feather, .raven-demo-home #ravenLooks .raven-feather-icon, .raven-demo-home .raven-looks-feather, .raven-demo-home .raven-looks-headline + .raven-feather-icon, .raven-demo-home .raven-looks-headline + .raven-text-feather, .raven-demo-home .title-with-feather .raven-feather-icon, #ravenLooks .raven-title-with-feather .raven-feather-icon { display: block !important; width: min(220px, 42vw) !important; max-width: 240px !important; height: clamp(48px, 6vw, 72px) !important; margin: 12px auto 18px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; opacity: 0.95 !important; } /* About / Contact centering */ .raven-page-center, .raven-about-page, .raven-contact-page, .raven-why-block, .raven-about-copy, .raven-about-ctas { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .raven-about-copy, .raven-why-block { max-width: 36rem !important; } .raven-about-ctas { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; max-width: 36rem !important; } .raven-about-hero, .raven-about-logo { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } body.template-page:has(.raven-about-page) #MainContent, body.template-page:has(.raven-contact-page) #MainContent, body.template-page:has(.raven-why-block) #MainContent { text-align: center !important; } body.template-page:has(.raven-about-page) #MainContent .shopify-section, body.template-page:has(.raven-contact-page) #MainContent .shopify-section { display: flex !important; flex-direction: column !important; align-items: center !important; } /* ===== LOCK-10 UNIFIED ===== */ /* ===== A) HEADER = site grid (opaque children transparent) ===== */ body { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: scroll !important; } #header-group, #header-component, header.header-section, .shopify-section-group-header-group, .shopify-section-group-header-group.header-section, sticky-header, #header-component sticky-header { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: scroll !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; --color-background: #060912 !important; --color-background-rgb: 6, 9, 18 !important; } #header-component .header, #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .header__columns, #header-component .section-background, #header-group .section-background, #header-component [class*="color-custom"], #header-group [class*="color-custom"], #header-component [class*="color-scheme"], #header-group [class*="color-scheme"] { background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; --color-background: transparent !important; } #header-group .section-background, header.header-section .section-background { opacity: 0 !important; visibility: hidden !important; } /* ===== B) L10N — ONE panel only (outer wrapper) ===== */ #header-component dropdown-localization-component .localization-wrapper, dropdown-localization-component .localization-wrapper, dropdown-localization-component .localization-wrapper.right-bound, dropdown-localization-component .localization-wrapper.left-bound, dropdown-localization-component .localization-wrapper.color-custom-popover, .localization-wrapper.color-custom-popover { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: scroll !important; border: 1px solid rgba(180, 200, 230, 0.28) !important; box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important; --color-background: #060912 !important; --color-background-rgb: 6, 9, 18 !important; padding: 8px !important; } dropdown-localization-component localization-form-component, dropdown-localization-component .localization-form, dropdown-localization-component .language-selector, dropdown-localization-component .country-selector, .raven-l10n .localization-form, .raven-l10n .language-selector, .raven-l10n .country-selector, .raven-lang-list { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .raven-lang-list { display: flex !important; flex-direction: column !important; width: 100% !important; } .raven-lang-list button { display: block !important; width: 100% !important; text-align: left !important; padding: 10px 14px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #e9eef7 !important; } .raven-lang-list button:hover, .raven-lang-list button[aria-current="true"] { background: rgba(200, 220, 255, 0.12) !important; } dropdown-localization-component.raven-l10n--language .language-selector__label, .raven-l10n--language .language-selector__label { display: none !important; height: 0 !important; overflow: hidden !important; } dropdown-localization-component.raven-l10n--language .localization-form__select, dropdown-localization-component.raven-l10n--language select[name="language_code"], dropdown-localization-component.raven-l10n--language .language-selector .svg-wrapper.icon-caret { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0) !important; } /* ===== C/D) Feathers — kill ALL prior hide rules ===== */ #MainContent .raven-text-feather, #MainContent .raven-feather-visible, #MainContent .raven-about-page .raven-text-feather, #MainContent .raven-contact-page .raven-text-feather, #MainContent .raven-why-block .raven-text-feather, #MainContent .raven-about-copy .raven-text-feather, body.template-page #MainContent .raven-text-feather, body.template-page:has(.raven-about-page) #MainContent .raven-text-feather, body.template-page:has(.raven-contact-page) #MainContent .raven-text-feather, body.template-page:has(.raven-why-block) #MainContent .raven-text-feather, .raven-about-page .raven-text-feather, .raven-contact-page .raven-text-feather, .raven-why-block .raven-text-feather, .raven-feather-visible { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; width: 96px !important; max-width: 120px !important; height: 40px !important; margin: 16px auto !important; padding: 0 !important; background: transparent !important; font-size: 0 !important; line-height: 0 !important; } .raven-text-feather img, .raven-feather-visible img { display: block !important; width: 96px !important; height: 40px !important; object-fit: contain !important; margin: 0 auto !important; opacity: 0.95 !important; } /* keep FAQ-between-details hide ONLY for details siblings */ #MainContent details + .raven-text-feather, #MainContent .accordion details + .raven-text-feather { display: none !important; } /* Contact / About center */ .raven-page-center, .raven-about-page, .raven-contact-page, .raven-why-block { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } .raven-about-copy { max-width: 36rem !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .raven-about-ctas, .raven-contact-ctas { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; width: 100% !important; max-width: 36rem !important; margin: 20px auto 0 !important; align-self: center !important; } body.template-page:has(.raven-contact-page) #MainContent .shopify-section, body.template-page:has(.raven-about-page) #MainContent .shopify-section { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Contact form stay visible */ #MainContent:has(.raven-contact-page) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-email) .shopify-section:has(.contact-form), #MainContent:has(.raven-contact-ctas) .shopify-section:has(.contact-form), body.template-page:has(.raven-contact-page) .contact-form, body.template-page:has(.raven-contact-page) .contact-form__form { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; overflow: visible !important; } /* Home looks — single feather under headline */ #ravenLooks > .raven-feather-icon, #ravenLooks > .raven-looks-feather, .raven-demo-home #ravenLooks > .raven-feather-icon { display: block !important; width: min(200px, 40vw) !important; height: clamp(44px, 5.5vw, 64px) !important; margin: 10px auto 16px !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } #ravenLooks > .raven-feather-icon + .raven-feather-icon, #ravenLooks > .raven-looks-feather + .raven-feather-icon, #ravenLooks > .raven-feather-icon + .raven-looks-feather { display: none !important; } /* Bundles page title + feather */ body[data-page-handle="bundles"] .raven-bundles-title { display: block !important; text-align: center !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-size: clamp(1.15rem, 3vw, 1.7rem) !important; color: #e9eef7 !important; margin: 8px auto 0 !important; } body[data-page-handle="bundles"] .raven-bundles-feather, body[data-page-handle="bundles"] .raven-text-feather.raven-bundles-feather { display: flex !important; visibility: visible !important; width: 96px !important; height: 40px !important; margin: 14px auto 16px !important; } body[data-page-handle="bundles"] .raven-bundles-sentence { text-align: center !important; margin: 0 auto 18px !important; } /* Under each look card: feather + % cube */ .raven-look-entry { display: flex !important; flex-direction: column !important; } .raven-look-entry .lbl, .raven-look-entry .save { display: none !important; } .raven-look-under { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; padding: 10px 8px 16px !important; width: 100% !important; box-sizing: border-box !important; } .raven-look-under .raven-feather-icon, .raven-look-under .raven-text-feather { display: block !important; width: 72px !important; height: 30px !important; margin: 0 auto !important; background: var(--raven-feather-icon) center / contain no-repeat !important; } .raven-look-under img { display: block !important; width: 72px !important; height: 30px !important; object-fit: contain !important; } .raven-look-pct { display: grid !important; place-items: center !important; min-width: 72px !important; min-height: 44px !important; padding: 8px 14px !important; border: 1px solid rgba(233, 238, 247, 0.55) !important; color: #e9eef7 !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.12em !important; font-size: 0.95rem !important; background: transparent !important; } /* ===== LOCK-12 UNIFIED ===== */ /* ===== A) Kill LOCK11 hero/drops damage (explicit undo) ===== */ @media screen and (max-width: 749px) { /* reset bad wrap — replaced by V pyramid below */ .raven-lock3-drop__shop { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; display: block !important; text-align: center !important; } } /* ===== Logo: desktop tuck / mobile space ===== */ #MainContent .raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo { display: block !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; } @media screen and (min-width: 750px) { #MainContent .raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo { /* moderate PNG-pad tuck — desktop only */ margin: calc(-28% + 6px) auto calc(-28% + 6px) !important; max-width: min(720px, 58vw) !important; width: min(720px, 58vw) !important; } } @media screen and (max-width: 749px) { #MainContent .raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo { margin: 12px auto 20px !important; max-width: min(280px, 70vw) !important; width: min(280px, 70vw) !important; } } /* ===== B) Heroes mobile — V pyramid 4×2 ===== */ @media screen and (max-width: 749px) { :root { --raven-hero-base: clamp(64px, 20vw, 92px) !important; } .raven-hero-pyramid { margin-top: 8px !important; padding: 0 4px !important; } .raven-hero-pyramid__row { display: grid !important; grid-template-columns: repeat(14, minmax(0, 1fr)) !important; grid-template-rows: repeat(4, auto) !important; gap: 8px 0 !important; justify-items: center !important; align-items: end !important; overflow: visible !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; flex-wrap: nowrap !important; } .raven-hero-pyramid__row .raven-hero-cube { flex: none !important; min-width: 0 !important; } /* desktop order: 1 pants D1, 2 tees D1, 3 hoodies D1, 4 jackets D1, 5 shirts D2, 6 hoodies D2, 7 tees D2, 8 pants D2 */ /* V top→bottom: jacket|shirt, hoodie|hoodie, tee|tee, pants|pants */ .raven-hero-pyramid__row > .raven-hero-cube:nth-child(4) { grid-row: 1 !important; grid-column: 6 / 8 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(5) { grid-row: 1 !important; grid-column: 8 / 10 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(3) { grid-row: 2 !important; grid-column: 4 / 7 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(6) { grid-row: 2 !important; grid-column: 9 / 12 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(2) { grid-row: 3 !important; grid-column: 3 / 6 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(7) { grid-row: 3 !important; grid-column: 10 / 13 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(1) { grid-row: 4 !important; grid-column: 1 / 4 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(8) { grid-row: 4 !important; grid-column: 12 / 15 !important; } .raven-hero-pyramid__labels { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 12px auto 0 !important; padding: 0 8px !important; gap: 12px !important; } .raven-hero-pyramid__quartet { flex: 1 1 0 !important; width: auto !important; max-width: 46% !important; text-align: center !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .raven-hero-pyramid__quartet .drop, .raven-hero-pyramid__quartet .name, .raven-hero-pyramid__quartet .raven-feather-icon { display: block !important; visibility: visible !important; opacity: 1 !important; } } /* ===== C) Drops mobile — 50% cover + 50% 2×3 cats ===== */ @media screen and (max-width: 749px) { .raven-demo-home .raven-lock3-drop, .raven-lock3-drop, [data-raven-collections-drops] .raven-lock3-drop { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; min-height: 0 !important; height: auto !important; margin: 0 0 16px !important; gap: 8px !important; position: relative !important; } .raven-lock3-drop__shop { order: 0 !important; display: block !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; text-align: center !important; margin: 8px 0 4px !important; } .raven-lock3-drop__feather { order: 1 !important; margin: 4px auto !important; } .raven-lock3-drop__cubes { order: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* ~50% cover row + ~50% two cat rows (2×3) — no full-svh lock */ grid-template-rows: minmax(200px, 48vw) minmax(96px, 25vw) minmax(96px, 25vw) !important; gap: 6px !important; padding: 6px !important; width: 100% !important; box-sizing: border-box !important; min-height: 0 !important; height: auto !important; align-content: stretch !important; } .raven-lock3-drop__cubes > .raven-lock3-drop__cover-cube { grid-column: 1 / -1 !important; grid-row: 1 !important; height: 100% !important; min-height: 0 !important; } .raven-lock3-drop__cubes > .raven-lock3-drop__cover-cube .raven-cat-cube__stage { height: 100% !important; aspect-ratio: auto !important; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube) { min-height: 0 !important; height: 100% !important; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube) .raven-cat-cube__stage { height: 100% !important; aspect-ratio: auto !important; } } /* ===== D) Products complete look — visible ===== */ .raven-complete-look { display: block !important; visibility: visible !important; text-align: center !important; max-width: 42rem !important; margin: 28px auto 36px !important; padding: 16px !important; } .raven-complete-look__title { display: block !important; text-align: center !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; font-size: clamp(1.05rem, 2.4vw, 1.45rem) !important; color: #e9eef7 !important; } .raven-complete-look__feather, .raven-complete-look .raven-text-feather { display: flex !important; visibility: visible !important; width: 96px !important; height: 40px !important; margin: 12px auto 18px !important; justify-content: center !important; align-items: center !important; background: transparent !important; } .raven-complete-look__row { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: center !important; } /* ===== E) Bundles title ===== */ body[data-page-handle="bundles"] #MainContent .shopify-section:first-child h1:not(.raven-bundles-title) { display: none !important; } body[data-page-handle="bundles"] #MainContent h1.raven-bundles-title, body[data-page-handle="bundles"] .raven-bundles-title { display: block !important; visibility: visible !important; text-align: center !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: clamp(1.05rem, 2.8vw, 1.55rem) !important; color: #e9eef7 !important; margin: 12px auto 0 !important; max-width: 22rem !important; } /* ===== F) WHY center + Contact social pair ===== */ #MainContent .raven-why-block, #MainContent [id*="raven_why"], #MainContent [id*="raven_why"] .section, #MainContent .raven-why-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #MainContent .raven-why-block { width: 100% !important; max-width: 36rem !important; display: block !important; } #MainContent .raven-why-title { display: block !important; width: 100% !important; text-align: center !important; } /* social: tight centered pair — beat wave11 2-col form align */ #MainContent:has(.contact-form__form) .social-icons__wrapper, #MainContent:has(.raven-contact-page) .social-icons__wrapper, body.template-page:has(.raven-contact-page) .social-icons__wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 28px !important; width: auto !important; max-width: none !important; margin: 12px auto 16px !important; grid-template-columns: none !important; } #MainContent:has(.contact-form__form) .social-icons__icon-wrapper, body.template-page:has(.raven-contact-page) .social-icons__icon-wrapper { width: auto !important; flex: 0 0 auto !important; } /* ===== G) Opening feathers = demo ===== */ .raven-site-feathers { opacity: 0.55 !important; } .raven-site-feathers video { mix-blend-mode: screen !important; opacity: 0.38 !important; filter: brightness(0.9) contrast(1.05) !important; } .raven-opening-feathers { -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 36%, transparent 0%, transparent 42%, rgba(0,0,0,0.55) 68%, #000 100%) !important; mask-image: radial-gradient(ellipse 58% 52% at 50% 36%, transparent 0%, transparent 42%, rgba(0,0,0,0.55) 68%, #000 100%) !important; } .raven-opening-feathers video, [id*="hero_jVaWmY"] .raven-opening-feathers video, [id*="hero_jVaWmY"] video.raven-opening-feathers__vid { mix-blend-mode: screen !important; opacity: 0.42 !important; filter: brightness(0.92) contrast(1.05) !important; } /* ===== H) Header grid ===== */ body { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: scroll !important; } #header-group, #header-component, header.header-section, .shopify-section-group-header-group, sticky-header, #header-component sticky-header { background-color: #060912 !important; background-image: linear-gradient(rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 200, 230, 0.11) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; background-attachment: scroll !important; backdrop-filter: none !important; box-shadow: none !important; --color-background: #060912 !important; --color-background-rgb: 6, 9, 18 !important; border: 0 !important; } #header-component .header, #header-component .header__row, #header-component .header__row--top, #header-component .header__row--bottom, #header-component .header__columns, #header-component .section-background, #header-group .section-background, #header-component [class*="color-custom"], #header-component [class*="color-scheme"] { background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; --color-background: transparent !important; } #header-group .section-background { opacity: 0 !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } @media screen and (max-width: 749px) { #header-component .header__row--bottom:empty, #header-component .header__row--bottom:not(:has(.header__columns > *)), #header-component .header__navigation-bar-row:not(:has(a, button, nav)) { display: none !important; height: 0 !important; padding: 0 !important; } #header-component header-actions { gap: 4px !important; } #header-component header-actions .account-button, #header-component .account-button { display: none !important; } #header-component .dropdown-localization__button { padding: 4px 6px !important; font-size: 0.7rem !important; } } /* ===== LOCK-13 GLOBAL CENTER ===== */ /* ===== Global: MainContent text / logos / buttons centered ===== */ #MainContent { text-align: center !important; } #MainContent .shopify-section, #MainContent .section, #MainContent .rte, #MainContent .page-width, #MainContent .spaced-section, #MainContent .raven-page-center, #MainContent .raven-about-page, #MainContent .raven-contact-page, #MainContent .raven-faq-page, #MainContent .raven-why-block, #MainContent .raven-about-copy, #MainContent .raven-faq-intro, #MainContent .raven-complete-look, #MainContent .raven-title-with-feather, #MainContent .raven-bundles-title, #MainContent .raven-bundles-sentence, #MainContent .raven-why-title, #MainContent .raven-lock3-drop__shop, #MainContent .raven-demo-home, #MainContent [data-raven-collections-drops] { text-align: center !important; } #MainContent h1, #MainContent h2, #MainContent h3, #MainContent h4, #MainContent h5, #MainContent h6, #MainContent p, #MainContent li, #MainContent a:not(.raven-cat-cube):not(.raven-hero-cube), #MainContent .h1, #MainContent .h2, #MainContent .h3, #MainContent .h4, #MainContent .h5, #MainContent .h6 { text-align: center !important; } /* Logos + feathers — centered */ #MainContent .raven-about-logo, #MainContent img.raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo, #MainContent .raven-text-feather, #MainContent .raven-feather-visible, #MainContent .raven-faq-feather, #MainContent .raven-bundles-feather, #MainContent .raven-complete-look__feather, #MainContent .raven-lock3-drop__feather { display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } #MainContent .raven-text-feather, #MainContent .raven-feather-visible { display: flex !important; justify-content: center !important; align-items: center !important; } /* Buttons / CTA rows — centered */ #MainContent .button, #MainContent a.button, #MainContent .button-secondary, #MainContent .button-primary, #MainContent .shopify-payment-button, #MainContent .raven-about-ctas, #MainContent .raven-contact-ctas, #MainContent .raven-complete-look__row, #MainContent .raven-look-grid, #MainContent .product-form__buttons, #MainContent .buy-buttons, #MainContent .contact-form, #MainContent .contact-form__form { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #MainContent .raven-about-ctas, #MainContent .raven-contact-ctas, #MainContent .raven-complete-look__row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; max-width: 42rem !important; } /* Page sections stack centered (pages) */ body.template-page #MainContent .shopify-section, body.template-collection #MainContent .shopify-section:has(.raven-complete-look), body.template-page:has(.raven-about-page) #MainContent .shopify-section, body.template-page:has(.raven-contact-page) #MainContent .shopify-section, body.template-page:has(.raven-faq-page) #MainContent .shopify-section { display: flex !important; flex-direction: column !important; align-items: center !important; } /* Contact social — tight centered pair */ #MainContent:has(.contact-form__form) .social-icons__wrapper, #MainContent:has(.raven-contact-page) .social-icons__wrapper, body.template-page:has(.raven-contact-page) .social-icons__wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 28px !important; width: auto !important; max-width: none !important; margin: 12px auto 16px !important; grid-template-columns: none !important; } /* Form labels centered; typed fields stay start for readability */ #MainContent .contact-form label, #MainContent .field__label, #MainContent .contact-form__form label { text-align: center !important; width: 100% !important; } #MainContent .contact-form input, #MainContent .contact-form textarea, #MainContent .contact-form select, #MainContent .field__input { text-align: start !important; } /* Product card titles under grid — centered (grid layout untouched) */ #MainContent .card__heading, #MainContent .card-information, #MainContent .product-card, #MainContent .product-grid-item, #MainContent .card { text-align: center !important; } /* ===== EXCEPTION: FAQ questions NOT centered ===== */ .raven-faq-page .raven-faq-item > summary, #MainContent .raven-faq .raven-faq-item > summary, #MainContent details.raven-faq-item > summary, .raven-faq-item > summary, #MainContent .raven-faq-q, .raven-faq-q, #MainContent .raven-faq-list .raven-faq-q { text-align: start !important; text-align: left !important; justify-content: flex-start !important; } /* FAQ answers / intro / logo still centered */ .raven-faq-page, .raven-faq-page .raven-faq-intro, .raven-faq-page .raven-about-logo, #MainContent .raven-faq-item > p, #MainContent .raven-faq-a, .raven-faq-a { text-align: center !important; } #MainContent .raven-faq { width: 100% !important; max-width: 42rem !important; margin-left: auto !important; margin-right: auto !important; } /* Keep desktop logo tuck / mobile positive space (from LOCK12) */ @media screen and (min-width: 750px) { #MainContent .raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo { margin: calc(-28% + 6px) auto calc(-28% + 6px) !important; max-width: min(720px, 58vw) !important; width: min(720px, 58vw) !important; } } @media screen and (max-width: 749px) { #MainContent .raven-about-logo, .raven-about-logo, .raven-faq-page .raven-about-logo { margin: 12px auto 20px !important; max-width: min(280px, 70vw) !important; width: min(280px, 70vw) !important; } } /* Do NOT collapse multi-col grids into a single centered column */ #MainContent .product-grid, #MainContent .collection-product-list, #MainContent .raven-lock3-drop__cubes, #MainContent .raven-hero-pyramid__row, #MainContent .raven-look-grid { /* preserve existing display from earlier locks */ } /* ===== HOTFIX AC FULL CENTER ===== */ /* Force theme flex column to CENTER (empty --horizontal-alignment defaults to start) */ body[data-template="page.about"] #MainContent .section-content-wrapper, body[data-template="page.about"] #MainContent .layout-panel-flex--column, body[data-template="page.about"] #MainContent .layout-panel-flex, body[data-template="page.contact"] #MainContent .section-content-wrapper, body[data-template="page.contact"] #MainContent .layout-panel-flex--column, body[data-template="page.contact"] #MainContent .layout-panel-flex, #MainContent[data-template="page.about"] .section-content-wrapper, #MainContent[data-template="page.about"] .layout-panel-flex--column, #MainContent[data-template="page.about"] .layout-panel-flex, #MainContent[data-template="page.contact"] .section-content-wrapper, #MainContent[data-template="page.contact"] .layout-panel-flex--column, #MainContent[data-template="page.contact"] .layout-panel-flex, body.template-page:has(.raven-about-page) #MainContent .section-content-wrapper, body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex--column, body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex, body.template-page:has(.raven-contact-page) #MainContent .section-content-wrapper, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex--column, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex { align-items: center !important; justify-content: flex-start !important; --horizontal-alignment: center !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-inline: 16px !important; box-sizing: border-box !important; } body[data-template="page.about"] #MainContent .section.page-width-content, body[data-template="page.about"] #MainContent .section-wrapper, body[data-template="page.about"] #MainContent .shopify-section, body[data-template="page.contact"] #MainContent .section.page-width-content, body[data-template="page.contact"] #MainContent .section-wrapper, body[data-template="page.contact"] #MainContent .shopify-section, #MainContent[data-template="page.about"] .section.page-width-content, #MainContent[data-template="page.about"] .section-wrapper, #MainContent[data-template="page.about"] .shopify-section, #MainContent[data-template="page.contact"] .section.page-width-content, #MainContent[data-template="page.contact"] .section-wrapper, #MainContent[data-template="page.contact"] .shopify-section, body.template-page:has(.raven-about-page) #MainContent .section.page-width-content, body.template-page:has(.raven-about-page) #MainContent .section-wrapper, body.template-page:has(.raven-about-page) #MainContent .shopify-section, body.template-page:has(.raven-contact-page) #MainContent .section.page-width-content, body.template-page:has(.raven-contact-page) #MainContent .section-wrapper, body.template-page:has(.raven-contact-page) #MainContent .shopify-section { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } body[data-template="page.about"] #MainContent .section-background, body[data-template="page.contact"] #MainContent .section-background, #MainContent[data-template="page.about"] .section-background, #MainContent[data-template="page.contact"] .section-background, body.template-page:has(.raven-about-page) #MainContent .section-background, body.template-page:has(.raven-contact-page) #MainContent .section-background { width: 100% !important; } /* Theme titles About Us / Contact */ body[data-template="page.about"] #MainContent .text-block, body[data-template="page.about"] #MainContent .text-block--align-center, body[data-template="page.about"] #MainContent .text-block h2, body[data-template="page.about"] #MainContent h2, body[data-template="page.contact"] #MainContent .text-block, body[data-template="page.contact"] #MainContent .text-block--align-center, body[data-template="page.contact"] #MainContent .text-block h2, body[data-template="page.contact"] #MainContent h2, #MainContent[data-template="page.about"] .text-block, #MainContent[data-template="page.about"] .text-block--align-center, #MainContent[data-template="page.about"] .text-block h2, #MainContent[data-template="page.about"] h2, #MainContent[data-template="page.contact"] .text-block, #MainContent[data-template="page.contact"] .text-block--align-center, #MainContent[data-template="page.contact"] .text-block h2, #MainContent[data-template="page.contact"] h2, body.template-page:has(.raven-about-page) #MainContent .text-block, body.template-page:has(.raven-about-page) #MainContent .text-block--align-center, body.template-page:has(.raven-about-page) #MainContent .text-block h2, body.template-page:has(.raven-about-page) #MainContent h2, body.template-page:has(.raven-contact-page) #MainContent .text-block, body.template-page:has(.raven-contact-page) #MainContent .text-block--align-center, body.template-page:has(.raven-contact-page) #MainContent .text-block h2, body.template-page:has(.raven-contact-page) #MainContent h2 { text-align: center !important; --text-align: center !important; --max-width: 100% !important; --width: 100% !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; align-self: center !important; } /* Content column */ body[data-template="page.about"] #MainContent .shopify-block.rte, body[data-template="page.about"] #MainContent .page-content, body[data-template="page.about"] #MainContent rte-formatter, body[data-template="page.about"] #MainContent .raven-about-page, body[data-template="page.about"] #MainContent .raven-contact-page, body[data-template="page.about"] #MainContent .raven-page-center, body[data-template="page.contact"] #MainContent .shopify-block.rte, body[data-template="page.contact"] #MainContent .page-content, body[data-template="page.contact"] #MainContent rte-formatter, body[data-template="page.contact"] #MainContent .raven-about-page, body[data-template="page.contact"] #MainContent .raven-contact-page, body[data-template="page.contact"] #MainContent .raven-page-center, #MainContent[data-template="page.about"] .shopify-block.rte, #MainContent[data-template="page.about"] .page-content, #MainContent[data-template="page.about"] rte-formatter, #MainContent[data-template="page.about"] .raven-about-page, #MainContent[data-template="page.about"] .raven-contact-page, #MainContent[data-template="page.about"] .raven-page-center, #MainContent[data-template="page.contact"] .shopify-block.rte, #MainContent[data-template="page.contact"] .page-content, #MainContent[data-template="page.contact"] rte-formatter, #MainContent[data-template="page.contact"] .raven-about-page, #MainContent[data-template="page.contact"] .raven-contact-page, #MainContent[data-template="page.contact"] .raven-page-center, body.template-page:has(.raven-about-page) #MainContent .shopify-block.rte, body.template-page:has(.raven-about-page) #MainContent .page-content, body.template-page:has(.raven-about-page) #MainContent rte-formatter, body.template-page:has(.raven-about-page) #MainContent .raven-about-page, body.template-page:has(.raven-about-page) #MainContent .raven-contact-page, body.template-page:has(.raven-about-page) #MainContent .raven-page-center, body.template-page:has(.raven-contact-page) #MainContent .shopify-block.rte, body.template-page:has(.raven-contact-page) #MainContent .page-content, body.template-page:has(.raven-contact-page) #MainContent rte-formatter, body.template-page:has(.raven-contact-page) #MainContent .raven-about-page, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-page, body.template-page:has(.raven-contact-page) #MainContent .raven-page-center { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 36rem !important; margin-inline: auto !important; text-align: center !important; padding-inline: 0 !important; box-sizing: border-box !important; } body[data-template="page.about"] #MainContent .raven-about-copy, body[data-template="page.about"] #MainContent .raven-about-copy p, body[data-template="page.about"] #MainContent .raven-why-block, body[data-template="page.about"] #MainContent .raven-why-title, body[data-template="page.about"] #MainContent .raven-about-faq, body[data-template="page.contact"] #MainContent .raven-about-copy, body[data-template="page.contact"] #MainContent .raven-about-copy p, body[data-template="page.contact"] #MainContent .raven-why-block, body[data-template="page.contact"] #MainContent .raven-why-title, body[data-template="page.contact"] #MainContent .raven-about-faq, #MainContent[data-template="page.about"] .raven-about-copy, #MainContent[data-template="page.about"] .raven-about-copy p, #MainContent[data-template="page.about"] .raven-why-block, #MainContent[data-template="page.about"] .raven-why-title, #MainContent[data-template="page.about"] .raven-about-faq, #MainContent[data-template="page.contact"] .raven-about-copy, #MainContent[data-template="page.contact"] .raven-about-copy p, #MainContent[data-template="page.contact"] .raven-why-block, #MainContent[data-template="page.contact"] .raven-why-title, #MainContent[data-template="page.contact"] .raven-about-faq, body.template-page:has(.raven-about-page) #MainContent .raven-about-copy, body.template-page:has(.raven-about-page) #MainContent .raven-about-copy p, body.template-page:has(.raven-about-page) #MainContent .raven-why-block, body.template-page:has(.raven-about-page) #MainContent .raven-why-title, body.template-page:has(.raven-about-page) #MainContent .raven-about-faq, body.template-page:has(.raven-contact-page) #MainContent .raven-about-copy, body.template-page:has(.raven-contact-page) #MainContent .raven-about-copy p, body.template-page:has(.raven-contact-page) #MainContent .raven-why-block, body.template-page:has(.raven-contact-page) #MainContent .raven-why-title, body.template-page:has(.raven-contact-page) #MainContent .raven-about-faq { text-align: center !important; width: 100% !important; margin-inline: auto !important; } body[data-template="page.about"] #MainContent .raven-about-hero, body[data-template="page.contact"] #MainContent .raven-about-hero, #MainContent[data-template="page.about"] .raven-about-hero, #MainContent[data-template="page.contact"] .raven-about-hero, body.template-page:has(.raven-about-page) #MainContent .raven-about-hero, body.template-page:has(.raven-contact-page) #MainContent .raven-about-hero { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-inline: 0 !important; float: none !important; } body[data-template="page.about"] #MainContent .raven-about-logo, body[data-template="page.about"] #MainContent img.raven-about-logo, body[data-template="page.contact"] #MainContent .raven-about-logo, body[data-template="page.contact"] #MainContent img.raven-about-logo, #MainContent[data-template="page.about"] .raven-about-logo, #MainContent[data-template="page.about"] img.raven-about-logo, #MainContent[data-template="page.contact"] .raven-about-logo, #MainContent[data-template="page.contact"] img.raven-about-logo, body.template-page:has(.raven-about-page) #MainContent .raven-about-logo, body.template-page:has(.raven-about-page) #MainContent img.raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent .raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent img.raven-about-logo { display: block !important; float: none !important; position: relative !important; left: auto !important; right: auto !important; box-sizing: border-box !important; width: min(720px, 100%) !important; max-width: 100% !important; height: auto !important; margin-inline: auto !important; object-fit: contain !important; object-position: center center !important; transform: translateX(-0.9%) !important; align-self: center !important; } @media screen and (min-width: 750px) { body[data-template="page.about"] #MainContent .raven-about-logo, body[data-template="page.about"] #MainContent img.raven-about-logo, body[data-template="page.contact"] #MainContent .raven-about-logo, body[data-template="page.contact"] #MainContent img.raven-about-logo, #MainContent[data-template="page.about"] .raven-about-logo, #MainContent[data-template="page.about"] img.raven-about-logo, #MainContent[data-template="page.contact"] .raven-about-logo, #MainContent[data-template="page.contact"] img.raven-about-logo, body.template-page:has(.raven-about-page) #MainContent .raven-about-logo, body.template-page:has(.raven-about-page) #MainContent img.raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent .raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent img.raven-about-logo { /* milder tuck so logo stays clearly under title in first viewport */ margin-top: calc(-16% + 4px) !important; margin-bottom: calc(-16% + 4px) !important; margin-inline: auto !important; transform: translateX(-0.9%) !important; } } @media screen and (max-width: 749px) { body[data-template="page.about"] #MainContent .raven-about-logo, body[data-template="page.about"] #MainContent img.raven-about-logo, body[data-template="page.contact"] #MainContent .raven-about-logo, body[data-template="page.contact"] #MainContent img.raven-about-logo, #MainContent[data-template="page.about"] .raven-about-logo, #MainContent[data-template="page.about"] img.raven-about-logo, #MainContent[data-template="page.contact"] .raven-about-logo, #MainContent[data-template="page.contact"] img.raven-about-logo, body.template-page:has(.raven-about-page) #MainContent .raven-about-logo, body.template-page:has(.raven-about-page) #MainContent img.raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent .raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent img.raven-about-logo { margin-top: 8px !important; margin-bottom: 16px !important; width: min(280px, 100%) !important; max-width: 100% !important; transform: translateX(-0.9%) !important; } } body[data-template="page.about"] #MainContent .raven-text-feather, body[data-template="page.about"] #MainContent .raven-feather-visible, body[data-template="page.contact"] #MainContent .raven-text-feather, body[data-template="page.contact"] #MainContent .raven-feather-visible, #MainContent[data-template="page.about"] .raven-text-feather, #MainContent[data-template="page.about"] .raven-feather-visible, #MainContent[data-template="page.contact"] .raven-text-feather, #MainContent[data-template="page.contact"] .raven-feather-visible, body.template-page:has(.raven-about-page) #MainContent .raven-text-feather, body.template-page:has(.raven-about-page) #MainContent .raven-feather-visible, body.template-page:has(.raven-contact-page) #MainContent .raven-text-feather, body.template-page:has(.raven-contact-page) #MainContent .raven-feather-visible { display: flex !important; justify-content: center !important; align-items: center !important; margin-inline: auto !important; width: 96px !important; } body[data-template="page.about"] #MainContent .raven-about-ctas, body[data-template="page.about"] #MainContent .raven-contact-ctas, body[data-template="page.contact"] #MainContent .raven-about-ctas, body[data-template="page.contact"] #MainContent .raven-contact-ctas, #MainContent[data-template="page.about"] .raven-about-ctas, #MainContent[data-template="page.about"] .raven-contact-ctas, #MainContent[data-template="page.contact"] .raven-about-ctas, #MainContent[data-template="page.contact"] .raven-contact-ctas, body.template-page:has(.raven-about-page) #MainContent .raven-about-ctas, body.template-page:has(.raven-about-page) #MainContent .raven-contact-ctas, body.template-page:has(.raven-contact-page) #MainContent .raven-about-ctas, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-ctas { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: auto !important; max-width: 100% !important; margin-inline: auto !important; } body[data-template="page.about"] #MainContent .raven-about-ctas > a, body[data-template="page.about"] #MainContent .raven-contact-ctas > a, body[data-template="page.about"] #MainContent .raven-about-ctas .button, body[data-template="page.about"] #MainContent .raven-contact-ctas .button, body[data-template="page.about"] #MainContent .raven-about-ctas .button-secondary, body[data-template="page.about"] #MainContent .raven-contact-ctas .button-secondary, body[data-template="page.contact"] #MainContent .raven-about-ctas > a, body[data-template="page.contact"] #MainContent .raven-contact-ctas > a, body[data-template="page.contact"] #MainContent .raven-about-ctas .button, body[data-template="page.contact"] #MainContent .raven-contact-ctas .button, body[data-template="page.contact"] #MainContent .raven-about-ctas .button-secondary, body[data-template="page.contact"] #MainContent .raven-contact-ctas .button-secondary, #MainContent[data-template="page.about"] .raven-about-ctas > a, #MainContent[data-template="page.about"] .raven-contact-ctas > a, #MainContent[data-template="page.about"] .raven-about-ctas .button, #MainContent[data-template="page.about"] .raven-contact-ctas .button, #MainContent[data-template="page.about"] .raven-about-ctas .button-secondary, #MainContent[data-template="page.about"] .raven-contact-ctas .button-secondary, #MainContent[data-template="page.contact"] .raven-about-ctas > a, #MainContent[data-template="page.contact"] .raven-contact-ctas > a, #MainContent[data-template="page.contact"] .raven-about-ctas .button, #MainContent[data-template="page.contact"] .raven-contact-ctas .button, #MainContent[data-template="page.contact"] .raven-about-ctas .button-secondary, #MainContent[data-template="page.contact"] .raven-contact-ctas .button-secondary, body.template-page:has(.raven-about-page) #MainContent .raven-about-ctas > a, body.template-page:has(.raven-about-page) #MainContent .raven-contact-ctas > a, body.template-page:has(.raven-about-page) #MainContent .raven-about-ctas .button, body.template-page:has(.raven-about-page) #MainContent .raven-contact-ctas .button, body.template-page:has(.raven-about-page) #MainContent .raven-about-ctas .button-secondary, body.template-page:has(.raven-about-page) #MainContent .raven-contact-ctas .button-secondary, body.template-page:has(.raven-contact-page) #MainContent .raven-about-ctas > a, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-ctas > a, body.template-page:has(.raven-contact-page) #MainContent .raven-about-ctas .button, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-ctas .button, body.template-page:has(.raven-contact-page) #MainContent .raven-about-ctas .button-secondary, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-ctas .button-secondary { flex: 0 0 auto !important; width: auto !important; margin-inline: 0 !important; } body[data-template="page.about"] #MainContent .button, body[data-template="page.about"] #MainContent a.button, body[data-template="page.about"] #MainContent .button-secondary, body[data-template="page.contact"] #MainContent .button, body[data-template="page.contact"] #MainContent a.button, body[data-template="page.contact"] #MainContent .button-secondary, #MainContent[data-template="page.about"] .button, #MainContent[data-template="page.about"] a.button, #MainContent[data-template="page.about"] .button-secondary, #MainContent[data-template="page.contact"] .button, #MainContent[data-template="page.contact"] a.button, #MainContent[data-template="page.contact"] .button-secondary, body.template-page:has(.raven-about-page) #MainContent .button, body.template-page:has(.raven-about-page) #MainContent a.button, body.template-page:has(.raven-about-page) #MainContent .button-secondary, body.template-page:has(.raven-contact-page) #MainContent .button, body.template-page:has(.raven-contact-page) #MainContent a.button, body.template-page:has(.raven-contact-page) #MainContent .button-secondary { text-align: center !important; } body[data-template="page.about"] #MainContent .social-icons__wrapper, body[data-template="page.contact"] #MainContent .social-icons__wrapper, #MainContent[data-template="page.about"] .social-icons__wrapper, #MainContent[data-template="page.contact"] .social-icons__wrapper, body.template-page:has(.raven-about-page) #MainContent .social-icons__wrapper, body.template-page:has(.raven-contact-page) #MainContent .social-icons__wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 28px !important; width: auto !important; max-width: 100% !important; margin-inline: auto !important; grid-template-columns: none !important; align-self: center !important; } body[data-template="page.about"] #MainContent .contact-form, body[data-template="page.about"] #MainContent .contact-form__form, body[data-template="page.contact"] #MainContent .contact-form, body[data-template="page.contact"] #MainContent .contact-form__form, #MainContent[data-template="page.about"] .contact-form, #MainContent[data-template="page.about"] .contact-form__form, #MainContent[data-template="page.contact"] .contact-form, #MainContent[data-template="page.contact"] .contact-form__form, body.template-page:has(.raven-about-page) #MainContent .contact-form, body.template-page:has(.raven-about-page) #MainContent .contact-form__form, body.template-page:has(.raven-contact-page) #MainContent .contact-form, body.template-page:has(.raven-contact-page) #MainContent .contact-form__form { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; max-width: 36rem !important; margin-inline: auto !important; text-align: center !important; } body[data-template="page.about"] #MainContent .contact-form__form-row, body[data-template="page.contact"] #MainContent .contact-form__form-row, #MainContent[data-template="page.about"] .contact-form__form-row, #MainContent[data-template="page.contact"] .contact-form__form-row, body.template-page:has(.raven-about-page) #MainContent .contact-form__form-row, body.template-page:has(.raven-contact-page) #MainContent .contact-form__form-row { display: flex !important; justify-content: center !important; align-items: stretch !important; width: 100% !important; margin-inline: auto !important; gap: 12px !important; box-sizing: border-box !important; } @media screen and (max-width: 749px) { body[data-template="page.about"] #MainContent .contact-form__form-row, body[data-template="page.contact"] #MainContent .contact-form__form-row, #MainContent[data-template="page.about"] .contact-form__form-row, #MainContent[data-template="page.contact"] .contact-form__form-row, body.template-page:has(.raven-about-page) #MainContent .contact-form__form-row, body.template-page:has(.raven-contact-page) #MainContent .contact-form__form-row { flex-direction: column !important; } } body[data-template="page.about"] #MainContent .contact-form__input, body[data-template="page.contact"] #MainContent .contact-form__input, #MainContent[data-template="page.about"] .contact-form__input, #MainContent[data-template="page.contact"] .contact-form__input, body.template-page:has(.raven-about-page) #MainContent .contact-form__input, body.template-page:has(.raven-contact-page) #MainContent .contact-form__input { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body[data-template="page.about"] #MainContent .submit-button, body[data-template="page.about"] #MainContent button[type="submit"], body[data-template="page.contact"] #MainContent .submit-button, body[data-template="page.contact"] #MainContent button[type="submit"], #MainContent[data-template="page.about"] .submit-button, #MainContent[data-template="page.about"] button[type="submit"], #MainContent[data-template="page.contact"] .submit-button, #MainContent[data-template="page.contact"] button[type="submit"], body.template-page:has(.raven-about-page) #MainContent .submit-button, body.template-page:has(.raven-about-page) #MainContent button[type="submit"], body.template-page:has(.raven-contact-page) #MainContent .submit-button, body.template-page:has(.raven-contact-page) #MainContent button[type="submit"] { display: inline-flex !important; justify-content: center !important; align-items: center !important; margin-inline: auto !important; align-self: center !important; text-align: center !important; } /* ===== LOCK-14 UNIFIED ===== */ /* ===== A) Heroes desktop +15% ===== */ @media screen and (min-width: 750px) { :root { --raven-hero-base: clamp(110px, 12.65vw, 170px) !important; } } /* ===== B) Drops — desktop 5 cats (hide tanks); mobile 2×3 ===== */ @media screen and (min-width: 750px) { .raven-lock3-drop__cubes > .raven-cat-cube[data-cat="tanks"], .raven-demo-home .raven-lock3-drop__cubes > .raven-cat-cube[data-cat="tanks"], [data-raven-collections-drops] .raven-lock3-drop__cubes > .raven-cat-cube[data-cat="tanks"] { display: none !important; } } @media screen and (max-width: 749px) { .raven-demo-home .raven-lock3-drop, .raven-lock3-drop, [data-raven-collections-drops] .raven-lock3-drop { display: flex !important; flex-direction: column !important; min-height: 0 !important; height: auto !important; } .raven-lock3-drop__shop { display: block !important; position: static !important; clip: auto !important; overflow: visible !important; text-align: center !important; order: 0 !important; } .raven-lock3-drop__feather { order: 1 !important; margin: 4px auto !important; } /* CRITICAL: grid 3-col — cover full row, then 2×3 cats (NOT one row of 6) */ .raven-lock3-drop__cubes, .raven-demo-home .raven-lock3-drop__cubes, [data-raven-collections-drops] .raven-lock3-drop__cubes { order: 2 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: minmax(200px, 48vw) minmax(100px, 24vw) minmax(100px, 24vw) !important; gap: 6px !important; padding: 6px !important; width: 100% !important; box-sizing: border-box !important; min-height: 0 !important; height: auto !important; flex-wrap: unset !important; flex-direction: unset !important; } .raven-lock3-drop__cubes > .raven-lock3-drop__cover-cube, .raven-lock3-drop__cubes > .raven-cat-cube[data-cat="cover"] { grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100% !important; max-width: none !important; height: 100% !important; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]) { width: auto !important; min-width: 0 !important; max-width: none !important; flex: unset !important; } .raven-lock3-drop__cubes > .raven-cat-cube[data-cat="tanks"] { display: block !important; } /* place cats into rows 2–3 by order after cover: 1 jackets 2 hoodies 3 shirts 4 tees 5 tanks 6 pants */ .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(2) { grid-row: 2; grid-column: 1; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(3) { grid-row: 2; grid-column: 2; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(4) { grid-row: 2; grid-column: 3; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(5) { grid-row: 3; grid-column: 1; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(6) { grid-row: 3; grid-column: 2; } .raven-lock3-drop__cubes > .raven-cat-cube:not(.raven-lock3-drop__cover-cube):not([data-cat="cover"]):nth-of-type(7) { grid-row: 3; grid-column: 3; } } /* ===== C) Home bundles slightly smaller ===== */ .raven-demo-home .raven-looks-headline, .raven-demo-home h2.raven-looks-headline { font-size: clamp(1.05rem, 2.4vw, 1.55rem) !important; letter-spacing: 0.12em !important; margin-bottom: 6px !important; } .raven-demo-home .raven-look-grid { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; gap: 12px !important; transform: scale(0.92) !important; transform-origin: top center !important; } .raven-demo-home .raven-look-entry .body strong { font-size: 0.78rem !important; } .raven-demo-home .section-block:has(.raven-look-grid), .raven-demo-home .raven-looks-block { padding-top: 12px !important; padding-bottom: 16px !important; } /* ===== D) Collections bundles CTA ===== */ .raven-collections-bundles { display: block !important; text-align: center !important; visibility: visible !important; } .raven-collections-bundles__row { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; } /* ===== LOCK-16 UNIFIED ===== */ /* ===== 3) Image sharpness helpers (CDN still bumped in liquid) ===== */ .raven-cat-cube__stage img, .raven-cat-cube img, .raven-hero-cube img, .raven-look-entry img { image-rendering: auto !important; } /* ===== 4) PDP / site bundles CTA — new buttons, no old banner look ===== */ .raven-complete-look, .raven-pdp-bundles, .raven-collections-bundles { display: block !important; text-align: center !important; max-width: 42rem !important; margin: 24px auto 32px !important; padding: 12px 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .raven-complete-look h3, .raven-complete-look__title { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: clamp(1.05rem, 2.8vw, 1.45rem) !important; color: #e9eef7 !important; margin: 0 0 8px !important; } .raven-complete-look__row, .raven-complete-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; } .raven-complete-look__row a, .raven-complete-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 14px !important; border: 1px solid rgba(233, 238, 247, 0.55) !important; text-decoration: none !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; font-size: 0.78rem !important; color: #e9eef7 !important; background: transparent !important; } .raven-complete-look__row a.is-primary { background: #e9eef7 !important; color: #060912 !important; } /* hide leftover old banner media if any */ .raven-complete-look img.banner, .raven-old-bundles-banner, [data-raven-old-bundles], .shopify-section:has(> .raven-old-bundles-banner) { display: none !important; } /* ===== 5) Size chart — restore natural colors (no forced B&W) ===== */ body.template-product #MainContent table, body.template-product #MainContent .rte table, body.template-product #MainContent .accordion table, body.template-product #MainContent [class*="size"] table, body.template-product #MainContent [class*="Size"] table, body.template-product #MainContent [id*="size"] table, body.template-product #MainContent [id*="Size"] table { color: inherit !important; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; } body.template-product #MainContent table img, body.template-product #MainContent .rte img, body.template-product #MainContent [class*="size"] img, body.template-product #MainContent [class*="chart"] img, body.template-product #MainContent .accordion img { filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; } /* if size chart is an image that got inverted by dark theme tricks */ body.template-product #MainContent .rte img[src*="size"], body.template-product #MainContent .rte img[alt*="size" i], body.template-product #MainContent .rte img[alt*="Size"], body.template-product #MainContent .rte img[alt*="chart" i] { filter: none !important; background: #fff !important; padding: 8px !important; border-radius: 4px !important; } /* ===== 6) Read more / Read less — PDP description only ===== */ body.template-product #MainContent .product-description, body.template-product #MainContent .product__description, body.template-product #MainContent [class*="product-description"], body.template-product #MainContent .rte:not(.raven-faq):not(:has(.raven-faq-page)), body.template-product product-description, body.template-product .text-block--product, body.template-product .truncate-text { /* allow theme truncate mechanics */ display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* when expanded */ body.template-product #MainContent .product-description.is-expanded, body.template-product #MainContent .product-description[aria-expanded="true"], body.template-product #MainContent .rte.is-expanded, body.template-product .show-more__content[aria-expanded="true"], body.template-product .show-more__content.is-expanded { -webkit-line-clamp: unset !important; max-height: none !important; overflow: visible !important; display: block !important; } body.template-product .show-more__button, body.template-product button.show-more, body.template-product .read-more, body.template-product [data-show-more], body.template-product .text-block__read-more, body.template-product .product-description__toggle { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; margin: 8px auto !important; } body.template-product #MainContent .product-information .rte, body.template-product #MainContent .product-details .rte, body.template-product #MainContent .product-description .rte, body.template-product #MainContent [data-product-description], body.template-product .product__description, body.template-product product-description .rte { -webkit-line-clamp: 5 !important; line-clamp: 5 !important; max-height: 9.5em !important; } /* ===== LOCK-17 UNIFIED ===== */ /* ===== A) About + Contact — center axis = page title ===== */ body.template-page:has(.raven-about-page) #MainContent, body.template-page:has(.raven-contact-page) #MainContent, body[data-template="page.about"] #MainContent, body[data-template="page.contact"] #MainContent { --raven-page-col: min(36rem, calc(100% - 32px)); } body.template-page:has(.raven-about-page) #MainContent .section-content-wrapper, body.template-page:has(.raven-contact-page) #MainContent .section-content-wrapper, body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex--column, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex--column, body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex { align-items: center !important; --horizontal-alignment: center !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-inline: 16px !important; box-sizing: border-box !important; transform: none !important; } body.template-page:has(.raven-about-page) #MainContent .text-block, body.template-page:has(.raven-contact-page) #MainContent .text-block, body.template-page:has(.raven-about-page) #MainContent .text-block h2, body.template-page:has(.raven-contact-page) #MainContent .text-block h2, body.template-page:has(.raven-about-page) #MainContent h2, body.template-page:has(.raven-contact-page) #MainContent h2 { text-align: center !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; align-self: center !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-page, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-page, body.template-page:has(.raven-about-page) #MainContent .shopify-block.rte, body.template-page:has(.raven-contact-page) #MainContent .shopify-block.rte, body.template-page:has(.raven-about-page) #MainContent rte-formatter, body.template-page:has(.raven-contact-page) #MainContent rte-formatter { display: flex !important; flex-direction: column !important; align-items: center !important; width: var(--raven-page-col) !important; max-width: var(--raven-page-col) !important; margin-inline: auto !important; text-align: center !important; transform: none !important; float: none !important; box-sizing: border-box !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-logo, body.template-page:has(.raven-about-page) #MainContent img.raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent .raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent img.raven-about-logo { display: block !important; float: none !important; margin-inline: auto !important; align-self: center !important; transform: none !important; left: auto !important; right: auto !important; max-width: min(100%, 36rem) !important; object-position: center center !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-ctas, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-ctas, body.template-page:has(.raven-contact-page) #MainContent .contact-form, body.template-page:has(.raven-contact-page) #MainContent .contact-form__form, body.template-page:has(.raven-contact-page) #MainContent .social-icons__wrapper { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; margin-inline: auto !important; width: 100% !important; max-width: var(--raven-page-col) !important; text-align: center !important; } body.template-page:has(.raven-contact-page) #MainContent .contact-form__form-row { justify-content: center !important; width: 100% !important; } body.template-page:has(.raven-contact-page) #MainContent .contact-form input, body.template-page:has(.raven-contact-page) #MainContent .contact-form textarea, body.template-page:has(.raven-contact-page) #MainContent .contact-form select { margin-inline: auto !important; text-align: center !important; } /* FAQ questions stay left-aligned (LOCK13 exception) */ body.template-page:has(.raven-faq-page) #MainContent .raven-faq-item summary, body.template-page:has(.raven-faq-page) #MainContent details summary { text-align: left !important; } /* ===== B) Bundles CTA percents ===== */ .raven-complete-look__codes { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; color: #8b97ae !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; margin: 0 0 14px !important; } .raven-copy-code { background: transparent !important; border: 1px solid rgba(233,238,247,0.35) !important; color: #e9eef7 !important; padding: 4px 8px !important; cursor: pointer !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 0.72rem !important; } .raven-copy-code.is-copied { border-color: #7dcea0 !important; color: #7dcea0 !important; } /* ===== G) PDP trust ===== */ .raven-pdp-trust { max-width: 36rem !important; margin: 16px auto 20px !important; padding: 12px 14px !important; text-align: center !important; color: #c5cddc !important; font-size: 0.88rem !important; line-height: 1.55 !important; border-top: 1px solid rgba(110,110,110,0.35) !important; border-bottom: 1px solid rgba(110,110,110,0.35) !important; } .raven-pdp-trust p { margin: 0 0 8px !important; } .raven-pdp-trust__refund { color: #8b97ae !important; font-size: 0.8rem !important; } /* ===== I) Opening fallback + reduced motion ===== */ .raven-skip-intro { position: fixed !important; z-index: 80 !important; top: max(12px, env(safe-area-inset-top)) !important; right: max(12px, env(safe-area-inset-right)) !important; padding: 10px 14px !important; border: 1px solid rgba(233,238,247,0.55) !important; background: rgba(10,12,16,0.72) !important; color: #e9eef7 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 0.72rem !important; cursor: pointer !important; } .raven-skip-intro.is-gone { display: none !important; } @media (prefers-reduced-motion: reduce) { .raven-opening-feathers video, [id*="hero_jVaWmY"] video, .raven-demo-home video { display: none !important; } .raven-opening-feathers, [id*="hero_jVaWmY"] { background-size: cover !important; background-position: center !important; } } /* ===== C/D) Policy body always visible ===== */ body.template-policy #MainContent .rte, body.template-policy #MainContent .shopify-policy__body, body[class*="policy"] #MainContent .rte { color: inherit !important; opacity: 1 !important; visibility: visible !important; display: block !important; max-width: 48rem !important; margin-inline: auto !important; text-align: left !important; padding: 16px !important; } /* ===== HOTFIX POST17 ===== */ /* ===== 1) SKIP INTRO — below header, not over icons ===== */ .raven-skip-intro { position: absolute !important; top: auto !important; right: auto !important; left: 50% !important; bottom: 16px !important; transform: translateX(-50%) !important; z-index: 40 !important; padding: 10px 14px !important; border: 1px solid rgba(233,238,247,0.55) !important; background: rgba(10,12,16,0.78) !important; color: #e9eef7 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 0.72rem !important; cursor: pointer !important; pointer-events: auto !important; } /* host opening hero for absolute skip */ [id*="hero_jVaWmY"], .shopify-section:has(.raven-opening-feathers), .shopify-section:has([id*="hero_jVaWmY"]) { position: relative !important; } /* fallback if button stays on body: below sticky header */ body > .raven-skip-intro { position: fixed !important; top: calc(var(--header-height, 64px) + 12px) !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; z-index: 40 !important; } .raven-skip-intro.is-gone { display: none !important; } /* hide code row leftovers */ .raven-complete-look__codes, .raven-copy-code, .raven-look-code-tip { display: none !important; } /* ===== 4) Bundles page cards +20% (not home) ===== */ @media screen and (min-width: 750px) { body[data-page-handle="bundles"] .raven-looks-block, body[data-page-handle="bundles"] .raven-bundles-shop, body.template-page[data-page-handle="bundles"] .raven-looks-block { max-width: min(1200px, 96vw) !important; width: 100% !important; margin-inline: auto !important; } body[data-page-handle="bundles"] .raven-look-entry, body.template-page[data-page-handle="bundles"] .raven-look-entry { width: 100% !important; max-width: none !important; transform: none !important; } body[data-page-handle="bundles"] .raven-looks-grid, body[data-page-handle="bundles"] .raven-bundles-entries, body[data-page-handle="bundles"] .raven-looks-block > .raven-looks-row, body[data-page-handle="bundles"] .raven-looks-block { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(14px, 2vw, 22px) !important; max-width: min(1140px, 94vw) !important; /* ~20% wider than ~950 */ margin-inline: auto !important; padding-inline: 12px !important; } body[data-page-handle="bundles"] .raven-look-entry .car { aspect-ratio: 4 / 5 !important; } } /* ===== 5) About/Contact — tighter vertical rhythm ===== */ body.template-page:has(.raven-about-page) #MainContent .shopify-section, body.template-page:has(.raven-contact-page) #MainContent .shopify-section { padding-block: 8px !important; margin-block: 0 !important; } body.template-page:has(.raven-about-page) #MainContent .section, body.template-page:has(.raven-contact-page) #MainContent .section { --section-padding-block: 8px !important; padding-block: 8px !important; } body.template-page:has(.raven-about-page) #MainContent .text-block, body.template-page:has(.raven-contact-page) #MainContent .text-block, body.template-page:has(.raven-about-page) #MainContent h2, body.template-page:has(.raven-contact-page) #MainContent h2 { margin-block: 0 8px !important; padding-block: 0 !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-hero, body.template-page:has(.raven-about-page) #MainContent .raven-about-page, body.template-page:has(.raven-contact-page) #MainContent .raven-contact-page { gap: 8px !important; row-gap: 8px !important; margin-block: 0 !important; padding-block: 0 12px !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-logo, body.template-page:has(.raven-about-page) #MainContent img.raven-about-logo, body.template-page:has(.raven-contact-page) #MainContent .raven-about-logo { margin-block: 4px 8px !important; max-height: min(42vw, 220px) !important; width: auto !important; object-fit: contain !important; } body.template-page:has(.raven-about-page) #MainContent .raven-about-copy, body.template-page:has(.raven-about-page) #MainContent .raven-about-copy p { margin-block: 4px 8px !important; } body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex, body.template-page:has(.raven-about-page) #MainContent .layout-panel-flex--column, body.template-page:has(.raven-contact-page) #MainContent .layout-panel-flex--column { gap: 8px !important; row-gap: 8px !important; } /* ===== 6) Mobile hero pyramid — top row gap, no overlap ===== */ @media screen and (max-width: 749px) { :root { --raven-hero-base: clamp(52px, 16.5vw, 78px) !important; } .raven-hero-pyramid { margin-top: 4px !important; padding: 0 6px !important; } .raven-hero-pyramid__row { display: grid !important; grid-template-columns: repeat(14, minmax(0, 1fr)) !important; column-gap: 6px !important; row-gap: 10px !important; justify-items: center !important; align-items: end !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; } .raven-hero-pyramid__row .raven-hero-cube { max-width: 100% !important; box-sizing: border-box !important; } /* pull top pair apart: leave empty center columns */ .raven-hero-pyramid__row > .raven-hero-cube:nth-child(4) { grid-row: 1 !important; grid-column: 4 / 7 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(5) { grid-row: 1 !important; grid-column: 9 / 12 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(3) { grid-row: 2 !important; grid-column: 3 / 7 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(6) { grid-row: 2 !important; grid-column: 9 / 13 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(2) { grid-row: 3 !important; grid-column: 2 / 6 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(7) { grid-row: 3 !important; grid-column: 10 / 14 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(1) { grid-row: 4 !important; grid-column: 1 / 5 !important; } .raven-hero-pyramid__row > .raven-hero-cube:nth-child(8) { grid-row: 4 !important; grid-column: 11 / 15 !important; } } /* ===== HOTFIX CART QV ===== */ /* ===== 1) Quick View modal — size pills + close X ===== */ dialog.quick-add-modal, dialog.quick-add-modal.dialog-modal, .quick-add-modal.dialog-modal { --color-foreground: #e9eef7 !important; --color-background: #060912 !important; color: #e9eef7 !important; } dialog.quick-add-modal .quick-add-modal__close, dialog.quick-add-modal button.close-button, dialog.quick-add-modal .close-button.quick-add-modal__close, dialog.quick-add-modal button[aria-label*="Close" i] { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 30 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; padding: 0 !important; margin: 0 !important; border: 1px solid rgba(233, 238, 247, 0.55) !important; border-radius: 4px !important; background: rgba(6, 9, 18, 0.85) !important; background-color: rgba(6, 9, 18, 0.85) !important; color: #e9eef7 !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer !important; } dialog.quick-add-modal .quick-add-modal__close svg, dialog.quick-add-modal .close-button svg { display: block !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; opacity: 1 !important; visibility: visible !important; } dialog.quick-add-modal .quick-add-modal__close svg path, dialog.quick-add-modal .close-button svg path { stroke: #e9eef7 !important; fill: none !important; opacity: 1 !important; } #header-component .menu-drawer__close-button { background: #060912 !important; border: 1px solid rgba(233, 238, 247, 0.35) !important; color: #e9eef7 !important; box-shadow: none !important; } @media (max-width: 749px) { #header-component:has(details.menu-drawer-container[open]) header-actions, #header-component details.menu-drawer-container[open] > summary { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* Size / variant option controls */ dialog.quick-add-modal variant-picker, dialog.quick-add-modal .variant-picker, dialog.quick-add-modal fieldset.product-form__input, dialog.quick-add-modal .product-form__input { display: block !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; margin: 0 0 14px !important; } dialog.quick-add-modal variant-picker .variant-option, dialog.quick-add-modal .variant-option, dialog.quick-add-modal .product-form__input .option-values { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; overflow: visible !important; } dialog.quick-add-modal .variant-option__button-label, dialog.quick-add-modal label.variant-option__button-label, dialog.quick-add-modal .option-value, dialog.quick-add-modal .option-value__label, dialog.quick-add-modal variant-picker button, dialog.quick-add-modal .product-form__input label, dialog.quick-add-modal .product-form__input button, dialog.quick-add-modal fieldset label { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 40px !important; padding: 8px 12px !important; margin: 0 !important; border: 1px solid rgba(233, 238, 247, 0.5) !important; border-radius: 4px !important; background: transparent !important; background-color: transparent !important; color: #e9eef7 !important; font-size: 0.85rem !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; white-space: nowrap !important; z-index: 1 !important; } dialog.quick-add-modal .variant-option__button-label span, dialog.quick-add-modal .option-value__label, dialog.quick-add-modal variant-picker button span { color: #e9eef7 !important; font-size: inherit !important; opacity: 1 !important; visibility: visible !important; position: static !important; clip: auto !important; width: auto !important; height: auto !important; } /* selected */ dialog.quick-add-modal input:checked + .variant-option__button-label, dialog.quick-add-modal .variant-option__button-label[aria-pressed="true"], dialog.quick-add-modal button[aria-pressed="true"], dialog.quick-add-modal .option-value[aria-selected="true"] { border-color: #e9eef7 !important; background: rgba(233, 238, 247, 0.12) !important; } /* Keep buy row below variants — no overlap */ dialog.quick-add-modal .product-form, dialog.quick-add-modal product-form-component, dialog.quick-add-modal .buy-buttons, dialog.quick-add-modal .product-form__buttons { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; position: relative !important; z-index: 2 !important; margin-top: 8px !important; clear: both !important; } dialog.quick-add-modal .quantity-selector, dialog.quick-add-modal quantity-selector-component { position: relative !important; z-index: 2 !important; } dialog.quick-add-modal .add-to-cart-button, dialog.quick-add-modal button[name="add"], dialog.quick-add-modal .product-form__submit { color: #060912 !important; background: #e9eef7 !important; border: 1px solid #e9eef7 !important; opacity: 1 !important; visibility: visible !important; } /* ===== 3) Cart totals: before / after / saved ===== */ .raven-cart-savings { display: grid !important; gap: 4px !important; margin: 8px 0 12px !important; padding: 10px 0 !important; border-top: 1px solid rgba(110, 110, 110, 0.35) !important; text-align: center !important; font-size: 0.9rem !important; letter-spacing: 0.04em !important; color: #c5cddc !important; } .raven-cart-savings__row { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 0 4px !important; } .raven-cart-savings__was { text-decoration: line-through !important; color: #8b97ae !important; } .raven-cart-savings__now { color: #e9eef7 !important; font-weight: 600 !important; } .raven-cart-savings__saved { color: #7dcea0 !important; } .raven-cart-savings[hidden] { display: none !important; } /* ===== HOTFIX BUNDLE HEADER CART ===== */ /* ===== Bundle step banner ===== */ .raven-look-banner { display: block !important; text-align: center !important; padding: 18px 16px 12px !important; margin: 0 auto 8px !important; max-width: 920px !important; color: #e9eef7 !important; } .raven-look-banner__kicker { letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: 0.72rem !important; color: #8b97ae !important; margin: 0 0 6px !important; } .raven-look-banner__title { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: clamp(1.05rem, 3.2vw, 1.55rem) !important; font-weight: 400 !important; margin: 0 0 8px !important; color: #e9eef7 !important; } .raven-look-banner__sub { color: #c5cddc !important; margin: 0 auto !important; max-width: 36rem !important; line-height: 1.45 !important; font-size: 0.92rem !important; } body[data-raven-look] .collection-hero__title, body[data-raven-look] .collection-title, body[data-raven-look] #MainContent h1.collection-hero__title, body[data-raven-look] .raven-products-intro .title { display: none !important; } /* ===== Cart shipping row ===== */ .raven-cart-shipping { display: grid !important; gap: 4px !important; margin: 4px 0 10px !important; padding: 8px 0 0 !important; text-align: center !important; font-size: 0.88rem !important; letter-spacing: 0.03em !important; color: #c5cddc !important; } .raven-cart-shipping__row { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 0 4px !important; } .raven-cart-shipping__free { color: #7dcea0 !important; font-weight: 600 !important; } .raven-cart-shipping__hint { color: #8b97ae !important; font-size: 0.8rem !important; } .raven-cart-shipping[hidden] { display: none !important; } /* ===== PDP complementary gallery ===== */ .raven-complementary { margin: 28px auto 8px !important; padding: 0 12px 12px !important; max-width: 1100px !important; text-align: center !important; } .raven-complementary__title { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: clamp(0.95rem, 2.5vw, 1.25rem) !important; font-weight: 400 !important; color: #e9eef7 !important; margin: 0 0 14px !important; } .raven-complementary__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } @media screen and (min-width: 750px) { .raven-complementary__row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; } } .raven-complementary__card { display: block !important; text-decoration: none !important; color: #e9eef7 !important; } .raven-complementary__card img { width: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; background: #0b101c !important; } .raven-complementary__name { margin: 8px 0 2px !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.3 !important; } .raven-complementary__price { font-size: 0.8rem !important; color: #c5cddc !important; } /* Mobile header logo size — must beat earlier 40px rules in this same file */ @media screen and (max-width: 749px) { #header-component a.header-logo img, #header-component .header-logo img, #header-component .header__heading-logo, #header-component .header__heading-logo img, #header-component .header__heading img, #header-component .header__logo img, #header-component header .header__heading-logo-wrapper img { height: 56px !important; max-height: 56px !important; min-height: 56px !important; width: auto !important; max-width: 46vw !important; min-width: 96px !important; object-fit: contain !important; object-position: center center !important; } } /* ===== HOTFIX QV FLICKER ===== */ /* Kill SHOT 54 infinite grid animation on Quick View — was causing flicker */ dialog.quick-add-modal, dialog.quick-add-modal.dialog-modal, .quick-add-modal.dialog-modal { animation: none !important; animation-name: none !important; animation-duration: 0s !important; background-image: none !important; background-color: #060912 !important; background: #060912 !important; } dialog.quick-add-modal .quick-add-modal__content, dialog.quick-add-modal product-component.quick-add-modal__content, dialog.quick-add-modal .product-details, dialog.quick-add-modal .group-block, dialog.quick-add-modal .group-block-content { animation: none !important; background-image: none !important; } /* Stable media stage — not transparent over animated grid */ dialog.quick-add-modal media-gallery, dialog.quick-add-modal .media-gallery, dialog.quick-add-modal slideshow-component, dialog.quick-add-modal slideshow-container, dialog.quick-add-modal slideshow-slides, dialog.quick-add-modal .product-media-container, dialog.quick-add-modal .product-media, dialog.quick-add-modal .product-media-container--image, dialog.quick-add-modal .media, dialog.quick-add-modal .media-fit, dialog.quick-add-modal .group-block__media-wrapper { background: #0b101c !important; background-color: #0b101c !important; animation: none !important; } dialog.quick-add-modal media-gallery img, dialog.quick-add-modal .product-media img, dialog.quick-add-modal img.product-media__image, dialog.quick-add-modal slideshow-slide img { background: #0b101c !important; background-color: #0b101c !important; opacity: 1 !important; animation: none !important; transition: none !important; } /* Only the active slide is visible — no stacked semi-transparent frames */ dialog.quick-add-modal slideshow-slide[aria-hidden="true"], dialog.quick-add-modal .slideshow-slide[aria-hidden="true"], dialog.quick-add-modal slideshow-slide[hidden], dialog.quick-add-modal .slideshow-slide[hidden] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="false"], dialog.quick-add-modal .slideshow-slide[aria-hidden="false"], dialog.quick-add-modal slideshow-slide:not([aria-hidden="true"]):not([hidden]) { opacity: 1 !important; visibility: visible !important; z-index: 1 !important; } /* Preserve CART_QV close X + size contrast */ dialog.quick-add-modal .quick-add-modal__close, dialog.quick-add-modal button.close-button, dialog.quick-add-modal .close-button.quick-add-modal__close { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; background: rgba(6, 9, 18, 0.85) !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.35) !important; opacity: 1 !important; visibility: visible !important; } dialog.quick-add-modal .variant-option__button-label, dialog.quick-add-modal .option-value__label, dialog.quick-add-modal variant-picker button, dialog.quick-add-modal fieldset label { color: #e9eef7 !important; opacity: 1 !important; visibility: visible !important; } /* ===== HOTFIX PDP HEADER QV BUNDLE ===== */ /* ========== B) Skip-to-content: hidden unless keyboard focus ========== */ .skip-to-content-link, a.skip-to-content-link, .skip-to-content-link.button-secondary { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; z-index: 0 !important; } .skip-to-content-link:focus, .skip-to-content-link:focus-visible, a.skip-to-content-link:focus, a.skip-to-content-link:focus-visible { left: 12px !important; top: 12px !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 10px 14px !important; clip: auto !important; overflow: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 100000 !important; background: #060912 !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.5) !important; } /* ========== B) Desktop l10n popover — fixed overlay, no header collapse ========== */ @media screen and (min-width: 750px) { #header-component, #header-component .header, #header-component .header__columns, #header-component header-actions { overflow: visible !important; } dropdown-localization-component .localization-wrapper, dropdown-localization-component .localization-wrapper.right-bound, dropdown-localization-component .localization-wrapper.left-bound, dropdown-localization-component .localization-wrapper.color-custom-popover { position: fixed !important; top: calc(var(--header-height, 64px) + 8px) !important; right: 16px !important; left: auto !important; width: min(320px, calc(100vw - 24px)) !important; max-width: min(320px, calc(100vw - 24px)) !important; max-height: min(70vh, 28rem) !important; overflow: auto !important; z-index: 10060 !important; transform: none !important; margin: 0 !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important; } dropdown-localization-component.raven-l10n--language .localization-wrapper { right: 16px !important; } dropdown-localization-component.raven-l10n--location .localization-wrapper { right: 96px !important; } /* Keep header row intact while open */ #header-component .header__columns { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; } #header-component header-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; } } /* ========== B) Mobile cart — force visible 44px on the right ========== */ @media screen and (max-width: 749px) { #header-component header-actions .account-button { display: none !important; } #header-component header-actions > button.header-actions__action[aria-controls="cart-drawer"], #header-component header-actions button.header-actions__action[aria-controls="cart-drawer"], #header-component button.header-actions__action[aria-controls="cart-drawer"], #header-component header-actions > a[href*="/cart"], #header-component header-actions cart-icon-component { position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; pointer-events: auto !important; z-index: 30 !important; color: #e9eef7 !important; background: transparent !important; flex: 0 0 44px !important; } #header-component button.header-actions__action[aria-controls="cart-drawer"] svg, #header-component button.header-actions__action[aria-controls="cart-drawer"] .svg-wrapper { width: 22px !important; height: 22px !important; display: block !important; opacity: 1 !important; visibility: visible !important; stroke: #e9eef7 !important; fill: none !important; } #header-component .search-action { display: none !important; } } /* ========== C) Home mobile DROP cards — larger horizontal rail ========== */ @media screen and (max-width: 749px) { :root { --raven-hero-base: clamp(42vw, 44vw, 48vw) !important; } .raven-hero-pyramid__row { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 4px 12px 12px !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; } .raven-hero-pyramid__quartet { flex: 0 0 auto !important; width: min(88vw, calc(var(--raven-hero-base) * 2.15)) !important; min-width: 78vw !important; scroll-snap-align: start !important; } .raven-hero-cube, .raven-hero-cube.sz-100, .raven-hero-cube.sz-90, .raven-hero-cube.sz-80, .raven-hero-cube.sz-70, .raven-hero-cube.sz-60 { width: var(--raven-hero-base) !important; min-width: var(--raven-hero-base) !important; } .raven-hero-cube .raven-cat-cube__stage { aspect-ratio: 3 / 4 !important; } .raven-hero-pyramid__quartet .drop { font-size: 0.85rem !important; } .raven-hero-pyramid__quartet .name { font-size: 1.15rem !important; } .raven-lock3-drop__cubes { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; overflow-x: auto !important; padding: 0 8px 8px !important; scroll-snap-type: x mandatory !important; } .raven-lock3-drop__cubes .raven-cat-cube, .raven-lock3-drop__cubes a { flex: 0 0 42vw !important; width: 42vw !important; min-width: 42vw !important; scroll-snap-align: start !important; } } /* ========== D) QV — static grid (no animation) + stable media + swatches ========== */ dialog.quick-add-modal, dialog.quick-add-modal.dialog-modal, .quick-add-modal.dialog-modal { animation: none !important; animation-name: none !important; animation-duration: 0s !important; background-color: #060912 !important; background-image: linear-gradient(rgba(200, 220, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 220, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; background-repeat: repeat, repeat, no-repeat !important; } dialog.quick-add-modal .quick-add-modal__content, dialog.quick-add-modal product-component.quick-add-modal__content, dialog.quick-add-modal .product-details, dialog.quick-add-modal .group-block, dialog.quick-add-modal .group-block-content { animation: none !important; background: transparent !important; background-color: transparent !important; background-image: none !important; } dialog.quick-add-modal media-gallery, dialog.quick-add-modal .media-gallery, dialog.quick-add-modal slideshow-component, dialog.quick-add-modal slideshow-container, dialog.quick-add-modal slideshow-slides, dialog.quick-add-modal .product-media-container, dialog.quick-add-modal .product-media, dialog.quick-add-modal .media, dialog.quick-add-modal .media-fit { background: #0b101c !important; background-color: #0b101c !important; animation: none !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="true"], dialog.quick-add-modal .slideshow-slide[aria-hidden="true"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } dialog.quick-add-modal .quick-add-modal__close, dialog.quick-add-modal button.close-button { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; background: rgba(6, 9, 18, 0.85) !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.35) !important; opacity: 1 !important; visibility: visible !important; z-index: 5 !important; } /* Color swatches = circles; Size stays pills */ dialog.quick-add-modal .variant-option__button-label--has-swatch, dialog.quick-add-modal label.variant-option__button-label--has-swatch { min-width: 40px !important; min-height: 40px !important; width: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(233, 238, 247, 0.45) !important; background: transparent !important; overflow: hidden !important; } dialog.quick-add-modal .variant-option__button-label--has-swatch .swatch, dialog.quick-add-modal .swatch { display: block !important; width: 100% !important; height: 100% !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; background-image: var(--swatch-background) !important; background-size: cover !important; background-position: center !important; background-color: var(--swatch-color, transparent) !important; opacity: 1 !important; visibility: visible !important; } dialog.quick-add-modal input:checked + .variant-option__button-label--has-swatch { border-color: #e9eef7 !important; box-shadow: 0 0 0 2px rgba(233, 238, 247, 0.35) !important; background: transparent !important; } dialog.quick-add-modal .variant-option:not(.variant-option--swatches) .variant-option__button-label, dialog.quick-add-modal .variant-option--buttons:not(.variant-option--swatches) .variant-option__button-label { min-width: 44px !important; min-height: 40px !important; padding: 8px 12px !important; border-radius: 4px !important; border: 1px solid rgba(233, 238, 247, 0.5) !important; background: transparent !important; color: #e9eef7 !important; } /* ========== E) PDP desktop 50/50 top row ========== */ @media screen and (min-width: 750px) { body.template-product product-component.product-information__grid, body.template-product .product-information__grid, body.template-product product-component.product-information--media-left, body.template-product .product-information .product-information__grid, #MainContent product-component.product-information__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto !important; column-gap: 24px !important; gap: 24px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; --product-media-width: 50% !important; } body.template-product .product-information__media, body.template-product .product-information__media.sticky-content, #MainContent .product-information__media { width: 100% !important; max-width: 100% !important; grid-column: 1 !important; position: sticky !important; top: calc(var(--header-height, 64px) + 12px) !important; align-self: start !important; } body.template-product .product-information__media media-gallery, body.template-product .product-information__media .product-media, body.template-product .product-information__media slideshow-component { width: 100% !important; max-width: 100% !important; } body.template-product .product-details, #MainContent .product-details { width: 100% !important; max-width: 100% !important; min-width: 0 !important; grid-column: 2 !important; } /* Hide long desc / table inside buy column once relocated */ body.template-product .product-details rte-formatter[data-raven-pdp-moved], body.template-product .product-details .text-block[data-raven-pdp-moved], body.template-product .product-details table[data-raven-pdp-moved] { display: none !important; } /* Hide leftover theme Read more in buy column after move */ body.template-product .product-details .show-more__button, body.template-product .product-details button.show-more, body.template-product .product-details .read-more, body.template-product .product-details [data-show-more], body.template-product .product-details .text-block__read-more, body.template-product .product-details button[name="show-more"], body.template-product:has([data-raven-pdp-below]) .product-details .show-more, body.template-product:has([data-raven-pdp-below]) .product-details button:is(.show-more__button, .read-more) { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } /* Below-fold description + size guide */ .raven-pdp-below { display: block !important; width: min(920px, calc(100% - 32px)) !important; max-width: 920px !important; margin: 28px auto 40px !important; padding: 0 16px !important; box-sizing: border-box !important; } .raven-pdp-desc { color: #c5cddc !important; line-height: 1.55 !important; font-size: 0.95rem !important; letter-spacing: 0.02em !important; } .raven-pdp-desc.is-clamped { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 5 !important; line-clamp: 5 !important; overflow: hidden !important; max-height: 8.2em !important; } .raven-pdp-desc.is-expanded { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; max-height: none !important; overflow: visible !important; } .raven-pdp-readmore { display: inline-flex !important; margin: 10px 0 18px !important; padding: 8px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid rgba(233, 238, 247, 0.55) !important; color: #e9eef7 !important; font-size: 0.78rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; cursor: pointer !important; } .raven-pdp-size-title { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-size: 1rem !important; color: #e9eef7 !important; margin: 8px 0 12px !important; text-align: center !important; } .raven-pdp-below table, body.template-product #MainContent .raven-pdp-below table, body.template-product .raven-pdp-below table { width: 100% !important; border-collapse: collapse !important; table-layout: auto !important; background: #0b101c !important; color: #e9eef7 !important; filter: none !important; margin: 0 auto !important; } .raven-pdp-below table th, .raven-pdp-below table td, body.template-product .raven-pdp-below table th, body.template-product .raven-pdp-below table td { background: #0b101c !important; background-color: #0b101c !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.28) !important; padding: 10px 8px !important; text-align: center !important; font-size: 0.82rem !important; line-height: 1.25 !important; vertical-align: middle !important; } .raven-pdp-below table tr:first-child td, .raven-pdp-below table tr:first-child th, .raven-pdp-below table td:first-child, .raven-pdp-below table th:first-child { background: #060912 !important; color: #e9eef7 !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .raven-pdp-below table strong { color: #e9eef7 !important; font-weight: 600 !important; } /* Stop earlier clamp from hitting price / wrong rte */ body.template-product product-price.rte, body.template-product product-price { -webkit-line-clamp: unset !important; line-clamp: unset !important; max-height: none !important; overflow: visible !important; display: block !important; } /* ===== HOTFIX RAVEN UI BATCH ===== */ /* ===== 1) Desktop header — undo flex break; keep Horizon grid ===== */ @media screen and (min-width: 750px) { #header-component .header__columns { display: grid !important; flex-wrap: unset !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; width: 100% !important; } #header-component header-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; justify-content: flex-end !important; } #header-component .header__drawer, #header-component header-drawer { display: none !important; } dropdown-localization-component .localization-wrapper, dropdown-localization-component .localization-wrapper.right-bound, dropdown-localization-component .localization-wrapper.left-bound { position: fixed !important; top: calc(var(--header-height, 64px) + 8px) !important; right: 16px !important; left: auto !important; width: min(320px, calc(100vw - 24px)) !important; max-height: min(70vh, 28rem) !important; overflow: auto !important; z-index: 10060 !important; transform: none !important; } } .skip-to-content-link:not(:focus):not(:focus-visible) { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; opacity: 0 !important; pointer-events: none !important; } /* ===== 2) Mobile header: [☰] — [LOGO] — [ILS][EN][CART] ===== */ @media screen and (max-width: 749px) { #header-component .header__columns { position: relative !important; display: flex !important; align-items: center !important; min-height: 64px !important; padding-inline: 6px 8px !important; width: 100% !important; box-sizing: border-box !important; } #header-component .search-action { display: none !important; } #header-component .header__drawer, #header-component header-drawer { order: 1 !important; position: relative !important; z-index: 4 !important; flex: 0 0 auto !important; } #header-component a.header-logo, #header-component .header-logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 3 !important; margin: 0 !important; } #header-component header-actions { order: 3 !important; margin-left: auto !important; margin-right: 0 !important; position: relative !important; right: auto !important; left: auto !important; top: auto !important; transform: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 2px !important; z-index: 5 !important; flex: 0 0 auto !important; } #header-component header-actions .account-button { display: none !important; } #header-component header-actions .raven-l10n--location, #header-component header-actions .raven-l10n--language { position: static !important; transform: none !important; left: auto !important; top: auto !important; margin: 0 !important; } #header-component .raven-l10n .dropdown-localization__button { min-width: 42px !important; padding-inline: 0.25rem !important; font-size: 0.68rem !important; } #header-component button.header-actions__action[aria-controls="cart-drawer"], #header-component header-actions button.header-actions__action[aria-controls="cart-drawer"] { position: static !important; right: auto !important; top: auto !important; transform: none !important; width: 44px !important; height: 44px !important; display: inline-flex !important; opacity: 1 !important; visibility: visible !important; z-index: 6 !important; margin: 0 !important; flex: 0 0 44px !important; } } /* ===== 3) Bundle steps smaller ===== */ .raven-bundle-step { max-width: 420px !important; padding: 12px 12px 14px !important; margin: 10px auto !important; } .raven-step-car { width: min(160px, 42vw) !important; aspect-ratio: 3 / 4 !important; margin: 6px auto 10px !important; } .raven-bundle-step h2, .raven-bundle-step h3, .raven-bundle-steps h2, .raven-bundle-steps h3 { font-size: clamp(0.95rem, 2vw, 1.15rem) !important; margin: 4px 0 !important; } /* ===== 4) Look-step copy minimal ===== */ body[data-raven-look] .raven-look-banner__kicker { display: none !important; } body[data-raven-look] .raven-look-banner__sub { font-size: 0.85rem !important; max-width: 28rem !important; margin: 0 auto 8px !important; } body[data-raven-look] .raven-look-banner { padding: 10px 12px 6px !important; } body[data-raven-look] .collection-hero, body[data-raven-look] .collection-hero__description, body[data-raven-look] .raven-products-intro, body[data-raven-look] .raven-products-intro p, body[data-raven-look] .raven-bridge-copy, body[data-raven-look] #MainContent .text-block:not(.raven-look-banner):not(:has(variant-picker)):not(:has(.product-grid)) { /* hide slogan stacks when look builder active — keep filters/grid */ } body[data-raven-look] .raven-products-intro, body[data-raven-look] [data-raven-products-intro] { display: none !important; } body[data-raven-look] #MainContent > .shopify-section:first-of-type .rte, body[data-raven-look] #MainContent .collection-wrapper > .rte { display: none !important; } /* ===== 5) QV gallery — one slide + arrows; no black stage ===== */ dialog.quick-add-modal { animation: none !important; background-color: #060912 !important; background-image: linear-gradient(rgba(200, 220, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 220, 255, 0.10) 1px, transparent 1px), linear-gradient(90deg, transparent 0%, rgba(200, 220, 255, 0.14) 50%, transparent 100%) !important; background-size: 40px 40px, 40px 40px, 55% 100% !important; } dialog.quick-add-modal slideshow-component, dialog.quick-add-modal .slideshow-component, dialog.quick-add-modal slideshow-container, dialog.quick-add-modal slideshow-slides { position: relative !important; display: block !important; min-height: 280px !important; background: transparent !important; overflow: hidden !important; } dialog.quick-add-modal slideshow-slide, dialog.quick-add-modal .slideshow-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; background: transparent !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="false"], dialog.quick-add-modal slideshow-slide:not([aria-hidden="true"]):first-child, dialog.quick-add-modal .slideshow-slide.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1 !important; position: relative !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="true"] { opacity: 0 !important; visibility: hidden !important; position: absolute !important; height: 0 !important; overflow: hidden !important; } dialog.quick-add-modal .product-media, dialog.quick-add-modal .product-media-container, dialog.quick-add-modal media-gallery, dialog.quick-add-modal img { background: transparent !important; background-color: transparent !important; } dialog.quick-add-modal slideshow-controls, dialog.quick-add-modal .slideshow-controls, dialog.quick-add-modal button.slideshow-control, dialog.quick-add-modal .slider-button, dialog.quick-add-modal [name="previous"], dialog.quick-add-modal [name="next"], dialog.quick-add-modal button[aria-label*="Previous" i], dialog.quick-add-modal button[aria-label*="Next" i] { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 5 !important; } dialog.quick-add-modal .quick-add-modal__close { width: 44px !important; height: 44px !important; background: rgba(6, 9, 18, 0.85) !important; z-index: 6 !important; } dialog.quick-add-modal .variant-option__button-label--has-swatch { width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important; } dialog.quick-add-modal .variant-option__button-label--has-swatch .swatch { border-radius: 50% !important; width: 100% !important; height: 100% !important; background-image: var(--swatch-background) !important; background-size: cover !important; } dialog.quick-add-modal .variant-option:not(.variant-option--swatches) .variant-option__button-label { border-radius: 4px !important; min-width: 44px !important; padding: 8px 12px !important; color: #e9eef7 !important; } /* ===== 7) COMPLETE THE FIT cubes ===== */ .raven-complementary__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } @media (min-width: 750px) { .raven-complementary__row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .raven-complementary__cube { display: block !important; text-decoration: none !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.4) !important; padding: 6px !important; background: transparent !important; } .raven-complementary__cube .raven-cat-cube__stage, .raven-complementary__cube .car { position: relative !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; background: transparent !important; } .raven-complementary__cube .slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; } .raven-complementary__cube .slide.is-on { opacity: 1 !important; } .raven-complementary__cube img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: transparent !important; } .raven-complementary__label { margin-top: 8px !important; font-size: 0.75rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* ===== 8) Mobile home DROP — 2 large cubes ===== */ @media screen and (max-width: 749px) { .raven-hero-pyramid__row { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 10px !important; overflow: hidden !important; padding: 8px !important; } .raven-hero-pyramid__quartet { display: none !important; } /* show only two drop labels via JS-built cubes when present */ .raven-home-drop-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 8px 10px !important; width: 100% !important; } .raven-home-drop-pair .raven-home-drop-cube { border: 1px solid rgba(233, 238, 247, 0.4) !important; padding: 6px !important; background: transparent !important; } .raven-home-drop-pair .raven-cat-cube__stage { aspect-ratio: 3 / 4 !important; background: transparent !important; } .raven-home-drop-pair img { background: transparent !important; object-fit: contain !important; } } /* ===== 9) Drop page category row + bundles CTA ===== */ .raven-drop-cats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; max-width: 960px !important; margin: 12px auto 20px !important; padding: 0 12px !important; } @media (min-width: 750px) { .raven-drop-cats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .raven-drop-cats .raven-complementary__cube { margin: 0 !important; } .raven-drop-bundles { margin: 28px auto !important; } /* ===== 10) Product cards — tight + transparent + border ===== */ .product-card, [data-testid="product-grid"] .product-card { border: 1px solid rgba(233, 238, 247, 0.35) !important; padding: 6px !important; row-gap: 4px !important; gap: 4px !important; background: transparent !important; } .product-card .card-gallery, .product-card .product-card__image, .product-card .product-media, .product-card .media, .product-card .media-fit { aspect-ratio: 4 / 5 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; } .product-card img, .product-card .product-media img { object-fit: contain !important; object-position: center center !important; background: transparent !important; background-color: transparent !important; width: 100% !important; height: 100% !important; } .product-card .price, .product-card product-price, .product-card .product-card__content, .product-card product-title, .product-card .product-title { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 4px !important; } /* ===== HOTFIX RAVEN UI BATCH-2 ===== */ /* ===== 7) Header — grid only on desktop ===== */ @media screen and (min-width: 750px) { #header-component .header__columns, #header-component .header__row--top .header__columns, #header-component[data-menu-style] .header__columns { display: grid !important; flex-wrap: unset !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; width: 100% !important; min-width: 0 !important; } #header-component header-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; flex-shrink: 0 !important; align-items: center !important; gap: 4px !important; justify-content: flex-end !important; min-width: 0 !important; } #header-component .header__menu, #header-component mega-menu, #header-component .menu-list { min-width: 0 !important; overflow: hidden !important; } #header-component .menu-list__list-item, #header-component .menu-list a { white-space: nowrap !important; } } /* ===== 2+3) Product cards — sharp + no empty gap under media ===== */ .product-card, [data-testid="product-grid"] .product-card { position: relative !important; row-gap: 0 !important; gap: 0 !important; padding: 4px !important; display: flex !important; flex-direction: column !important; } .product-card .card-gallery, .product-card .product-card__image, .product-card .product-media, .product-card .media, .product-card .media-fit, .product-card .product-card-media { aspect-ratio: unset !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; padding-bottom: 0 !important; background: transparent !important; background-color: transparent !important; min-height: 0 !important; flex: 0 0 auto !important; } .product-card img, .product-card .product-media img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 5 !important; object-fit: cover !important; object-position: center center !important; background: transparent !important; image-rendering: auto !important; display: block !important; } .product-card .quick-add, .product-card .quick-add__button, .product-card .product-card__quick-add, .product-card button.quick-add__button--choose { position: absolute !important; bottom: 10px !important; right: 10px !important; z-index: 3 !important; margin: 0 !important; } .product-card .price, .product-card product-price, .product-card .product-card__content, .product-card product-title, .product-card .product-title, .product-card .text-block, .product-card .card-gallery + *, .product-card .product-media + * { margin-top: 0 !important; margin-block-start: 0 !important; margin-block-end: 0 !important; padding-top: 2px !important; padding-bottom: 0 !important; } /* ===== 4) QV — one slide + hide number pagination; keep arrows ===== */ dialog.quick-add-modal slideshow-slide, dialog.quick-add-modal .slideshow-slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; height: 100% !important; overflow: hidden !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="false"], dialog.quick-add-modal slideshow-slide:not([aria-hidden="true"]):first-of-type, dialog.quick-add-modal .slideshow-slide.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; position: relative !important; z-index: 1 !important; } dialog.quick-add-modal ol, dialog.quick-add-modal .slideshow-controls--pagination, dialog.quick-add-modal .slideshow-controls--counter, dialog.quick-add-modal .slideshow-controls--page-dots, dialog.quick-add-modal .page-dots, dialog.quick-add-modal .slider-counter { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } dialog.quick-add-modal slideshow-controls button:not([name="previous"]):not([name="next"]):not([aria-label*="Previous" i]):not([aria-label*="Next" i]), dialog.quick-add-modal .slideshow-controls button:not([name="previous"]):not([name="next"]):not([aria-label*="Previous" i]):not([aria-label*="Next" i]) { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; pointer-events: none !important; } dialog.quick-add-modal button[name="previous"], dialog.quick-add-modal button[name="next"], dialog.quick-add-modal button[aria-label*="Previous" i], dialog.quick-add-modal button[aria-label*="Next" i] { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 5 !important; width: auto !important; height: auto !important; } /* ===== 8) COMPLETE THE FIT — 6 larger cubes, 3×2 ===== */ .raven-complementary { max-width: min(1200px, 96vw) !important; margin: 28px auto 12px !important; padding: 0 10px 12px !important; } .raven-complementary__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } @media (min-width: 750px) { .raven-complementary__row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; } } .raven-complementary__cube { min-width: 0 !important; padding: 8px !important; } .raven-complementary__cube .raven-cat-cube__stage, .raven-complementary__cube .car { aspect-ratio: 3 / 4 !important; min-height: 180px !important; } @media (min-width: 750px) { .raven-complementary__cube .raven-cat-cube__stage, .raven-complementary__cube .car { min-height: 240px !important; } } .raven-complementary__cube img { object-fit: cover !important; } .raven-complementary__label { font-size: 0.82rem !important; margin-top: 10px !important; } /* hide legacy recommendation cards */ .raven-complementary__card { display: none !important; } /* ===== 9) Mobile l10n — only EN repositioned (near hamburger); ILS stays ===== */ @media screen and (max-width: 749px) { #header-component .header__columns { position: relative !important; } /* ILS — stay in header-actions cluster (near cart) */ #header-component header-actions .raven-l10n--location { position: static !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; order: 1 !important; margin: 0 !important; } /* EN — parked next to hamburger via JS DOM move + absolute fallback */ #header-component .header__columns > .raven-l10n--language, #header-component header-drawer + .raven-l10n--language, #header-component .header__drawer + .raven-l10n--language { position: relative !important; left: auto !important; top: auto !important; transform: none !important; order: 2 !important; flex: 0 0 auto !important; margin: 0 0 0 2px !important; z-index: 5 !important; } #header-component header-actions .raven-l10n--language { /* if still inside actions before JS move — don't drag ILS */ position: static !important; transform: none !important; } } /* ===== HOTFIX RAVEN UI BATCH-3 ===== */ /* ===== A) Product cards — no zoom, tight gap, centered contain ===== */ .product-card, [data-testid="product-grid"] .product-card, body[data-raven-look] .product-card { position: relative !important; row-gap: 0 !important; gap: 0 !important; padding: 4px !important; display: flex !important; flex-direction: column !important; } .product-card .card-gallery, .product-card .product-card__image, .product-card .product-media, .product-card .media, .product-card .media-fit, .product-card .product-card-media, body[data-raven-look] .product-card .card-gallery, body[data-raven-look] .product-card .product-media { aspect-ratio: unset !important; margin: 0 !important; margin-bottom: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; } .product-card img, .product-card .product-media img, body[data-raven-look] .product-card img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: unset !important; object-fit: contain !important; object-position: center center !important; background: transparent !important; display: block !important; } .product-card .quick-add, .product-card .quick-add__button, .product-card button.quick-add__button--choose { position: absolute !important; bottom: 8px !important; right: 8px !important; z-index: 3 !important; margin: 0 !important; } .product-card .price, .product-card product-price, .product-card .product-card__content, .product-card product-title, .product-card .product-title, .product-card .text-block, .product-card .card-gallery + *, .product-card .product-media + * { margin-top: 0 !important; margin-block-start: 0 !important; padding-top: 2px !important; } /* ===== B) Bundle-step cube — large, fill, hub only ===== */ .raven-bundle-step { max-width: 520px !important; } .raven-step-car { width: min(320px, 78vw) !important; aspect-ratio: 3 / 4 !important; margin: 8px auto 12px !important; overflow: hidden !important; background: transparent !important; } .raven-step-car .slide, .raven-step-car .car .slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; } .raven-step-car .slide.is-on, .raven-step-car .car .slide.is-on { opacity: 1 !important; } .raven-step-car, .raven-step-car .car { position: relative !important; } .raven-step-car .slide img, .raven-step-car img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* ===== C) Multi-item cubes — fill + loop-ready stack ===== */ .raven-complementary__cube .raven-cat-cube__stage, .raven-complementary__cube .car, .raven-drop-cats .raven-complementary__cube .raven-cat-cube__stage, .raven-cat-cube .raven-cat-cube__stage, .raven-cat-cube .car { position: relative !important; aspect-ratio: 3 / 4 !important; overflow: hidden !important; background: transparent !important; min-height: 0 !important; } .raven-complementary__cube .slide, .raven-drop-cats .raven-complementary__cube .slide, .raven-cat-cube .slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; transition: opacity 0.35s ease !important; } .raven-complementary__cube .slide.is-on, .raven-drop-cats .raven-complementary__cube .slide.is-on, .raven-cat-cube .slide.is-on { opacity: 1 !important; } .raven-complementary__cube img, .raven-drop-cats .raven-complementary__cube img, .raven-cat-cube img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; background: transparent !important; } /* ===== E) QV — one slide + real arrows (no forced first-of-type) ===== */ dialog.quick-add-modal slideshow-component, dialog.quick-add-modal slideshow-container, dialog.quick-add-modal slideshow-slides, dialog.quick-add-modal .slideshow-slides { position: relative !important; overflow: hidden !important; min-height: 280px !important; } dialog.quick-add-modal slideshow-slide, dialog.quick-add-modal .slideshow-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="false"], dialog.quick-add-modal .slideshow-slide[aria-hidden="false"], dialog.quick-add-modal slideshow-slide.is-active, dialog.quick-add-modal .slideshow-slide.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 1 !important; position: relative !important; } dialog.quick-add-modal ol, dialog.quick-add-modal .slideshow-controls--pagination, dialog.quick-add-modal .slideshow-controls--counter, dialog.quick-add-modal .slideshow-controls--page-dots, dialog.quick-add-modal .page-dots, dialog.quick-add-modal .slider-counter { display: none !important; } dialog.quick-add-modal slideshow-controls, dialog.quick-add-modal .slideshow-controls { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 6 !important; } dialog.quick-add-modal button[name="previous"], dialog.quick-add-modal button[name="next"], dialog.quick-add-modal button[aria-label*="Previous" i], dialog.quick-add-modal button[aria-label*="Next" i], dialog.quick-add-modal .slideshow-control[name="previous"], dialog.quick-add-modal .slideshow-control[name="next"] { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; width: 44px !important; height: 44px !important; z-index: 7 !important; } /* ===== HOTFIX SITE AUDIT FIX ===== */ /* ===== P0 RESCUE: restore track carousel (BATCH-3 absolute broke translateX) ===== */ .raven-car-track { display: flex !important; flex-direction: row !important; height: 100% !important; width: 100% !important; will-change: transform; } .raven-car-track .slide, .raven-look-entry .raven-car-track .slide, .raven-step-car .raven-car-track .slide, .raven-step-car .car .raven-car-track .slide, .raven-cat-cube .raven-car-track .slide, .raven-hero-cube .raven-car-track .slide, .raven-complementary__cube .raven-car-track .slide, .raven-drop-cats .raven-car-track .slide { position: relative !important; flex: 0 0 100% !important; width: 100% !important; height: 100% !important; opacity: 1 !important; visibility: visible !important; inset: auto !important; pointer-events: auto !important; z-index: auto !important; transition: none !important; } .raven-car-track .slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } [data-raven-carousel] .car, .raven-look-entry .car, .raven-step-car, .raven-step-car .car, .raven-cat-cube .car, .raven-cat-cube .raven-cat-cube__stage { position: relative !important; overflow: hidden !important; } /* Opacity-stack ONLY when NO track (injected CTF / single-fade cubes) */ .raven-cat-cube .car:not(:has(.raven-car-track)) > .slide, .raven-hero-cube .car:not(:has(.raven-car-track)) > .slide, .raven-complementary__cube .car:not(:has(.raven-car-track)) > .slide { position: absolute !important; inset: 0 !important; opacity: 1 !important; visibility: visible !important; } .raven-cat-cube .car:not(:has(.raven-car-track)):has(.slide.is-on) > .slide:not(.is-on), .raven-hero-cube .car:not(:has(.raven-car-track)):has(.slide.is-on) > .slide:not(.is-on), .raven-complementary__cube .car:not(:has(.raven-car-track)):has(.slide.is-on) > .slide:not(.is-on) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .raven-cat-cube .car:not(:has(.raven-car-track)) > .slide.is-on, .raven-hero-cube .car:not(:has(.raven-car-track)) > .slide.is-on, .raven-complementary__cube .car:not(:has(.raven-car-track)) > .slide.is-on { opacity: 1 !important; visibility: visible !important; z-index: 1 !important; } /* B) step car size kept */ .raven-step-car { width: min(320px, 78vw) !important; aspect-ratio: 3 / 4 !important; margin: 8px auto 12px !important; } .raven-look-entry img, .raven-step-car img, .raven-cat-cube img, .raven-complementary__cube img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; background: transparent !important; } /* A/5) product cards — contain, no zoom in look builder */ .product-card img, body[data-raven-look] .product-card img { width: 100% !important; height: auto !important; aspect-ratio: unset !important; object-fit: contain !important; object-position: center center !important; } .product-card .card-gallery, .product-card .product-media { aspect-ratio: unset !important; margin: 0 !important; padding: 0 !important; } .product-card product-title, .product-card .product-title, .product-card .product-card__content { margin-top: 0 !important; padding-top: 2px !important; } /* E) QV one slide + arrows */ dialog.quick-add-modal slideshow-component, dialog.quick-add-modal slideshow-container, dialog.quick-add-modal .slideshow-slides { position: relative !important; overflow: hidden !important; min-height: 280px !important; } dialog.quick-add-modal slideshow-arrows { display: block !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; z-index: 15 !important; } dialog.quick-add-modal slideshow-arrows.mobile\:hidden { display: block !important; } dialog.quick-add-modal slideshow-slide, dialog.quick-add-modal .slideshow-slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } dialog.quick-add-modal slideshow-slide[aria-hidden="false"], dialog.quick-add-modal .slideshow-slide[aria-hidden="false"], dialog.quick-add-modal slideshow-slide.is-active, dialog.quick-add-modal .slideshow-slide.is-active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; position: relative !important; z-index: 1 !important; } dialog.quick-add-modal ol, dialog.quick-add-modal .page-dots, dialog.quick-add-modal .slider-counter { display: none !important; } dialog.quick-add-modal button.slideshow-control--previous, dialog.quick-add-modal button.slideshow-control--next, dialog.quick-add-modal button[aria-label*="Previous" i], dialog.quick-add-modal button[aria-label*="Next" i] { display: inline-flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 20 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(0,0,0,0.55) !important; border: 1px solid rgba(255,255,255,0.85) !important; color: #fff !important; padding: 0 !important; } dialog.quick-add-modal button.slideshow-control--previous, dialog.quick-add-modal button[aria-label*="Previous" i] { left: 8px !important; right: auto !important; } dialog.quick-add-modal button.slideshow-control--next, dialog.quick-add-modal button[aria-label*="Next" i] { right: 8px !important; left: auto !important; } dialog.quick-add-modal slideshow-component, dialog.quick-add-modal .slideshow, dialog.quick-add-modal media-gallery { position: relative !important; } /* ===== HOTFIX SITE STABILIZE CSS ===== */ /* Category / CTF cubes — cover centered (no right bias) */ .raven-drop-cats .raven-complementary__cube img, .raven-complementary__cube img, .raven-cat-cube img, .raven-look-entry img, .raven-step-car img { object-position: center center !important; } .raven-drop-cats .raven-complementary__cube img, .raven-complementary__cube:not(.product-card) img { object-fit: cover !important; } /* Product cards — contain centered, no zoom */ .product-card img, body[data-raven-look] .product-card img { object-fit: contain !important; object-position: center center !important; height: auto !important; aspect-ratio: unset !important; } /* READ MORE must never sit inside titles */ .product-title .show-more__button, .product-title .read-more, .product-title .raven-pdp-readmore, .product-card__title .show-more__button, .product-card__title .read-more, .product-card product-title .show-more__button, .product-card product-title .read-more, h1 .show-more__button, h1 .read-more, h1 .raven-pdp-readmore, .product-information__title .show-more__button, .product-information__title .raven-pdp-readmore { display: none !important; } /* STABILIZE READMORE v2 */ .product-information .show-more__button, .product-details .show-more__button, .product-info .show-more__button, product-info .show-more__button, .buy-buttons-block .show-more__button, .product-form .show-more__button, .product-information button.show-more, .product-information .read-more-link, .product-information .raven-pdp-readmore:not(.raven-pdp-below .raven-pdp-readmore) { display: none !important; } .raven-pdp-below .raven-pdp-readmore { display: inline-flex !important; } /* ===== HOTFIX SITE NOTES FIX CSS ===== */ :root { --raven-h1: clamp(1.35rem, 2.6vw, 1.85rem); --raven-body: clamp(0.92rem, 1.5vw, 1.05rem); --raven-feather-w: 96px; --raven-feather-h: 40px; } /* D9 — unified type + feathers */ .raven-demo-home h2, .raven-complete-look__title, .raven-looks-headline, .raven-title-with-feather h1, .raven-title-with-feather h2, body.template-page h1.main-page-title, body.template-page .main-page-title, body.template-list-collections h1 { font-size: var(--raven-h1) !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 400 !important; } .raven-demo-home .sub, .raven-complete-look__sub, .raven-demo-home p.sub, body.template-page .rte p, .raven-about-copy p { font-size: var(--raven-body) !important; line-height: 1.5 !important; } .raven-feather-icon, .raven-text-feather, .raven-text-feather img, .raven-feather-visible img, span.raven-feather-icon { width: var(--raven-feather-w) !important; height: var(--raven-feather-h) !important; max-width: var(--raven-feather-w) !important; background-size: contain !important; } .raven-text-feather img { width: var(--raven-feather-w) !important; height: auto !important; max-height: var(--raven-feather-h) !important; object-fit: contain !important; } /* D12 — center product images (kill top-center bias) */ .product-card img, .product-card .card-gallery img, body[data-raven-look] .product-card img, .collection-card img, .resource-card img, .raven-cat-cube img, .raven-hero-cube img, .raven-look-entry img, .raven-complementary__cube img, .raven-drop-cats img { object-position: center center !important; } .product-card img, .product-card .card-gallery img, body[data-raven-look] .product-card img { object-fit: contain !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } .product-card .card-gallery, .product-card .product-media { display: flex !important; align-items: center !important; justify-content: center !important; } /* D6 — hide duplicate bundles AFTER FAQ on home */ body.template-index .raven-demo-home > .raven-complete-look.raven-pdp-bundles, body.template-index .raven-demo-home .raven-complete-look[data-raven-lock17="bundles-cta"] { display: none !important; } body.template-index .raven-demo-home > .raven-text-feather:last-of-type, body.template-index #ravenLooks ~ .raven-complete-look { /* keep #ravenLooks visible; only post-faq block hidden via JS class */ } /* D5 — tighten gap bundles → next drop */ #ravenLooks { padding-bottom: 8px !important; margin-bottom: 0 !important; } #ravenNextDrop { padding-top: 12px !important; margin-top: 0 !important; } /* D1/D3/D17 — enlarge heroes / look cards slightly, stay in page */ @media (min-width: 750px) { .raven-look-grid { max-width: min(1100px, 94vw) !important; gap: 18px !important; } .raven-look-entry { max-width: none !important; } .raven-look-entry .car { aspect-ratio: 3 / 4 !important; min-height: 280px !important; } .raven-hero-pyramid { max-width: min(1280px, 96vw) !important; transform: none !important; } .raven-lock3-drops { max-width: min(1400px, 96vw) !important; } } /* D7/D15 footer always on */ .shopify-section-group-footer-group, footer, [id*="footer_nav_raven"], .footer-utilities { display: block !important; visibility: visible !important; opacity: 1 !important; } /* M8 — compact mobile footer row */ @media (max-width: 749px) { [id*="footer_utilities"] .footer-utilities, .footer-utilities, .shopify-section-group-footer-group .footer-utilities { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 8px 12px !important; padding: 12px 14px !important; } [id*="footer_utilities"] .footer-utilities > * { margin: 0 !important; } } /* M2 — mobile home: hide broken pyramid row; show drop pair */ @media (max-width: 749px) { .raven-hero-pyramid__row { display: none !important; } .raven-home-drop-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 10px 12px !important; min-height: 220px !important; } .raven-home-drop-pair .raven-complementary__cube, .raven-home-drop-pair .raven-cat-cube__stage { min-height: 200px !important; } .raven-home-drop-pair .slide, .raven-home-drop-pair .slide.is-on { opacity: 1 !important; visibility: visible !important; position: relative !important; } .raven-home-drop-pair img { object-fit: cover !important; object-position: center center !important; width: 100% !important; height: 100% !important; } } /* D18 — fewer / larger about feathers handled in JS; size via token */ body.template-page:has(.raven-about-copy) .raven-text-feather { margin: 14px auto !important; } /* D19/D21 — tighter about/contact title–logo–copy */ body.template-page:has(.raven-about-hero) #MainContent > .shopify-section:first-child .section, body.template-page:has(.raven-contact-email) #MainContent > .shopify-section:first-child .section { padding-top: 12px !important; padding-bottom: 12px !important; } .raven-about-logo, .raven-contact-logo { margin: 12px auto 16px !important; } /* D23 — FAQ giant paragraphs */ body.template-page:has(.raven-faq-page) #MainContent .text-block.h1, body.template-page:has(.raven-faq-page) #MainContent > .shopify-section:last-of-type .text-block, .raven-faq-page ~ .text-block, #MainContent .raven-faq-giant { font-size: var(--raven-body) !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; opacity: 0.85 !important; } /* ===== HOTFIX NOTES PATCH2 ===== */ /* Force product media visible + centered */ .product-card, .product-card .card-gallery, .product-card .product-card__media, .product-card .product-media, .product-card media-gallery, .product-card .media { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .product-card img, .product-card .card-gallery img, .product-card media-image img, .product-grid .product-card img { width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 120px !important; object-fit: contain !important; object-position: 50% 50% !important; opacity: 1 !important; visibility: visible !important; display: block !important; margin: 0 auto !important; } .raven-home-drop-pair { position: relative !important; z-index: 5 !important; } .raven-home-drop-pair ~ .raven-home-drop-pair { display: none !important; } /* ===== HOTFIX NOTES PATCH3 ===== */ /* D11/D12/D13 — Horizon card-gallery must be GRID so slideshow gets width */ .product-card .card-gallery, .product-grid .product-card .card-gallery, [data-testid="product-grid"] .product-card .card-gallery { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; aspect-ratio: 4 / 5 !important; min-height: 260px !important; height: auto !important; overflow: hidden !important; position: relative !important; background: transparent !important; } .product-card .card-gallery slideshow-component, .product-card .card-gallery slideshow-container, .product-card .card-gallery slideshow-slides, .product-card .card-gallery slideshow-slide, .product-card .card-gallery .product-media-container, .product-card .card-gallery .product-media, .product-card .card-gallery .media { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100% !important; display: block !important; position: relative !important; box-sizing: border-box !important; } .product-card .card-gallery img, .product-card .card-gallery img.product-media__image, .product-card img.product-media__image { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; object-fit: contain !important; object-position: 50% 50% !important; opacity: 1 !important; visibility: visible !important; display: block !important; margin: 0 auto !important; } /* Drops / cats cubes — center contain */ .raven-complementary__cube img, .raven-cat-cube img, .raven-home-drop-pair img, .raven-lock3-drop__cubes img { object-fit: contain !important; object-position: 50% 50% !important; } /* M2 — only one mobile drop pair; hide pyramid row */ @media screen and (max-width: 749px) { .raven-hero-pyramid__row { display: none !important; } .raven-home-drop-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; position: relative !important; z-index: 5 !important; } .raven-home-drop-pair ~ .raven-home-drop-pair { display: none !important; } } /* D6 — hide post-FAQ dup bundles */ body.template-index .raven-demo-home > .raven-complete-look[data-raven-lock17], body.template-index .raven-complete-look[data-raven-lock17="bundles-cta"] { display: none !important; } /* D20 — contact readable */ body.template-page.page-contact #MainContent, body[class*="contact"] #MainContent, #MainContent .contact, .shopify-section:has(form[action*="/contact"]) { min-height: 40vh !important; } #MainContent form[action*="/contact"], #MainContent form#ContactForm { display: block !important; max-width: 640px !important; margin: 24px auto !important; padding: 16px !important; visibility: visible !important; opacity: 1 !important; } /* ===== HOTFIX NOTES PATCH3B ===== */ @media screen and (max-width: 749px) { .raven-home-drop-pair ~ .raven-home-drop-pair { display: none !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /* ===== HOTFIX NOTES P1 ===== */ :root { --raven-h1: clamp(1.55rem, 3.2vw, 2.15rem); --raven-body: clamp(0.95rem, 1.5vw, 1.05rem); --raven-feather: 28px; --raven-feather-gap: 14px; /* D1 — slightly larger desktop heroes */ --raven-hero-base: clamp(108px, 12.2vw, 164px); } @media screen and (max-width: 749px) { :root { --raven-hero-base: clamp(56px, 18vw, 88px); } } /* D9 — one heading / body / feather size site-wide */ #MainContent h1, #MainContent h2, #MainContent h3, #MainContent .h1, #MainContent .h2, #MainContent .heading, #MainContent .section-header, .raven-complete-look__title, .raven-lock3-drop__title, .raven-cat-row__title, .raven-demo-home .section-block > .title, .raven-demo-home .section-block > h2 { font-size: var(--raven-h1) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: 0.08em !important; } #MainContent p, #MainContent .rte, .raven-complete-look__sub, .raven-look-entry .body span:not(.lbl), .raven-demo-home .section-block > p { font-size: var(--raven-body) !important; line-height: 1.55 !important; } .raven-text-feather, .raven-feather-icon, span.raven-text-feather, .raven-look-under .raven-feather-icon { width: var(--raven-feather) !important; height: var(--raven-feather) !important; min-width: var(--raven-feather) !important; min-height: var(--raven-feather) !important; background-size: contain !important; display: inline-block !important; } /* D1 — enlarge desktop heroes slightly */ @media screen and (min-width: 750px) { .raven-hero-pyramid__row { gap: 12px !important; max-width: min(1280px, 96vw) !important; margin-inline: auto !important; } .raven-hero-cube, .raven-hero-pyramid .raven-hero-cube { min-height: 210px !important; } .raven-hero-cube .raven-cat-cube__stage, .raven-hero-cube .car { min-height: 200px !important; aspect-ratio: 3 / 4 !important; } /* D2 — feather ↔ cubes gap */ .raven-hero-pyramid__labels, .raven-hero-pyramid__quartet { margin-top: var(--raven-feather-gap) !important; margin-bottom: 8px !important; } .raven-hero-pyramid__quartet .raven-feather-icon, .raven-hero-pyramid__quartet .raven-text-feather { margin-bottom: 8px !important; } /* D3 — enlarge drops section */ /* D3 min-height strip killed — MASTER A3 */ } /* D17 — slightly larger bundle look cards */ .raven-look-entry, #ravenLooks .raven-look-entry { min-height: 210px !important; } .raven-look-entry .car, #ravenLooks .raven-look-entry .car { min-height: 168px !important; aspect-ratio: 4 / 5 !important; } .raven-look-entry .slide img { object-fit: contain !important; object-position: 50% 50% !important; } /* D5/M5 — tighten gap bundles → next section */ #ravenLooks { margin-bottom: 18px !important; padding-bottom: 8px !important; } #ravenLooks + *, .raven-demo-home #ravenLooks ~ .section-block { margin-top: 12px !important; } /* D18/D19 — About: fewer feathers, tighter stacks */ body.template-page[class*="about"] #MainContent .raven-text-feather:nth-of-type(even), .page-about .raven-text-feather:nth-of-type(even), #MainContent .raven-about-copy .raven-text-feather:nth-of-type(even) { display: none !important; } body.template-page[class*="about"] #MainContent h1, body.template-page[class*="about"] #MainContent h2 { margin-bottom: 10px !important; } body.template-page[class*="about"] #MainContent p { margin-top: 8px !important; margin-bottom: 14px !important; } /* D21/D22 — Contact tighter + uniform feathers */ body.template-page[class*="contact"] #MainContent h1, .raven-contact-h1 { margin: 20px auto 10px !important; } body.template-page[class*="contact"] .raven-text-feather, body.template-page[class*="contact"] .raven-feather-icon { width: var(--raven-feather) !important; height: var(--raven-feather) !important; } /* D23 — FAQ giant leftovers */ .raven-faq-giant, body.template-page[class*="faq"] #MainContent .text-block:not(.raven-faq-list *), body.template-page[class*="faq"] #MainContent .rte > p { font-size: 0.95rem !important; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; line-height: 1.5 !important; } /* M1 — split language / currency on mobile */ @media screen and (max-width: 749px) { #header-component header-actions .raven-l10n--language, #header-component header-actions .raven-l10n--location { display: inline-flex !important; position: static !important; transform: none !important; margin: 0 1px !important; } #header-component header-actions .raven-l10n--language { order: 1 !important; } #header-component header-actions .raven-l10n--location { order: 2 !important; } /* M3 — feather above THE COLLECTIONS */ .raven-demo-home .section-block .raven-text-feather + h2, .raven-demo-home .section-block .raven-feather-icon + h2 { margin-top: 6px !important; } /* M8 — footer utilities one line */ footer .footer-utilities, footer .footer__copyright, .footer .footer-utilities, .shopify-section-group-footer-group .footer-utilities, footer .footer__payment, footer .footer__column--utilities, .footer-utilities, .footer__content-bottom, .footer__copyright { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; font-size: 0.72rem !important; overflow-x: auto !important; } footer .footer-utilities a, .footer-utilities a, footer .footer__copyright a { white-space: nowrap !important; } } /* ===== MASTER FIX GATE A ===== */ /* A1 — Heroes desktop: clip slides inside stage */ .raven-hero-cube, .raven-hero-cube .raven-cat-cube, .raven-hero-cube .raven-cat-cube__stage, .raven-hero-cube .car { overflow: hidden !important; max-width: 100% !important; box-sizing: border-box !important; } .raven-hero-cube .raven-cat-cube__stage { position: relative !important; aspect-ratio: 3 / 4 !important; width: 100% !important; } .raven-hero-cube .car { position: relative !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .raven-hero-cube .raven-car-track { display: flex !important; height: 100% !important; width: 100% !important; } .raven-hero-cube .raven-car-track .slide { position: relative !important; flex: 0 0 100% !important; width: 100% !important; height: 100% !important; opacity: 1 !important; } .raven-hero-cube .car:not(:has(.raven-car-track)) > .slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; } .raven-hero-cube .car:not(:has(.raven-car-track)) > .slide.is-on { opacity: 1 !important; } .raven-hero-cube img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 50% !important; display: block !important; } /* A3 — Drop cubes WIDER (not taller thin strips) */ .raven-demo-home .raven-lock3-drop__cubes, .raven-lock3-drop__cubes, [data-raven-collections-drops] .raven-lock3-drop__cubes { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; width: 100% !important; max-width: min(1400px, 96vw) !important; margin-inline: auto !important; } @media (max-width: 749px) { .raven-demo-home .raven-lock3-drop__cubes, .raven-lock3-drop__cubes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } } .raven-lock3-drop__cubes > .raven-cat-cube, .raven-lock3-drop__cubes > a.raven-cat-cube { min-width: 0 !important; width: 100% !important; } .raven-lock3-drop__cubes .raven-cat-cube__stage, .raven-lock3-drop__cubes .car { position: relative !important; width: 100% !important; aspect-ratio: 3 / 4 !important; min-height: 0 !important; overflow: hidden !important; background: #0a0a0a !important; } .raven-lock3-drop__cubes .slide, .raven-lock3-drop__cubes .raven-car-track .slide { overflow: hidden !important; } .raven-lock3-drop__cubes img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; display: block !important; } /* A4 — product card: ONE slide only (kill first-of-type force-show) */ .product-card .card-gallery { display: grid !important; overflow: hidden !important; aspect-ratio: 4 / 5 !important; position: relative !important; } /* if none marked active, show only first — but keep others absolute zero height contrib */ .product-card .card-gallery img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; } .product-card slideshow-controls, .product-card .slideshow-controls { /* keep native controls if present; don't force fake half-image */ } /* A5 — footer compact */ .shopify-section-group-footer-group > .shopify-section { margin: 0 !important; padding-block: 6px !important; } [id*="footer_nav_raven"], [id*="footer_utilities"] { padding-block: 4px !important; min-height: 0 !important; } [id*="footer_nav_raven"] .footer-content, [id*="footer_utilities"] .footer-utilities, [id*="footer_utilities"] .footer__copyright { margin: 0 !important; padding: 4px 8px !important; gap: 8px !important; } @media (max-width: 749px) { [id*="footer_nav_raven"] nav ul, [id*="footer_nav_raven"] .list-unstyled, [id*="footer_utilities"] .footer-utilities, [id*="footer_utilities"] .footer__copyright { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; gap: 6px !important; white-space: nowrap !important; font-size: 0.7rem !important; } } /* A8 — keep post-FAQ dup bundles dead */ body.template-index .raven-complete-look[data-raven-lock17="bundles-cta"], body.template-index .raven-demo-home > .raven-complete-look.raven-pdp-bundles { display: none !important; } /* ===== MASTER FIX GATE A2 ===== */ /* A4 harden — only one visible product slide */ .product-card .card-gallery { overflow: hidden !important; position: relative !important; } /* B6 / products cat cubes — fill stage */ .raven-drop-cats .raven-cat-cube__stage, .raven-drop-cats .car, [data-raven-drop-cats] .raven-cat-cube__stage, .raven-complementary__cube .raven-cat-cube__stage, body.template-collection .raven-cat-cube__stage { overflow: hidden !important; aspect-ratio: 3 / 4 !important; width: 100% !important; min-height: 180px !important; } .raven-drop-cats img, [data-raven-drop-cats] img, .raven-complementary__cube img, body.template-collection .raven-cat-cube img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; } /* A5 footer — kill huge empty padding */ .shopify-section-group-footer-group { display: flex !important; flex-direction: column !important; } #raven-footer-join, .raven-footer-join, [id*="raven_footer_join"] { order: -3 !important; } [id*="footer_nav_raven"] { order: -2 !important; } [id*="footer_utilities"] { order: -1 !important; } #raven-footer-join .raven-footer-join__frame { min-height: min(52vh, 480px) !important; } /* ===== MASTER FIX GATE B ===== */ /* B1 — feather above THE COLLECTIONS */ #ravenDropCarousels > .raven-collections-feather, #ravenDropCarousels > .raven-feather-icon.raven-collections-feather { display: block !important; margin: 8px auto 6px !important; width: 88px !important; height: 36px !important; } #ravenDropCarousels .kicker { margin-top: 4px !important; margin-bottom: 4px !important; } #ravenDropCarousels .raven-title-with-feather { margin-top: 0 !important; margin-bottom: 8px !important; } #ravenDropCarousels .raven-title-with-feather .raven-feather-icon { display: none !important; /* moved above kicker */ } /* B2 — mobile hero pair */ @media (max-width: 749px) { .raven-hero-pyramid__row { display: none !important; } .raven-home-drop-pair { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 8px 10px !important; width: 100% !important; } .raven-home-drop-pair .raven-cat-cube__stage, .raven-home-drop-pair .car { overflow: hidden !important; aspect-ratio: 3 / 4 !important; width: 100% !important; } .raven-home-drop-pair img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; } .raven-home-drop-pair ~ .raven-home-drop-pair { display: none !important; } /* B4 — collections empty black void */ body.template-list-collections #MainContent > .shopify-section:first-child:not(:has(img)):not(:has(video)):not(:has(.product-grid)):not(:has(.collection-card)), body.template-list-collections #MainContent .raven-text-feather:only-child, body.template-list-collections #MainContent > .shopify-section:first-child .raven-about-logo { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.template-list-collections #MainContent { padding-top: 0 !important; } body.template-list-collections #MainContent .main-page-title, body.template-list-collections #MainContent h1 { margin-top: 12px !important; } /* B5/B6 — cubes fill, no crop mess */ .raven-lock3-drop__cubes .raven-cat-cube__stage, .raven-drop-cats .raven-cat-cube__stage { overflow: hidden !important; } .raven-lock3-drop__cubes img, .raven-drop-cats img { object-fit: contain !important; object-position: 50% 50% !important; } } /* ===== MASTER FIX GATE C ===== */ /* C1 — CUT spacing (do not add) */ .raven-demo-home > .section-block { margin-top: 10px !important; margin-bottom: 10px !important; padding-top: 4px !important; padding-bottom: 4px !important; } #ravenLooks { margin-bottom: 8px !important; padding-bottom: 0 !important; } #ravenNextDrop { margin-top: 8px !important; padding-top: 4px !important; } .raven-hero-pyramid { margin-top: 6px !important; } .raven-hero-pyramid__labels, .raven-hero-pyramid__quartet { margin-top: 6px !important; margin-bottom: 4px !important; } .raven-keyline { margin: 8px auto !important; } #ravenDropCarousels { margin-top: 8px !important; } /* kill P1 feather-gap air */ :root { --raven-feather-gap: 6px !important; } /* About / Contact tighter */ body.template-page:has(.raven-about-page) #MainContent .shopify-section, body.template-page:has(.raven-contact-page) #MainContent .shopify-section, body[class*="about"] #MainContent .shopify-section, body[class*="contact"] #MainContent .shopify-section { padding-block: 4px !important; margin-block: 0 !important; } body.template-page:has(.raven-about-page) #MainContent h1, body.template-page:has(.raven-about-page) #MainContent h2, body[class*="about"] #MainContent h1 { margin-bottom: 6px !important; } body.template-page:has(.raven-about-page) #MainContent p, body[class*="about"] #MainContent p { margin-top: 4px !important; margin-bottom: 8px !important; } /* C2 — Bundles: BIGGER cards, SMALLER text */ body[data-page-handle="bundles"] .raven-look-grid, body[data-page-handle="bundles"] .raven-looks-block { max-width: min(1200px, 96vw) !important; gap: 18px !important; } body[data-page-handle="bundles"] .raven-look-entry .car, #ravenLooks .raven-look-entry .car { min-height: 220px !important; aspect-ratio: 4 / 5 !important; } body[data-page-handle="bundles"] .raven-look-entry, #ravenLooks .raven-look-entry { min-height: 0 !important; } .raven-look-entry .body strong { font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; } .raven-look-entry .body span:not(.lbl) { font-size: 0.78rem !important; font-weight: 400 !important; } /* one title on bundles */ body:has(.raven-bundles-title) #MainContent .text-block[class*="__heading"] { display: none !important; } body[data-page-handle="bundles"] .raven-bundles-title { font-size: clamp(1.05rem, 2.5vw, 1.45rem) !important; } /* C3 — FAQ giants killed harder */ body.template-page:has(.raven-faq-page) #MainContent .text-block.h1, body.template-page:has(.raven-faq-page) #MainContent .text-block:not(:has(.raven-faq-q)):not(:has(.raven-faq-list)), body[class*="faq"] #MainContent .text-block.h1, body[class*="faq"] #MainContent .rte { font-size: 0.9rem !important; font-weight: 400 !important; letter-spacing: 0.03em !important; line-height: 1.45 !important; text-transform: none !important; max-width: 680px !important; margin: 8px auto !important; } /* C4 — do NOT apply h1 token to card labels */ .raven-look-entry .body strong, .raven-complementary__label, .raven-cat-cube + .raven-complementary__label { font-size: 0.8rem !important; } /* collections page — reduce top air */ body.template-list-collections #MainContent .shopify-section:first-child { min-height: 0 !important; padding-top: 8px !important; } body.template-list-collections #MainContent .text-block { margin-block: 4px !important; padding-block: 0 !important; } /* ===== MASTER FIX GATE BFIX ===== */ @media (max-width: 749px) { /* M1 header: [menu][EN] · LOGO · [ILS][CART] */ body #header-component .header__columns { position: relative !important; align-items: center !important; } body #header-component header-actions { position: static !important; margin-left: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; max-width: none !important; overflow: visible !important; } body #header-component header-actions > drawer-localization-component, body #header-component .raven-l10n-hint, body #header-component .shipping-checker, body #header-component search-button { display: none !important; } body #header-component header-actions > dropdown-localization-component.raven-l10n--language { display: flex !important; position: absolute !important; left: 54px !important; top: calc(50% - 14px) !important; max-width: none !important; } body #header-component header-actions > dropdown-localization-component.raven-l10n--location { display: flex !important; order: 1 !important; max-width: none !important; } body #header-component header-actions > button.header-actions__action { order: 2 !important; position: relative !important; } body #header-component .dropdown-localization__button { font-size: 0.72rem !important; padding-inline: 6px !important; } /* collections/list: tighten top */ body.template-list-collections #MainContent { padding-top: 0 !important; } body.template-list-collections #MainContent > .shopify-section:first-child { padding-top: 4px !important; margin-top: 0 !important; min-height: 0 !important; } /* drop cats on collections — fill + contain */ body.template-list-collections .raven-lock3-drop__cubes, body.template-list-collections .raven-drop-cats, [data-raven-collections-drops] .raven-lock3-drop__cubes { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } body.template-list-collections .raven-cat-cube__stage, [data-raven-collections-drops] .raven-cat-cube__stage { aspect-ratio: 3 / 4 !important; overflow: hidden !important; min-height: 110px !important; background: #0a0a0a !important; } body.template-list-collections .raven-cat-cube img, [data-raven-collections-drops] .raven-cat-cube img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: 50% 50% !important; opacity: 1 !important; } body.template-list-collections .raven-lock3-drop__cover-cube .raven-cat-cube__stage { aspect-ratio: 1 / 1 !important; } body.template-list-collections .raven-lock3-drop__cover-cube img, body.template-list-collections .raven-lock3-drop__cover-cube video { object-fit: cover !important; object-position: 50% 20% !important; } } /* ===== HE BIDI PDP (L-2026-09-30) ===== */ html[lang^="he"] .raven-pdp-desc, html[lang^="he"] .raven-pdp-size { direction: rtl; } /* ===== RAVEN CART MSG (L-2026-09-30) ===== */ .raven-cart-msg { margin: 0 0 12px; padding: 12px 14px; border: 1px solid rgba(110, 110, 110, 0.45); background: rgba(6, 9, 18, 0.92); color: #e9eef7; text-align: center; font-size: 0.8rem; line-height: 1.45; letter-spacing: 0.04em; } .raven-cart-msg__line { margin: 0; text-transform: uppercase; } .raven-cart-msg__line + .raven-cart-msg__line, .raven-cart-msg__bar + .raven-cart-msg__line { margin-top: 10px; } .raven-cart-msg__line.is-done { color: #7dcea0; } .raven-cart-msg__line.is-nudge { color: #fff; font-weight: 600; } .raven-cart-msg__note { margin: 4px 0 0; color: #8b97ae; font-size: 0.75rem; letter-spacing: 0.02em; } .raven-cart-msg__bar { height: 3px; margin: 8px 0 0; background: rgba(110, 110, 110, 0.35); overflow: hidden; } .raven-cart-msg__bar > span { display: block; height: 100%; background: #e9eef7; transition: width 0.35s ease; } .raven-cart-sum { display: grid; gap: 4px; margin: 4px 0 10px; font-size: 0.85rem; color: #c8d0de; } .raven-cart-sum__row { display: flex; justify-content: space-between; gap: 12px; } .raven-cart-sum .is-good { color: #7dcea0; font-weight: 600; } /* ===== RAVEN HEADER TABLET (L-2026-09-30) ===== */ @media screen and (min-width: 750px) and (max-width: 1199px) { html body #header-component[data-menu-style] .header__columns { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto !important; grid-template-areas: "rdrw rsrch . rloc rlang ract" !important; grid-column: 1 / -1 !important; column-gap: 6px !important; align-items: center !important; position: relative !important; width: 100% !important; min-height: 56px !important; padding-inline: 0 !important; flex-wrap: unset !important; } html body #header-component[data-menu-style] .header__column { display: contents !important; } html body #header-component[data-menu-style] .header__drawer { display: flex !important; grid-area: rdrw !important; justify-self: start !important; } html body #header-component[data-menu-style] .header__drawer > header-drawer { display: block !important; } html body #header-component[data-menu-style] .header__drawer .header__icon--menu { display: flex !important; visibility: visible !important; } html body #header-component[data-menu-style] header-drawer .menu-drawer { background: #000 !important; background-color: #000 !important; color: #fff !important; opacity: 1 !important; z-index: 10040 !important; box-shadow: 1px 0 0 rgba(233, 238, 247, 0.18) !important; } html body #header-component[data-menu-style] header-drawer .menu-drawer__backdrop { background: rgb(0 0 0 / 0.72) !important; opacity: 1 !important; z-index: 10030 !important; } html body #header-component[data-menu-style] header-menu, html body #header-component[data-menu-style] .header-menu { display: none !important; } html body #header-component[data-menu-style] .search-action { grid-area: rsrch !important; width: auto !important; justify-self: start !important; } html body #header-component[data-menu-style] .header-logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 1 !important; } html body #header-component[data-menu-style] .header__column > .raven-l10n--location, html body #header-component[data-menu-style] header-actions > .raven-l10n--location { display: flex !important; grid-area: rloc !important; position: relative !important; left: auto !important; top: auto !important; } html body #header-component[data-menu-style] .header__column > .raven-l10n--language, html body #header-component[data-menu-style] header-actions > .raven-l10n--language { display: flex !important; grid-area: rlang !important; position: relative !important; left: auto !important; top: auto !important; } html body #header-component[data-menu-style] header-actions { grid-area: ract !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; margin: 0 !important; justify-self: end !important; } html body #header-component[data-menu-style] .raven-l10n .dropdown-localization__button { margin: 0 !important; } } @media screen and (min-width: 1200px) { html body #header-component[data-menu-style='drawer'] .header__columns { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto !important; grid-template-areas: "rdrw rsrch . rloc rlang ract" !important; grid-column: 1 / -1 !important; column-gap: 6px !important; align-items: center !important; position: relative !important; width: 100% !important; min-height: 56px !important; padding-inline: 0 !important; flex-wrap: unset !important; } html body #header-component[data-menu-style='drawer'] .header__column { display: contents !important; } html body #header-component[data-menu-style='drawer'] .header__drawer { display: flex !important; grid-area: rdrw !important; justify-self: start !important; } html body #header-component[data-menu-style='drawer'] .header__drawer > header-drawer { display: block !important; } html body #header-component[data-menu-style='drawer'] .header__drawer .header__icon--menu { display: flex !important; visibility: visible !important; } html body #header-component[data-menu-style='drawer'] header-drawer .menu-drawer { background: #000 !important; background-color: #000 !important; color: #fff !important; opacity: 1 !important; z-index: 10040 !important; box-shadow: 1px 0 0 rgba(233, 238, 247, 0.18) !important; } html body #header-component[data-menu-style='drawer'] header-drawer .menu-drawer__backdrop { background: rgb(0 0 0 / 0.72) !important; opacity: 1 !important; z-index: 10030 !important; } html body #header-component[data-menu-style='drawer'] header-menu, html body #header-component[data-menu-style='drawer'] .header-menu { display: none !important; } html body #header-component[data-menu-style='drawer'] .search-action { grid-area: rsrch !important; width: auto !important; justify-self: start !important; } html body #header-component[data-menu-style='drawer'] .header-logo { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 1 !important; } html body #header-component[data-menu-style='drawer'] .header__column > .raven-l10n--location, html body #header-component[data-menu-style='drawer'] header-actions > .raven-l10n--location { display: flex !important; grid-area: rloc !important; position: relative !important; left: auto !important; top: auto !important; } html body #header-component[data-menu-style='drawer'] .header__column > .raven-l10n--language, html body #header-component[data-menu-style='drawer'] header-actions > .raven-l10n--language { display: flex !important; grid-area: rlang !important; position: relative !important; left: auto !important; top: auto !important; } html body #header-component[data-menu-style='drawer'] header-actions { grid-area: ract !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 4px !important; margin: 0 !important; justify-self: end !important; } html body #header-component[data-menu-style='drawer'] .raven-l10n .dropdown-localization__button { margin: 0 !important; } } /* ===== RAVEN ADD FEEDBACK (L-2026-09-30) ===== */ button[data-raven-busy] { position: relative !important; pointer-events: none !important; cursor: progress !important; } button[data-raven-busy] .add-to-cart-text, button[data-raven-busy] .add-to-cart__added { opacity: 0 !important; visibility: hidden !important; } button[data-raven-busy]::after { content: "" !important; position: absolute !important; inset: 0 !important; margin: auto !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 2px solid currentColor !important; border-right-color: transparent !important; animation: raven-spin 0.7s linear infinite !important; opacity: 0.9 !important; } @keyframes raven-spin { to { transform: rotate(360deg); } } .raven-toast { position: fixed !important; z-index: 10080 !important; top: 12px !important; left: 12px !important; right: 12px !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; background: #0b0f18 !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.28) !important; box-shadow: 0 12px 32px rgb(0 0 0 / 0.55) !important; opacity: 0 !important; transform: translateY(-12px) !important; transition: opacity 0.25s ease, transform 0.25s ease !important; pointer-events: none !important; } .raven-toast.is-on { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .raven-toast__img { flex: 0 0 52px !important; width: 52px !important; height: 52px !important; object-fit: contain !important; background: #151a26 !important; } .raven-toast__txt { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; line-height: 1.3 !important; } .raven-toast__txt strong { font-size: 0.72rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 700 !important; color: #fff !important; } .raven-toast__txt span { font-size: 0.86rem !important; color: #c5cddc !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .raven-toast[dir="rtl"] .raven-toast__txt span { text-align: right !important; } .raven-toast__link { flex: 0 0 auto !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px !important; padding: 8px 4px !important; } @media screen and (min-width: 750px) { .raven-toast { left: auto !important; right: 20px !important; top: 20px !important; width: 380px !important; } .raven-toast[dir="rtl"] { right: auto !important; left: 20px !important; } } html.raven-lookdone-open { overflow: hidden !important; } .raven-lookdone { position: fixed !important; inset: 0 !important; z-index: 10090 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; } .raven-lookdone__backdrop { position: absolute !important; inset: 0 !important; background: rgb(0 0 0 / 0.72) !important; } .raven-lookdone__panel { position: relative !important; width: min(440px, 100%) !important; padding: 36px 24px 24px !important; background: #0b0f18 !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.3) !important; box-shadow: 0 24px 60px rgb(0 0 0 / 0.6) !important; text-align: center !important; animation: raven-pop 0.25s ease both !important; } @keyframes raven-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .raven-lookdone__x { position: absolute !important; top: 6px !important; inset-inline-end: 8px !important; width: 40px !important; height: 40px !important; background: none !important; border: 0 !important; color: #c5cddc !important; font-size: 28px !important; line-height: 1 !important; cursor: pointer !important; } .raven-lookdone__kicker { margin: 0 0 8px !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #8b97ae !important; } .raven-lookdone__title { margin: 0 0 18px !important; font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; font-weight: 400 !important; font-size: clamp(1.15rem, 4.6vw, 1.5rem) !important; line-height: 1.3 !important; letter-spacing: 0.04em !important; color: #fff !important; } .raven-lookdone__thumbs { display: flex !important; justify-content: center !important; gap: 10px !important; margin: 0 0 22px !important; } .raven-lookdone__thumbs img { width: 84px !important; height: 84px !important; object-fit: contain !important; background: #151a26 !important; } .raven-lookdone__cta { display: block !important; padding: 14px 18px !important; background: #fff !important; color: #000 !important; font-weight: 700 !important; font-size: 0.86rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; } .raven-lookdone__cta:hover { background: #e9eef7 !important; } .raven-lookdone__cart { display: inline-block !important; margin-top: 14px !important; padding: 6px 8px !important; font-size: 0.82rem !important; color: #c5cddc !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ===== RAVEN CART TRASH (L-2026-09-30) ===== */ html body button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3), html body #MainContent button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: #e9eef7 !important; opacity: 0.85 !important; transition: opacity 0.15s ease !important; } html body button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):hover, html body #MainContent button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):hover, html body button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):focus-visible, html body #MainContent button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):focus-visible { opacity: 1 !important; color: #fff !important; background: transparent !important; } html body button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):focus-visible, html body #MainContent button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3):focus-visible { outline: 1px solid rgba(233, 238, 247, 0.7) !important; outline-offset: 2px !important; } html body button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3) svg, html body #MainContent button.cart-items__remove.cart-items__remove.cart-items__remove:not(.raven-x1):not(.raven-x2):not(.raven-x3) svg { display: block !important; width: 26px !important; height: 26px !important; margin: 0 !important; color: inherit !important; } /* ===== RAVEN CART PAGE HEADER MOBILE (L-2026-09-30) ===== */ @media screen and (max-width: 749px) { html body #header-component header-actions > a.header-actions__action[href*="/cart"] { order: 2 !important; position: relative !important; right: auto !important; top: auto !important; transform: none !important; } } /* ===== RAVEN LOOK BANNER MOBILE (L-2026-10-01) ===== */ @media screen and (max-width: 749px) { html body[data-raven-look] #MainContent .raven-look-banner { padding: 8px 12px 6px !important; margin: 0 auto 4px !important; max-width: none !important; min-height: 0 !important; } html body[data-raven-look] #MainContent .raven-look-banner h1.raven-look-banner__title { font-size: 0.98rem !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 0 3px !important; } html body[data-raven-look] #MainContent .raven-look-banner p.raven-look-banner__sub { font-size: 0.72rem !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; max-width: 100% !important; margin: 0 auto !important; color: #aeb8ca !important; } } /* ===== RAVEN PDP GALLERY MOBILE (L-2026-10-01) ===== */ @media screen and (max-width: 749px) { html body #MainContent media-gallery slideshow-arrows.mobile\:hidden, html body #MainContent[data-template="product"] media-gallery slideshow-arrows.mobile\:hidden { display: flex !important; position: absolute !important; inset: 0 !important; align-items: center !important; justify-content: space-between !important; padding: 0 8px !important; pointer-events: none !important; z-index: 3 !important; mix-blend-mode: normal !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous, html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(10, 14, 22, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; color: #fff !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; mix-blend-mode: normal !important; filter: none !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous[disabled], html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next[disabled] { opacity: 0.35 !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous svg, html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next svg { width: 14px !important; height: 14px !important; color: #fff !important; } } html body #MainContent media-gallery slideshow-controls:not(:has(img)) { gap: 6px !important; justify-content: center !important; align-items: center !important; } html body #MainContent media-gallery slideshow-controls button.slideshow-control.button.button-unstyled:not(.slideshow-control--previous):not(.slideshow-control--next):not(:has(img)):not(.raven-x1):not(.raven-x2):not(.raven-x3) { width: 8px !important; height: 8px !important; min-width: 8px !important; min-height: 8px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: rgba(10, 14, 22, 0.28) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden !important; animation: none !important; transition: width 0.2s ease, background-color 0.2s ease !important; } html body #MainContent media-gallery slideshow-controls button.slideshow-control.button.button-unstyled:not(.slideshow-control--previous):not(.slideshow-control--next):not(:has(img)):not(.raven-x1):not(.raven-x2):not(.raven-x3)[aria-selected="true"] { width: 18px !important; background: #0a0e16 !important; } /* ===== RAVEN BUTTONS + CART LABELS (L-2026-10-01) ===== */ html body product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { background: #fff !important; background-color: #fff !important; color: #060912 !important; border: 1px solid #fff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; min-height: 52px !important; opacity: 1 !important; } html body product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) span, html body product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) svg, html body #MainContent product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) span, html body #MainContent product-form-component button[name="add"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) svg, html body button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) span, html body button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) svg, html body #MainContent button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) span, html body #MainContent button[name="checkout"]:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) svg { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } html body product-form-component button[name="add"]:hover:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent product-form-component button[name="add"]:hover:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body button[name="checkout"]:hover:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent button[name="checkout"]:hover:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { background: #e9eef7 !important; background-color: #e9eef7 !important; border-color: #e9eef7 !important; } html body product-form-component button[name="add"]:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { opacity: 0.45 !important; } html body quantity-selector-component button.quantity-minus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-minus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body quantity-selector-component button.quantity-plus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-plus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-minus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-minus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-plus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-plus:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { background: transparent !important; background-color: transparent !important; color: #e9eef7 !important; border: 1px solid rgba(233, 238, 247, 0.55) !important; opacity: 1 !important; box-shadow: none !important; } html body quantity-selector-component button.quantity-minus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-minus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body quantity-selector-component button.quantity-plus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-plus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-minus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-minus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-plus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-plus:hover:not(:disabled):not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { background: rgba(233, 238, 247, 0.12) !important; background-color: rgba(233, 238, 247, 0.12) !important; } html body quantity-selector-component button.quantity-minus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-minus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body quantity-selector-component button.quantity-plus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent quantity-selector-component button.quantity-plus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-minus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-minus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body cart-quantity-selector-component button.quantity-plus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent cart-quantity-selector-component button.quantity-plus:disabled:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { opacity: 0.4 !important; } html body .cart-items__variants-wrapper > ul.list-unstyled > li:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent .cart-items__variants-wrapper > ul.list-unstyled > li:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #7dcea0 !important; margin: 4px 0 0 !important; } /* ===== RAVEN DRAWER OVERLAY DESKTOP (L-2026-10-01) ===== */ @media (min-width: 990px) { html body .page-wrapper.page-wrapper--drawer-open { margin-right: 0 !important; } html body .page-wrapper.page-wrapper--drawer-open shopify-account::part(dialog) { translate: none !important; } html body theme-drawer[open] dialog.theme-drawer__dialog { z-index: 2147483000 !important; box-shadow: -24px 0 48px rgba(0, 0, 0, 0.55); } } /* ===== RAVEN HEADER EMPTY ROW TOUCH (L-2026-10-01) ===== */ @media screen and (min-width: 750px) { html body #header-component .header__navigation-bar-row:not(:has(a, button, nav, input, select)) { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } } /* ===== RAVEN PDP GALLERY DESKTOP ARROWS (L-2026-10-01) ===== */ @media screen and (min-width: 750px) { html body #MainContent media-gallery slideshow-arrows { display: flex !important; position: absolute !important; inset: 0 !important; align-items: center !important; justify-content: space-between !important; padding: 0 14px !important; pointer-events: none !important; z-index: 3 !important; mix-blend-mode: normal !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous, html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(10, 14, 22, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; color: #fff !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; mix-blend-mode: normal !important; filter: none !important; transform: none !important; transition: background-color 0.15s ease !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous:hover, html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next:hover { background: rgba(10, 14, 22, 0.8) !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous[disabled], html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next[disabled] { opacity: 0.35 !important; } html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous svg, html body #MainContent media-gallery slideshow-arrows button.slideshow-control.button.button-unstyled:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next svg { width: 14px !important; height: 14px !important; color: #fff !important; } } /* ===== RAVEN QUICK ADD (L-2026-10-01) ===== */ html body dialog.quick-add-modal[open] media-gallery slideshow-component, html body dialog.quick-add-modal[open] media-gallery slideshow-container { position: relative !important; display: block !important; overflow: hidden !important; min-height: 0 !important; } html body dialog.quick-add-modal[open] media-gallery slideshow-slides { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; position: relative !important; min-height: 0 !important; height: auto !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; overscroll-behavior-x: contain; } html body dialog.quick-add-modal[open] media-gallery slideshow-slides::-webkit-scrollbar { display: none !important; } html body dialog.quick-add-modal[open] media-gallery slideshow-slide, html body dialog.quick-add-modal[open] media-gallery slideshow-slide[aria-hidden] { position: relative !important; inset: auto !important; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: auto !important; transform: none !important; scroll-snap-align: start !important; } html body dialog.quick-add-modal[open] slideshow-arrows { display: flex !important; position: absolute !important; inset: 0 !important; align-items: center !important; justify-content: space-between !important; padding: 0 10px !important; pointer-events: none !important; z-index: 3 !important; } html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous, html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(10, 14, 22, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; color: #fff !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; box-shadow: none !important; transition: background-color 0.15s ease !important; } html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous:hover, html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next:hover { background: rgba(10, 14, 22, 0.8) !important; } html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous[disabled], html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next[disabled] { opacity: 0.35 !important; } html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--previous svg, html body dialog.quick-add-modal[open] slideshow-arrows button.slideshow-control:not(.raven-x1):not(.raven-x2):not(.raven-x3).slideshow-control--next svg { width: 14px !important; height: 14px !important; color: #fff !important; } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { width: auto !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 !important; border-radius: 999px !important; background: rgba(6, 9, 18, 0.88) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: none !important; opacity: 1 !important; } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4):hover, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4):hover, html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4):focus-visible, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4):focus-visible { border-color: #fff !important; background: rgba(6, 9, 18, 0.96) !important; background-color: rgba(6, 9, 18, 0.96) !important; } @media (hover: hover) and (pointer: fine) { html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { opacity: 0 !important; } html body product-card:is(:hover, :focus-within) button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4), html body #MainContent product-card:is(:hover, :focus-within) button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) { opacity: 1 !important; } } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text { display: flex !important; align-items: center !important; height: 100% !important; padding: 0 !important; border-radius: 999px !important; background: transparent !important; color: #fff !important; } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-icon, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 100% !important; color: #fff !important; } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-icon svg, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-icon svg { width: 18px !important; height: 18px !important; color: #fff !important; } html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text__content, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text__content, html body product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text__content span, html body #MainContent product-card button.quick-add__button.quick-add__button:not(.raven-x1):not(.raven-x2):not(.raven-x3):not(.raven-x4) .add-to-cart-text__content span { color: #fff !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; white-space: nowrap !important; } /* ===== RAVEN CTF GALLERY (L-2026-10-01) ===== */ html body #MainContent .raven-complementary.raven-ctf { position: relative !important; max-width: min(1200px, 100%) !important; margin: 32px auto 16px !important; padding: 0 12px 8px !important; text-align: start !important; } html body #MainContent .raven-complementary.raven-ctf .raven-complementary__title { text-align: center !important; margin: 0 0 16px !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__row { display: flex !important; gap: 12px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; scrollbar-width: none !important; overscroll-behavior-x: contain; padding: 0 0 4px !important; margin: 0 !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__row::-webkit-scrollbar { display: none !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__card { position: relative !important; flex: 0 0 calc((100% - 12px) / 2.2) !important; min-width: 0 !important; scroll-snap-align: start !important; display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 0 12px !important; background: #0b101c !important; border: 1px solid rgba(233, 238, 247, 0.16) !important; text-align: center !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__media { display: block !important; aspect-ratio: 1 / 1 !important; background: #0b101c !important; overflow: hidden !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; background: transparent !important; opacity: 1 !important; transform: none !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__name { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; min-height: 2.7em !important; margin: 6px 10px 0 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #e9eef7 !important; text-decoration: none !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__price { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; color: #fff !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__add { position: absolute !important; inset-inline-end: 8px !important; top: 8px !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 999px !important; background: rgba(6, 9, 18, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; cursor: pointer !important; opacity: 1 !important; transition: border-color 0.15s ease, background-color 0.15s ease !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__add:hover, html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__add:focus-visible { border-color: #fff !important; background: rgba(6, 9, 18, 0.96) !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__add[aria-busy="true"] { opacity: 0.6 !important; cursor: progress !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__add svg { width: 18px !important; height: 18px !important; color: #fff !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow { display: none !important; } @media screen and (min-width: 750px) { html body #MainContent .raven-complementary.raven-ctf { padding: 0 56px 8px !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__row { gap: 16px !important; } html body #MainContent .raven-complementary.raven-ctf .raven-ctf__card { flex-basis: calc((100% - 48px) / 4) !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow { position: absolute !important; top: calc(50% + 6px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; padding: 0 !important; margin: 0 !important; border-radius: 50% !important; background: rgba(10, 14, 22, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.75) !important; color: #fff !important; cursor: pointer !important; transform: translateY(-50%) !important; transition: background-color 0.15s ease, opacity 0.15s ease !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow:hover { background: rgba(10, 14, 22, 0.8) !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow--prev { inset-inline-start: 8px !important; } html body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow--next { inset-inline-end: 8px !important; } html[dir="rtl"] body #MainContent .raven-complementary.raven-ctf button.raven-ctf__arrow svg { transform: scaleX(-1) !important; } html body #MainContent .raven-complementary.raven-ctf.raven-ctf--start button.raven-ctf__arrow--prev, html body #MainContent .raven-complementary.raven-ctf.raven-ctf--end button.raven-ctf__arrow--next { opacity: 0.35 !important; pointer-events: none !important; } html body #MainContent .raven-complementary.raven-ctf.raven-ctf--fits button.raven-ctf__arrow { display: none !important; } } @media screen and (min-width: 1200px) { html body #MainContent .raven-complementary.raven-ctf .raven-ctf__card { flex-basis: calc((100% - 64px) / 5) !important; } } @media screen and (max-width: 749px) { html body dialog.quick-add-modal[open] slideshow-arrows { display: none !important; } } /* ===== RAVEN TYPE SCALE (L-2026-10-01) ===== */ :root { --fs-card-title: 13px; --fs-price: 15px; --fs-body: 15px; --fs-pdp-title: 22px; --fs-pdp-price: 20px; } html body #MainContent product-card.product-card a[ref="productTitleLink"] .text-block p, html body #MainContent product-card.product-card a[ref="productTitleLink"] .text-block.text-block p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; font-size: var(--fs-card-title) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-align: center !important; color: #e9eef7 !important; margin: 0 !important; } html body #MainContent product-card.product-card product-price span.price, html body #MainContent product-card.product-card product-price .price__regular span.price { font-size: var(--fs-price) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; color: #fff !important; } html body #MainContent .product-details h1 { font-size: var(--fs-pdp-title) !important; line-height: 1.15 !important; letter-spacing: 0.04em !important; } html body #MainContent .product-details product-price span.price { font-size: var(--fs-pdp-price) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; } html body #MainContent .raven-pdp-desc p, html body #MainContent .raven-pdp-desc li, html body #MainContent .raven-faq-item > p, html body #MainContent p.raven-faq-giant, html body #MainContent .shopify-policy__body p, html body #MainContent .shopify-policy__body li { font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: start !important; color: #d3d8e1 !important; height: auto !important; max-height: none !important; -webkit-line-clamp: unset !important; } html body #MainContent .raven-pdp-desc :is(b, strong), html body #MainContent .raven-faq-item > p :is(b, strong), html body #MainContent p.raven-faq-giant :is(b, strong), html body #MainContent .shopify-policy__body :is(b, strong) { font-size: inherit !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; } html body #MainContent .raven-faq-item > summary { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; } html body #MainContent .shopify-policy__body, html body #MainContent .raven-pdp-desc { max-width: 70ch !important; margin-inline: auto !important; } html body #MainContent .shopify-policy__body[data-raven-dir="ltr"], html body #MainContent .shopify-policy__body[data-raven-dir="ltr"] * { direction: ltr !important; } html body #MainContent .shopify-policy__body .rte > [data-raven-dup-title] { display: none !important; } @media screen and (min-width: 750px) { :root { --fs-pdp-title: 26px; } } @media screen and (min-width: 1024px) { :root { --fs-card-title: 14px; --fs-price: 16px; --fs-pdp-price: 22px; } html body #MainContent .raven-pdp-desc p, html body #MainContent .raven-pdp-desc li, html body #MainContent .raven-faq-item > p, html body #MainContent p.raven-faq-giant, html body #MainContent .shopify-policy__body p, html body #MainContent .shopify-policy__body li { font-size: 16px !important; } } @media screen and (min-width: 1200px) { :root { --fs-pdp-title: 30px; } } /* ===== RAVEN HE RTL (L-2026-10-01) ===== */ html[lang^="he"] body { direction: rtl; } html[lang^="he"] body :is(slideshow-component, slideshow-slides, slideshow-arrows, media-gallery, .product-media-gallery, .card-gallery, .product-grid, .raven-cat-cube__track, .raven-cat-cube__stage, .raven-cat-map__grid, .raven-drop-cats, [data-raven-complementary], .raven-complementary__cube, .raven-drop-filter, .raven-ctf__row, section.raven-demo-home, video, .shopify-section[id*="__hero_"], #header-component) { direction: ltr; } html[lang^="he"] body section.raven-demo-home :is(h1, h2, h3, p, li, span, strong, .kicker, .sub, .body, .cta-row, .raven-faq-q, .raven-faq-a, .raven-lock3-drop__shop), html[lang^="he"] body :is(.raven-cat-map__grid, .raven-drop-filter, .raven-drop-cats, [data-raven-complementary]) :is(.raven-cat-cube__label, .raven-complementary__label, h2, h3, p, button) { direction: rtl; } html[lang^="he"] body #header-component :is(dialog.menu-drawer, .menu-drawer__navigation, .dropdown-localization__content) { direction: rtl; } html[lang^="he"] body [data-raven-ltr] { direction: ltr; } html[lang^="he"] body :is(.price, .money, [class*="price__"], .raven-ctf__price, .cart-items__price) { direction: ltr; unicode-bidi: isolate; } html[lang^="he"] body :is(input[type="email"], input[type="tel"], input[type="url"], .raven-contact-email) { direction: ltr; } html[lang^="he"] body :is(input:not([type="email"]):not([type="tel"]):not([type="url"]), textarea) { text-align: right; } html[lang^="he"] body #MainContent .raven-faq-item summary, html[lang^="he"] body #MainContent .raven-faq-item > p, html[lang^="he"] body #MainContent p.raven-faq-giant, html[lang^="he"] body #MainContent .raven-faq-a { text-align: start !important; } /* ===== RAVEN S16 (L-2026-10-02) ===== */ .sticky-add-to-cart__bar::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0b101c !important; background-image: none !important; } .sticky-add-to-cart__bar { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 28px rgba(0, 0, 0, 0.55) !important; } @media screen and (min-width: 750px) { .sticky-add-to-cart__bar { width: min(920px, calc(100vw - 48px)) !important; } } @media screen and (max-width: 749px) { html body #MainContent sticky-add-to-cart .sticky-add-to-cart__info :is(.sticky-add-to-cart__title, [class*="title"]) { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; font-size: 12px !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; } } #MainContent .raven-pdp-size { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } #MainContent .raven-pdp-size table { max-width: none; } #MainContent .raven-size-hint { display: block; margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; opacity: 0.7; text-align: center; } .raven-teaser-notify__row { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; align-items: center; } html body #MainContent p.raven-teaser-notify__sub { margin: -8px auto 16px !important; max-width: 34ch !important; text-align: center !important; opacity: 0.75; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; line-height: 1.5 !important; } html body #MainContent a.raven-teaser-notify__link { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: inherit; opacity: 0.85; } #RavenFooterEmail.raven-notify-focus { outline: 2px solid #fff; outline-offset: 3px; } /* ===== RAVEN S17 (L-2026-10-02) ===== */ html body :is(a[href], button, summary, select, textarea, input:not([type="radio"]):not([type="checkbox"]), [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } html body label:has(> input:is([type="radio"], [type="checkbox"]):focus-visible) { outline: 2px solid #fff !important; outline-offset: 2px !important; } .shopify-section-group-footer-group .menu__item > a[href], .shopify-section-group-footer-group .footer-utilities__text a[href] { display: inline-block; position: relative; z-index: 1; padding: 12px 8px; margin: -12px -8px; } .shopify-section-group-footer-group[id*="footer_nav_raven"] nav.details-content { overflow: visible !important; } .shopify-section-group-footer-group[id*="footer_nav_raven"] details[open]::details-content { overflow: visible !important; } html body .shopify-section-group-footer-group :is(.menu__item > a[href], .footer-utilities__text a[href]):focus-visible { outline: none !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; } .shopify-section-group-footer-group .policy-list-trigger { padding: 12px 0 !important; margin: -12px 0 !important; } .shopify-section-group-footer-group .social-icons__icon-wrapper > a[href] { padding: 10px 6px; margin: -10px -6px; } .raven-footer-join__btn::after { content: ""; position: absolute; inset: -4px; } @media screen and (min-width: 750px) { html body #MainContent .raven-teaser-notify__row { flex-direction: column !important; gap: 14px !important; } } /* ===== RAVEN S17H (L-2026-10-02) ===== */ html body shopify-account:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } /* ===== RAVEN S18 QUALITY PROMISE (L-2026-10-02) ===== */ .raven-pdp-trust__refund.raven-qp-line { color: #c5cddc !important; font-size: 0.85rem !important; margin: 4px 0 0 !important; } .raven-qp__btn { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 6px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(197,205,220,0.5); letter-spacing: 0.02em; } .raven-qp__btn:hover { text-decoration-color: #fff; color: #fff; } .raven-qp__btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } .raven-qp__i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; line-height: 1; font-style: normal; text-decoration: none; } dialog.raven-qp { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; margin: auto; padding: 28px 24px 22px; border: 1px solid rgba(255,255,255,0.18); border-radius: 0; background: #0b0b0c; color: #d7dce6; font-size: 0.95rem; line-height: 1.6; text-align: start; } dialog.raven-qp::backdrop { background: rgba(0,0,0,0.7); } dialog.raven-qp h2 { margin: 0 0 14px !important; font-size: 1rem !important; letter-spacing: 0.14em; color: #fff; text-transform: uppercase; } dialog.raven-qp p { margin: 0 0 10px !important; } dialog.raven-qp .raven-qp__muted { color: #8b97ae; font-size: 0.85rem; } dialog.raven-qp .raven-qp__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } dialog.raven-qp a { color: #fff; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; } dialog.raven-qp .raven-qp__close { appearance: none; background: #fff; color: #000; border: 0; padding: 10px 22px; min-height: 40px; font: inherit; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; text-transform: uppercase; } dialog.raven-qp .raven-qp__x { position: absolute; inset-inline-end: 8px; top: 8px; width: 40px; height: 40px; appearance: none; background: none; border: 0; color: #d7dce6; font-size: 22px; line-height: 1; cursor: pointer; } dialog.raven-qp .raven-qp__close:focus-visible, dialog.raven-qp .raven-qp__x:focus-visible, dialog.raven-qp a:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; } /* ===== RAVEN S19 FILTERS SOLID (L-2026-10-02) ===== */ html body theme-drawer#filters-drawer dialog.theme-drawer__dialog { background: #060912 !important; color: #e6ebf5; } html body theme-drawer#filters-drawer dialog.theme-drawer__dialog::backdrop { background: rgba(0, 0, 0, 0.6); } html body #MainContent .facets__panel-content.color-custom-popover { --color-background: #0b0f1c !important; background: #0b0f1c !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important; z-index: 30 !important; } html body #MainContent details[open].facets__panel:has(> .color-custom-popover) { position: relative; z-index: 30; } /* ===== RAVEN S20 HE SKIP LINK RTL (L-2026-10-03) ===== */ html[lang^="he"] .skip-to-content-link:not(:focus):not(:focus-visible) { left: 0 !important; right: auto !important; inset-inline: 0 auto !important; clip-path: inset(50%) !important; overflow: hidden !important; } /* ===== RAVEN S23 DROP CATS RESERVE (L-2026-10-03) ===== */ html:has(link[rel="canonical"][href*="/collections/drop-1-raven-eye"]) { --raven-cats-res: calc(266.667vw + 61.5px); } html:has(link[rel="canonical"][href*="/collections/drop-2-balance"]) { --raven-cats-res: calc(200vw + 51.6px); } @media screen and (min-width: 750px) { html:has(link[rel="canonical"][href*="/collections/drop-1-raven-eye"]), html:has(link[rel="canonical"][href*="/collections/drop-2-balance"]) { --raven-cats-res: min(calc(66.667vw + 51.1px), 691.1px); } } html:has(link[rel="canonical"][href*="/collections/drop-1-raven-eye"]):not(.raven-cats-settled) #MainContent:not(:has([data-raven-drop-cats])) > .shopify-section:first-child, html:has(link[rel="canonical"][href*="/collections/drop-2-balance"]):not(.raven-cats-settled) #MainContent:not(:has([data-raven-drop-cats])) > .shopify-section:first-child { padding-bottom: var(--raven-cats-res) !important; } html[lang^="he"]:has(link[rel="canonical"][href*="/collections/products-pants"]) #MainContent > .shopify-section:first-child p:first-of-type { unicode-bidi: plaintext; } @keyframes raven-he-reveal { to { visibility: visible; } } html[lang^="he"]:not(.raven-he-ready) #MainContent > .shopify-section[id$="__section"]:first-child { visibility: hidden; animation: raven-he-reveal 0s linear 3s forwards; } /* ===== RAVEN S24 CART VARIANT LTR + FILTER ROWS (L-2026-10-03) ===== */ html[lang^="he"] body .cart-items__variants { direction: ltr; } @media screen and (min-width: 750px) { .facets__inputs-list-item .checkbox__label { min-height: 24px; display: inline-flex; align-items: center; } } /* ===== RAVEN S25 FONT FALLBACK METRICS + LOOK SLOT (L-2026-10-03) ===== */ html:root { --font-body--family: "Archivo Narrow", "Raven Narrow A", "Raven Narrow B", "Raven Narrow C", sans-serif; --font-subheading--family: "Archivo Narrow", "Raven Narrow A", "Raven Narrow B", "Raven Narrow C", sans-serif; --font-accent--family: "Archivo Narrow", "Raven Narrow A", "Raven Narrow B", "Raven Narrow C", sans-serif; --font-heading--family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", sans-serif; } [data-raven-collections-drops] .raven-title-with-feather > h1 { font-family: "Archivo Black", "Raven Black A", "Raven Black B", "Raven Black C", "Archivo Narrow", sans-serif !important; } @media screen and (min-width: 750px) { body[data-raven-look] .raven-look-banner__sub { min-height: calc(2em * 1.45) !important; } } /* ===== RAVEN S26 PDP 50/50 FROM FIRST PAINT (L-2026-10-03) ===== */ @media screen and (min-width: 750px) { html body #MainContent[data-template^="product"] product-component.product-information__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 24px !important; align-items: start !important; } html body #MainContent[data-template^="product"] product-component.product-information__grid .product-information__media { width: 100% !important; max-width: 100% !important; } html body #MainContent[data-template^="product"] product-component.product-information__grid .product-details { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } html body #MainContent[data-template^="product"] .product-details rte-formatter { overflow-x: clip !important; } /* ===== RAVEN S27 CARD IMG + DROP CATS WIDTH FROM FIRST PAINT (L-2026-10-03) ===== */ html body #MainContent .product-card .card-gallery.card-gallery slideshow-slide img, html body .product-card .card-gallery.card-gallery img, html body .product-card .product-media.product-media img, html body .product-card img { width: 100% !important; height: auto !important; object-fit: contain !important; object-position: 50% 50% !important; } html body #MainContent > .raven-drop-cats { width: 100% !important; box-sizing: border-box !important; } /* ===== RAVEN S30 MOBILE PDP GALLERY HEIGHT INDEPENDENT OF IN-VIEWPORT (L-2026-10-07) ===== */ @media (max-width: 749px) { #MainContent[data-template="product"] media-gallery slideshow-component:is([in-viewport], :not([in-viewport])) slideshow-slides { max-height: min(55vh, 520px) !important; } } /* ===== RAVEN S31 INFINITE GRID: CONTENT BELOW APPEARS WITH THE LAST PAGE (L-2026-10-07) ===== */ html[data-raven-grid-more] .page-wrapper > footer, html[data-raven-grid-more] #MainContent > [data-raven-grid-section] ~ .shopify-section { display: none !important; } html[data-raven-grid-more] #MainContent > [data-raven-grid-section] { padding-bottom: 320px !important; } /* ===== RAVEN S32 HOME HERO MOBILE: RESERVE THE VIDEO RATIO FROM FIRST PAINT (L-2026-10-09) ===== */ @media (max-width: 749px) { [id*="hero_jVaWmY"] .hero__media-wrapper--mobile video.hero__media { aspect-ratio: 606 / 1080 !important; } }