/* Scoped to: clothing-template-header */
[data-component-slug="clothing-template-header"].page-home .main-header, [data-component-slug="clothing-template-header"] .page-home .main-header, [data-component-slug="clothing-template-header"].header-overlay .main-header, [data-component-slug="clothing-template-header"] .header-overlay .main-header { position: absolute; top: 80px; left: 0; z-index: 10; } [data-component-slug="clothing-template-header"].page-inner .main-header, [data-component-slug="clothing-template-header"] .page-inner .main-header, [data-component-slug="clothing-template-header"].header-default .main-header, [data-component-slug="clothing-template-header"] .header-default .main-header { position: relative; top: 0; background: #ffffff; z-index: 1; } [data-component-slug="clothing-template-header"].mobile-menu, [data-component-slug="clothing-template-header"] .mobile-menu { transform: translateY(-100%); transition: transform 0.4s ease; pointer-events: none; } [data-component-slug="clothing-template-header"]#menuToggleCheckbox:checked ~ .mobile-menu, [data-component-slug="clothing-template-header"] #menuToggleCheckbox:checked ~ .mobile-menu { transform: translateY(0); pointer-events: auto; } [data-component-slug="clothing-template-header"]#menuToggleCheckbox:checked + nav .menu-toggle svg, [data-component-slug="clothing-template-header"] #menuToggleCheckbox:checked + nav .menu-toggle svg { opacity: 0; } [data-component-slug="clothing-template-header"].menu-toggle::before, [data-component-slug="clothing-template-header"] .menu-toggle::before, [data-component-slug="clothing-template-header"].menu-toggle::after, [data-component-slug="clothing-template-header"] .menu-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; background: #000; opacity: 0; transition: all 0.3s ease; transform-origin: center; } [data-component-slug="clothing-template-header"]#menuToggleCheckbox:checked + nav .menu-toggle::before, [data-component-slug="clothing-template-header"] #menuToggleCheckbox:checked + nav .menu-toggle::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg); } [data-component-slug="clothing-template-header"]#menuToggleCheckbox:checked + nav .menu-toggle::after, [data-component-slug="clothing-template-header"] #menuToggleCheckbox:checked + nav .menu-toggle::after { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg); } @media (max-width: 1024px) { [data-component-slug="clothing-template-header"].page-home .main-header, [data-component-slug="clothing-template-header"] .page-home .main-header, [data-component-slug="clothing-template-header"].header-overlay .main-header, [data-component-slug="clothing-template-header"] .header-overlay .main-header { top: 40px; } } @media (max-width: 768px) { [data-component-slug="clothing-template-header"].page-home .main-header, [data-component-slug="clothing-template-header"] .page-home .main-header, [data-component-slug="clothing-template-header"].header-overlay .main-header, [data-component-slug="clothing-template-header"] .header-overlay .main-header { top: 24px; } } @media (max-width: 480px) { [data-component-slug="clothing-template-header"].page-home .main-header, [data-component-slug="clothing-template-header"] .page-home .main-header, [data-component-slug="clothing-template-header"].header-overlay .main-header, [data-component-slug="clothing-template-header"] .header-overlay .main-header { top: 16px; } }