/* ==========================================================================
   Infinity v2 design system
   Shared tokens + utilities for the redesigned Home / Shop / Product pages.
   Loaded only on those routes — never touches the original theme elsewhere.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap");

:root {
   --inf-cream: #f3ecdf;
   --inf-cream-2: #ece1cf;
   --inf-dark: #0d0b0a;
   --inf-dark-2: #17140f;
   --inf-text: #1b1819;
   --inf-text-muted: #6f6a63;
   --inf-accent: #c17a3d;
   --inf-accent-dark: #9c6130;
   --inf-border: #e3ddd2;
   --inf-white: #ffffff;

   --inf-font-heading: 'Oswald', sans-serif;
   --inf-font-body: 'Outfit', sans-serif;
   --inf-font-script: 'Caveat', cursive;
}

.inf { font-family: var(--inf-font-body); color: var(--inf-text); }

/* Make the shared transparent nav solid + dark-text on every v2 page, since
   these pages don't have the old theme's colored/dark banner right under
   the nav. Scoped to body.inf-page only — doesn't touch header.blade.php or
   any not-yet-redesigned page. */
body.inf-page .eg-header__transparent {
   position: relative !important;
   top: 0 !important;
   background: var(--inf-cream);
   border-bottom: 1px solid var(--inf-border);
}
body.inf-page .eg-header__transparent .navigation.inf-nav li > a,
body.inf-page .eg-header__transparent .eg-menu__header-btn a,
body.inf-page .eg-header__transparent .eg-menu__header-user .user,
body.inf-page .eg-header__transparent svg path {
   color: var(--inf-text);
   fill: var(--inf-text);
}
body.inf-page .eg-header__transparent .eg-menu__header-search {
   border-right-color: var(--inf-text);
}
/* logo-wh.png is a white mark meant for dark headers — darken it for this
   page's solid cream header rather than swapping the shared nav's asset. */
body.inf-page .eg-header__transparent .eg-menu__logo img,
body.inf-page .eg-header__transparent .eg-menu__header-cart-icon img { filter: brightness(0); }
body.inf-page .eg-header__transparent.header-sticky { background: var(--inf-cream); }

.inf h1, .inf h2, .inf h3, .inf h4, .inf h5, .inf h6,
.inf .inf-heading {
   font-family: var(--inf-font-heading);
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.01em;
   color: var(--inf-text);
   margin: 0;
}

.inf .inf-eyebrow {
   font-family: var(--inf-font-body);
   text-transform: uppercase;
   letter-spacing: 0.18em;
   font-size: 13px;
   font-weight: 600;
   color: var(--inf-accent);
   display: inline-block;
   margin-bottom: 12px;
}

.inf .inf-script {
   font-family: var(--inf-font-script);
   font-weight: 700;
   color: var(--inf-white);
   font-size: 22px;
   line-height: 1.3;
}
.inf .inf-script--dark { color: var(--inf-text); }

.inf section { padding: 90px 0; }
.inf .inf-section--tight { padding: 60px 0; }

.inf .inf-container {
   max-width: 1240px;
   margin: 0 auto;
   padding: 0 20px;
}

/* Buttons */
.inf .inf-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--inf-font-body);
   font-weight: 600;
   font-size: 15px;
   text-transform: none;
   padding: 15px 30px;
   border-radius: 999px;
   border: 1px solid transparent;
   transition: all .25s ease;
   white-space: nowrap;
}
.inf .inf-btn--dark {
   background: var(--inf-dark);
   color: var(--inf-white);
}
.inf .inf-btn--dark:hover { background: var(--inf-accent-dark); color: var(--inf-white); }

.inf .inf-btn--outline {
   background: transparent;
   border-color: var(--inf-text);
   color: var(--inf-text);
}
.inf .inf-btn--outline:hover { background: var(--inf-text); color: var(--inf-white); }

.inf .inf-btn--outline-light {
   background: transparent;
   border-color: rgba(255,255,255,.5);
   color: var(--inf-white);
}
.inf .inf-btn--outline-light:hover { background: var(--inf-white); color: var(--inf-dark); }

.inf .inf-btn--light {
   background: var(--inf-white);
   color: var(--inf-text);
}
.inf .inf-btn--light:hover { background: var(--inf-accent); color: var(--inf-white); }

.inf .inf-btn--sm { padding: 10px 22px; font-size: 14px; }
.inf .inf-btn--full { width: 100%; justify-content: center; }

/* Cards */
.inf .inf-card {
   background: var(--inf-white);
   border: 1px solid var(--inf-border);
   border-radius: 18px;
   overflow: hidden;
}

/* Cart / Checkout / Confirmation step indicator — shared by all three pages */
.inf-steps {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 24px;
   font-family: var(--inf-font-body);
   font-size: 13px;
}
.inf-steps__dot {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--inf-border);
   color: var(--inf-text-muted);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 12px;
}
.inf-steps__step.is-active .inf-steps__dot { background: var(--inf-dark); color: var(--inf-white); }
.inf-steps__step.is-done .inf-steps__dot { background: var(--inf-accent); color: var(--inf-white); }
.inf-steps__line { width: 40px; height: 1px; background: var(--inf-border); }

/* Toast (used by inf-cart.js) */
.inf-toast {
   position: fixed;
   bottom: 24px;
   right: 24px;
   background: var(--inf-dark);
   color: var(--inf-white);
   padding: 14px 22px;
   border-radius: 10px;
   font-family: var(--inf-font-body);
   font-size: 14px;
   z-index: 9999;
   opacity: 0;
   transform: translateY(10px);
   transition: all .25s ease;
   pointer-events: none;
}
.inf-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 991px) {
   .inf section { padding: 60px 0; }
}