/*!
Theme Name: Temptation Fashion Theme
Description: Temptation Fashion Theme is a modern and responsive WordPress theme designed for e-commerce websites. It features a clean and minimalist design, making it perfect for showcasing products in an elegant way. The theme is built with the latest web technologies, ensuring optimal performance and compatibility across all devices and browsers.
Text Domain: temptation-fashion
Version: 1.0.0
Author: Nicols Rojas
Author URI: https://nicolsrojas.dev
License: GNU General Public License v2 or later
License URI: LICENSE

Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Normalize */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* Base styles */
:root {
  --color-primary: #1B1B1B;
  --color-primary-variant: #0F161E;
  --color-on-primary: #FAFAFA;
  
  --color-secondary: #FAFAFA;
  --color-secondary-variant: #FAFAFA;
  --color-on-secondary: #1B1B1B;

  --color-background: #FAFAFA;
  --color-on-background: #000;

  --color-surface: radial-gradient(#CFCFCF, #E2E2E2);
  --color-on-surface: #000;

  --color-error: #E65454;
  --color-on-error: #fff;

  --state-hover-opacity: 8%;
  --state-focus-opacity: 12%;
  --state-pressed-opacity: 12%;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

img { display:block; max-width: 100%; height: auto; }
svg { display: block;}
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.aligncenter { display: block; margin: 0 auto; }

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Global */
@font-face {
    font-family: 'Adjusted Arial Fallback';
    src: local(Arial);
    size-adjust: 107%;
    ascent-override: 96%;
    descent-override: 37%;
    line-gap-override: normal;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Bold.woff2') format('woff2'),
        url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk Wide';
    src: url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Wide.woff2') format('woff2'),
        url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Wide.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk Wide';
    src: url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-WideMedium.woff2') format('woff2'),
        url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-WideMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Medium.woff2') format('woff2'),
        url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roc Grotesk';
    src: url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Light.woff2') format('woff2'),
        url('/wp-content/themes/temptation-fashion/assets/fonts/RocGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: 'Roc Grotesk', "Adjusted Arial Fallback";
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: #000;
}
button{
  padding: 0;
}

/* helpers */
.flex {
    display: flex;
}
.flex-column{
    display: flex;
    flex-direction: column;
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.justify-between{
    justify-content: space-between;
}
.align-center{
    align-items: center;
}
.text-center{
  text-align: center;
}
.justify-center{
  justify-content: center;
}
/* layout */
.container {
    width: 100%;
    max-width: 1304px;
    margin: 0 auto;
}
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}
.site-main, .page-container{
    flex: 1;
}
@media (max-width: 48rem) {
    .hide-mobile {
        display: none;
    }
}
@media (min-width: 48.0625rem) {
    .hide-desktop {
        display: none;
    }
}
/* Navigation */
.main-navigation__list,
.main-navigation__submenu{
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-navigation__list{
  display: flex;
}
.main-navigation__submenu {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
}
/*-- non-critical --*/
/* GSAP */
#smooth-content {
 will-change: transform;
}
/* hidden */
.main-navigation__submenu--deep{
  left: 100%;
  top: 0;
}
.main-navigation__item--has-children {
  position: relative;
}

.main-navigation__item:hover > .main-navigation__submenu {
  opacity: 1;
  visibility: visible;
}