@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

body {
	font-family: "Inter",Helvetica,Arial,sans-serif;
	margin: auto;
}

/* Animated Header */
.portfolio-header {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 20vh; /* Adjust height based on your layout needs */
    position: relative;
}

/* Word & SVG Base Styles */
.portfolio-header .word {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    cursor: default;
    user-select: none;
    font-size: 10vw;
    font-weight: 800;
    z-index: 10;
}

.portfolio-header .word span {
    display: block;
    position: relative;
    flex: none;
    white-space: pre;
}

/* Specific styling for Effect 8 */
.word--8 {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
	opacity: 0;
}

/* Container for injected SVG shapes generated by wordFx.js */
.shapes {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

@media screen and (max-width: 40em) {
    .portfolio-header .word {
        font-size: 4em;
    }
}

.intro {
	text-align: center;
	margin-top: 40px;
	font-size: 115%;
	font-family: 'Poppins', sans-serif;
	color: #141432;
}

hr.style2 {
	border-top: 2px solid #ffffff;
    text-align: center;
    width: 100%;
    margin: 0 0 25px 0;
}

hr.style3 {
	border-top: 2px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    margin: 0 0 30px 0;
}

#products {
	position: relative;
	background-color: transparent;
	width: 100%;
	padding: 100px 10vw 120px 10vw;
	text-align: left;
	color: #1e1e3c;
	z-index: 90;
}


@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) {

#products {
	padding: 0 10vw 150px 10vw;
}

}


@keyframes customFadeUp {
    0% { opacity: 0; transform: translate3d(0, 30px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes customFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes customFlipLeft {
    0% { opacity: 0; transform: perspective(400px) rotateY(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}


.anim-fade-up {
    opacity: 0;
    animation: customFadeUp 0.45s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.6s forwards;
}

.anim-fade-in {
    opacity: 0;
    animation: customFadeIn 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1.75s forwards;
}

.anim-flip-left {
    opacity: 0;
    animation: customFlipLeft 0.45s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.7s forwards;
}



/* Product grid */

.grid {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: 50px 0 0 0;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
}

/* Loader */
.grid__loader {
	display: none;
	margin: 3em auto 0;
}

.grid--loading .grid__loader {
	display: block;
}

/* Clearfix */

.grid:after {
	content: '';
	display: block;
	clear: both;
}

/* Grid items */

.grid__sizer,
.grid__item {
	position: relative;
	float: left;
	width: 25%;
	padding: .75em;
}

.no-touch .grid__sizer,
.no-touch .grid__item {
	padding: 30px 20px;
}

.grid--loading .grid__item {
	visibility: hidden;
}



/* Container for the expanded view */
.details {
    position: fixed;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 0 10vw;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the left-hand details block */
    align-items: flex-start;
    pointer-events: none;
    overflow: hidden; /* Prevents unwanted horizontal scrolling from the off-screen image */
}

.details--open {
    pointer-events: auto;
}

.details > * {
    position: relative;
    opacity: 0;
}

/* Single background fill */
.details__bg {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    background: linear-gradient(300deg, #FFFFFF, #ffebf4, #e6e7ff, #ffffff, #FFEBCB);
 	background-size: 300% 300%;
  	-webkit-animation: gradient-animation 10s ease infinite;
          animation: gradient-animation 10s ease infinite;
}

@-webkit-keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Image placement */
.details__img {
    position: absolute;
    top: 10vh;
    left: calc(100vw - 60vh);
    height: 80vh;
    width: 80vh;
    object-fit: contain;
    transform-origin: 0 0;
}

.details__title,
.details__subtitle,
.details__description,
hr.style3 {
    max-width: 45vw;
    word-wrap: break-word;
}

.details__title {
    margin: 0 0 0.1em 0;
	font-family: 'Poppins', sans-serif;
    font-size: 250%;
	letter-spacing: 0.5px;
	line-height:  1.1;
	text-transform: uppercase;
    font-weight: 700;
	color: #141432;
}

.details__subtitle {
    text-transform: uppercase;
    margin: 0 0 1em 0;
    letter-spacing: 0.5px;
	line-height:  1.1;
	font-family: 'Poppins', sans-serif;
    font-size: 200%;
	font-weight: 200;
    color: #1e1e3c;
}

.details__subtitle sup {
	font-size: 55%;
	font-weight: 300;
}

.details__description {
    line-height: 1.5;
	font-family: 'Poppins', sans-serif;
    margin: 0;
    color: #333333;
}

.details__back {
    border: 0;
    margin: 40px 0 0 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.3);
    padding: 0.75em 0;
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
    font-weight: 400;
    font-size: 115%;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: color 0.5s ease;
}

.details__back:hover {
    color: #3b82f6;
}

.details__back .icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
}

.details__close {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    background: none;
    margin: 2em;
    cursor: pointer;
    font-size: 1.25em;
    color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
	transition: color 0.5s ease;
    opacity: 0;
}

.details__close:hover {
    color: #3b82f6;
}

.liquid-panel {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    padding: 4px;
}

.glass-btn {
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.glass-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

.details__magnifier {
    position: absolute;
    z-index: 1000;
    left: calc(100vw - 45vh + 15px); 
    top: calc(90vh - 65px); 
}

.details__magnifier button {
    background-color: #3b82f6;
    color: #ffffff;
    padding: 14px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 2px 4px 0 rgba(255, 255, 255, 0.2);
	transition: all 0.6s ease;
}

.details__magnifier button:hover {
    background-color: #1e1e3c;
    color: #ffffff;
    transform: scale(1.15); /* Increase size by 20% */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
	transition: all 0.6s ease;
}

.details__magnifier .ph-magnifying-glass {
    font-size: 24px;
}

.details__magnifier .icon, .details__magnifier i {
	font-size: 24px;
}



/* Gallery */

.slider {
	padding: 0;
	border-radius: 5px;
	background: #24252a;
}

.no-touch .slider {
	padding: 0 0 1.25em;
}

.slider__item {
	width: 100%;
	padding: 1em;
	cursor: pointer;
    transition: transform 0.5s ease-in-out; /* Smooth transition */
}

.slider__item :hover {
    transform: scale(1.15); /* Increase size by 20% */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
}

.slider__item img {
	width: 100%;
    transition: transform 0.5s ease-in-out; /* Smooth transition */
	background: radial-gradient(circle,rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 70%);
}


/* Product meta */

.meta {
	position: relative;
	margin: 10px 0 0;
	padding: 0;
	text-align: center;
}

.meta__title {
	font-family: 'Poppins', sans-serif;
	font-size: .95em;
	font-weight: 500;
	margin: 0;
	padding: .4em 0 .1em;
	text-transform: uppercase;
    color: #ffffff;
}

.meta__brand {
	font-family: 'Poppins', sans-serif;
	font-size: 70%;
	font-weight: 500;
	display: block;
	color: #1e1e3c;
    padding-top: 5px;
	text-transform: uppercase;
}

.meta__brand sup {
	font-size: 7px;
	font-weight: 700;
}


/* Action style */

.action {
	font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
	font-size: 1.05em;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: .25em;
	cursor: pointer;
	color: #fff;
	border: none;
	background: none;
}

.action:focus {
	outline: none;
}

.action--button {
	color: #5c5edc;
}

.no-touch .action--button:hover {
	color: #fff;
	outline: none;
}

.text-hidden {
	position: absolute;
	top: 200%;
}

/* Add to cart button */

.action--buy {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	padding: 1.85em 2.35em;
	-webkit-transition: opacity .3s, -webkit-transform .3s;
	transition: opacity .3s, transform .3s;
	-webkit-transform: translate3d(-5px, 0, 0);
	transform: translate3d(-5px, 0, 0);
}

.no-touch .action--buy {
	opacity: 0;
}

.no-touch .grid__item:hover .action--buy {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Fixed bottom bar */

.bar {
    position: fixed;
	z-index: 9999;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 5px;
	text-align: center;
	background: #e06721;
}

.flexbox .filter {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

/* Filter */

.filter__label {
	font-size: .85em;
	display: inline-block;
	margin: 0 2%;
	font-weight: 400;
	text-transform: uppercase;
	color: #fba06b;
}

.filter__item {
	font-size: 80%;
	padding: 15px 20px;
	vertical-align: middle;
	color: #ffffff;
	text-transform: uppercase;
    border: 2px solid #e06721;
    margin: 0 2.5px;
    transition: all 0.3s ease;
}

.filter__item:hover {
    border: 2px solid #f38343;
    transition: all 0.3s ease;
	background-color: #000000;
    color: #f38343;
}

.filter__item--selected {
    border: 2px solid #f38343;
    transition: all 0.3s ease;
}

.filter__item .icon {
	font-size: 1.75em;
	display: none;
}

/* Shopping cart */

.cart {
	font-size: 1.5em;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	height: 100%;
	padding: 0 1.195em;
	cursor: pointer;
	color: #abacae;
	border: none;
	background-color: #131415;
    display: none;
}

.no-touch .cart:focus,
.no-touch .cart:hover {
	color: #fff;
	outline: none;
}

.cart--animate .cart__icon {
	-webkit-animation: cartAnim .4s forwards;
	animation: cartAnim .4s forwards;
}

@-webkit-keyframes cartAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes cartAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(50px, 0, 0);
		transform: translate3d(50px, 0, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(-50px, 0, 0);
		transform: translate3d(-50px, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

.cart__count {
	font-size: 9px;
	font-weight: bold;
	line-height: 15px;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 15px;
	height: 15px;
	margin: -16px 0 0 0;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	background: #5c5edc;
}

.cart--animate .cart__count {
	-webkit-animation: countAnim .4s forwards;
	animation: countAnim .4s forwards;
}

@-webkit-keyframes countAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(0, -80px, 0);
		transform: translate3d(0, -80px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes countAnim {
	50% {
		opacity: 0;
		-webkit-transform: translate3d(0, 80px, 0);
		transform: translate3d(0, 80px, 0);
	}
	51% {
		opacity: 0;
		-webkit-transform: translate3d(0, -80px, 0);
		transform: translate3d(0, -80px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
/* Resize grid items on smaller screens */

@media screen and (max-width: 1150px) {
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 33.333%;
	}
}

@media screen and (max-width: 860px) {
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 50%;
	}
	.bar {
		padding-left: 0;
		text-align: left;
	}
}

@media screen and (max-width: 1007px) {
	.bar {
		padding: .5em 0 .5em 0;
	}
	.flexbox .filter {
		-webkit-justify-content: space-around;
		justify-content: space-around;
	}
	.filter__item {
		height: 100%;
		padding: 1.4em .1em .5em .1em;
		border: none;
        background: none;
        transition: none;
	}
    .filter__item:hover {
		border: none;
        background: none;
        transition: none;
    }

    .filter__item--selected {
		border: none;
        background: none;
        transition: none;
        color: #ffffff;
    }
	.filter__item .icon {
		display: inline-block;
	}
	.filter__label,
	.action__text {
		display: none;
	}
	.cart {
		padding: 0 1em;
	}
	#products {
		padding: 60px 10vw 100px 10vw;
	}
	.fixed-social-nav {
    	opacity: 0!important;
    	pointer-events: none!important;
	}
}

@media screen and (max-width: 571px) {
	.grid {
		max-width: 100%;
	}
	.grid__loader {
		margin: 0 auto;
	}
	.grid__sizer,
	.grid__item,
	.grid__item--size-a {
		width: 100%;
	}
	.action--buy {
		font-size: 1.5em;
		padding: 1.15em 1.5em;
		-webkit-tap-highlight-color: transparent;
	}
}

@media screen and (max-width: 550px) {
	.filter__item {
		padding: 1.6em .1em .5em .1em;
	}
}

@media only screen 
and (min-device-width : 500px) 
and (max-device-width : 812px) {

.filter__item {
	font-size: 28px;
}

.bar {
	height: 160px;
	padding: .5em .25em .5em .25em;
	border-top: solid 5px #ffffff;
}

.grid__sizer, .grid__item, .grid__item--size-a {
	width: 50%;
}

.meta__title {
	font-size: 125%;
}

.meta__brand {
	font-size: 110%;
	padding-top: 0;
}

.meta__brand sup {
	font-size: 9px;
}

.grid {
	padding: 1.5em 0 3em;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 499px) {
.grid__sizer, .grid__item, .grid__item--size-a {
	width: 100%;
}
	
.meta__title {
	font-size: 125%;
}

.meta__brand {
	font-size: 100%;
	padding-top: 0;
}

.meta__brand sup {
	font-size: 9px;
}
	
.intro {
	margin-bottom: 0;
}

.details__subtitle {
	margin: 0 0 .75em 0;
}

.details__title {
	font-size: 200%;
}

.details__subtitle {
	font-size: 175%;
}

hr.style3 {
	margin: 0 0 20px 0;
}
}


@media screen and (max-width: 1200px) {
.details__img {
left: calc(100vw - 50vh);
}

.details__magnifier {
left: calc(100vw - 35vh + 15px);
}
}

@media screen and (max-width: 1000px) {
.details__img {
left: calc(100vw - 40vh);
}

.details__magnifier {
left: calc(100vw - 25vh + 15px);
}
}


/* ─── MOBILE RESPONSIVE LAYOUT OVERRIDES (MAX-WIDTH: 499px) ─── */
@media screen and (max-width: 699px) {
    .details {
        padding: 0 5vw;
        align-items: center; /* Centers detail elements horizontally */
        text-align: center; /* Centers textual content internally */
        justify-content: flex-start; /* Flows item cards top-down */
    }

    /* Reposition Back Button to top-left corner completely out of layout flow */
    .details__back {
        position: absolute;
        top: 2vh;
        left: 5vw;
        margin: 0;
        z-index: 1001; 
    }

    /* Scales down image and completely centers it at the top of viewport */
    .details__img {
        top: 12vh;
        left: 50vw;
        margin-left: -20vh; /* Exactly half of width offset ensures pixel perfect alignment */
        height: 40vh; 
        width: 40vh;
    }

	#products {
	padding: 30px 10vw 100px 10vw;
	}


.details__magnifier {
    /* Structural Position */
    position: absolute;
    z-index: 1000;
    /* Calculated relative to the .details__img position (12vh top, 50vw centered) */
    /* Right Edge: 50vw + 20vh - Button Width (52px) - Padding (10px) */
    left: calc(50vw + 20vh - 62px); 
    /* Bottom Edge: 12vh + 40vh - Button Height (52px) - Padding (10px) */
    top: calc(52vh - 62px); 
    
    /* Inner Blue Button Styling */
    width: 52px; 
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #3b82f6; 
    color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Shadows */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 
        inset 0 2px 4px 0 rgba(255, 255, 255, 0.2);
        
    /* Interaction State */
    transition: transform 0.1s ease, opacity 0.1s ease;
    cursor: pointer;
}

/* Outer Frosted Panel (mimicking .liquid-panel p-1 shrink-0 shadow-xl) */
.details__magnifier::before {
    content: "";
    position: absolute;
    inset: -4px; 
    border-radius: 50%;
    z-index: -1;
	left: -3px;
	top: -3px;
    
    /* Explicit values matching the desktop .liquid-panel class */
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
}

/* Active State Transform */
.details__magnifier:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* Icon Sizing (mimicking text-2xl) */
.details__magnifier .icon, 
.details__magnifier i {
    font-size: 24px; 
    width: 1em;
    height: 1em;
    fill: currentColor;
}

    /* Allows typography details to comfortably scale wide */
    .details__title, 
    .details__subtitle, 
    .details__description,
	hr.style3 {
        max-width: 90vw; 
    }

    /* Pushes content block downwards cleanly beneath centered image layout */
    .details__title {
        margin-top: 54vh !important;
    }
}