*{
    margin:0;
    padding:0;

}
:root {
  --font-display: "Anton", sans-serif;
  --font-mono: "Space Mono", monospace;
  --font-body: "Inter", sans-serif;
  --font-hand: "Permanent Marker", cursive;
}
body {
  font-family: var(--font-body);
}

h1, h2, .logo {
  font-family: var(--font-display);
  text-transform: uppercase;
}

.navbar a,
.eyebrow,
.hero-btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.header-icons svg{
    width:25px;
    height:25px;
    color:#111111;
    
}
.header-icons svg:hover{
    color:#e9e6e1;
}
.header-icons{
    gap:30px;
    display:flex;
    margin-left:auto;
}
header{
    display:flex;
    gap:50px;
    padding-left:30px;
    padding-right:30px;
    align-items:center;
    min-height: 10vh;
    background-color: #ff5a1f;
}
.logo{
    font-size:55px;
    text-decoration: none;
    color:#111111;
    font-family: var(--font-display);
}
.navbar{
    display:flex;
    gap:30px;
    
}
.navbar a{
color:#111111;
text-decoration: none;
font-size:15px;
text-transform: uppercase;
font-weight:900;
}
.navbar a:hover{
    color:#e9e6e1;
}
.search{
    display:flex;
    align-items:center;
    gap:10px;
    width:260px;
    padding:10px 10px;
    background: rgba(255, 255, 255, 0.35);
    border-radius:999px;
}
.search svg{
    width:15px;
    height:15px;
    flex-shrink:0;
}
.search input{
    width:100%;
    border:none;
    background:none;
    outline:none;
    font-family: var(--font-body);
    font-size:15px;
    color:#111111;
}
.search input::placeholder{
color:#555555;
}
.search:focus-within{
    background:#ece9e4;
}
.hero-container{
    min-height:100vh;
    background:url(images/hero-background.png) center/cover;
display:flex;
padding-left:60px;
padding-right:60px;
align-items:center;
position:relative;
overflow: hidden;
justify-content: space-between;
}
.hero-text, .second-text-hero{
    position:relative;
    z-index:1;
}
.hero-shoe{
    --tilt: 0deg;                 
    position:absolute;
    left:50%;
    top:52%;
    width:45%;
    max-width:900px;
    z-index:2;
    transform: translate(-50%, -50%) rotate(var(--tilt));
    filter: drop-shadow(30px 40px 30px rgba(0, 0, 0, 0.45));
pointer-events: none; 
animation: float 4s ease-in-out infinite;
  transition: opacity 0.25s ease, scale 0.25s ease;
}
.hero-shoe.swapping {
    opacity: 0;
    scale: 0.92;
}
@keyframes float {
 0%, 100% { transform: translate(-50%, -50%) rotate(var(--tilt)); }
    50%      { transform: translate(-50%, -53%) rotate(calc(var(--tilt) + 2deg)); }

}
.eyebrow{
    color:#e9e6e1;
    font-size:20px;
    letter-spacing:0.3cap;
    margin-bottom:40px;
}
h1{
    color:#e9e6e1;
    font-size:160px;
    font-family: var(--font-display);
    line-height:1;
     transform: rotate(-4deg);
    transform-origin: left bottom;
    margin-bottom:40px;
}
.black{
    color:#111111;
}
.description{
    color:#111111;
    font-size:25px;
    font-weight:700;
margin-bottom:40px;
  text-shadow:
        0 0 8px rgba(233, 230, 225, 0.9),
        0 0 16px rgba(233, 230, 225, 0.8);
}
.hero-btn{
    padding:25px 80px;
    background-color:#111111;
    border-radius:8px;
    color:#e9e6e1;
    text-decoration:none;
    font-size:20px;
}
.hero-btn:hover{
    background-color: #ff5a1f;
    border:1px solid #111111;
    color:#e9e6e1;
}
.second-text-hero h2{
    font-size:80px;
    font-weight:500;
}
.product-description{
    color:#111111;
    font-size:25px;
    margin-bottom:20px;
}
.price{
    color:#111111;
    font-size:80px;
    font-weight:500;
    font-family: var(--font-display);
}
.carousel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.thumbs {
    display: flex;
    gap: 6px;
}

.thumbs button {
    width: 80px;
    height: 80px;
    padding: 6px;
    background: #e9e6e1;           
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s;
}

.thumbs button:hover {
    opacity: 1;
}

.thumbs button.active {
    opacity: 1;
    border-color: #ffffff;     
}

.thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;           
}

.arrow {
    background: none;
    border: none;
    color: #e9e6e1;
    font-size: 26px;
    cursor: pointer;
}

.arrow:hover {
    color: #111111;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.pagination .page.active {
    color: #ffffff;
}

.pagination .line {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}
.second-hero{
    min-height:90vh;
   display: grid;
    grid-template-columns: 1fr 1fr;
}
.left-hero,
.right-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;          
    min-height: 520px;
    padding: 60px;
    background-size: cover;         
    background-position: center;    
}

.left-hero{
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%), url(images/woman.png);
    
}
.right-hero{
    background-image: linear-gradient(90deg, rgba(233, 230, 225, 0.6), rgba(233, 230, 225, 0) 60%), url(images/men.png);
}
.second-hero h3 {
    font-family: var(--font-display);
    font-size: 90px;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.white{
    color:#e9e6e1;
}
.box-description{
    font-size:20px;
    text-transform:uppercase;
    font-weight:500;
    margin-bottom:40px;
}
hr{
    border:1px solid #e9e6e1;
}
.box-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1.5px solid currentColor; 
    border-radius: 50%;
    color: inherit;
    font-size: 45px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.left-hero .box-btn:hover {
    background: #e9e6e1;
    color: #111111;
}
.left-hero .box-btn {
    color: #ffffff;                 
    border: 1.5px solid #ffffff;   
}

.right-hero .box-btn:hover {
    background: #111111;
    color: #e9e6e1;
}
.third-hero{
     position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    min-height: 90vh;
    padding: 80px 60px;
    background: #111111;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;                
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.hero-bg-next {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-bg-next.visible {
    opacity: 1;
}
.third-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.15) 60%,
        rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

.third-left,
.third-right {
    position: relative;
    z-index: 2;
}
.cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cat {
    display: flex;
    align-items: baseline;
    gap: 16px;
    cursor: pointer;
}

.cat-tag {
    font-family: var(--font-mono);
    font-size: 13px;
    color: rgba(233, 230, 225, 0.7);
}

.cat-title {
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 1;
    text-transform: uppercase;
    color: #8a8a8a;
    transition: color 0.2s, font-size 0.2s;
}

.cat:hover .cat-title {
    color: #e9e6e1;
}
.cat.active .cat-title {          
    color: #ff5a1f;
    font-size: 100px;
    padding-bottom: 6px;
    border-bottom: 3px solid #ff5a1f;
}

.cat.active .cat-tag {
    color: #ff5a1f;
}

.cat-arrows {
    display: flex;
    gap: 14px;
    margin-top: 44px;
}

.circle-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid #e9e6e1;
    background: transparent;
    color: #e9e6e1;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.circle-arrow:hover {
    background: #e9e6e1;
    color: #111111;
}

.third-right {
    max-width: 440px;
    color: #e9e6e1;
}

.third-eyebrow {
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.third-right hr {
    width: 60px;
    border: none;
    border-top: 1px solid #e9e6e1;
    margin: 14px 0 24px;
}

.third-right h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 80px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.third-description {
    max-width: 360px;
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(233, 230, 225, 0.85);
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    border-radius: 9px;
    padding: 20px 60px;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
}

.explore-btn:hover {
    background: #e9e6e1;
    color:#ff5a1f;
    border:1px solid #111111;
}

.bg-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 50px;
}

.bg-thumb {
    width: 110px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid rgba(233, 230, 225, 0.5);
    background: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}

.bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bg-thumb:hover {
    opacity: 1;
}

.bg-thumb.active {
    opacity: 1;
    border-color: #ff5a1f;          
}
.featured-hero{
    background-image:url(images/new-hero.png);
    min-height:90vh;
    padding-left:60px;
    padding-right:60px;

}
.featured-hero .top{
    display:flex;
    justify-content: space-between;
   padding-top:60px;
}
.featured-hero .eyebrow {
    color:#111111;
    margin-bottom:0;
}
.featured-hero h4{
    font-size:100px;
    font-weight:900;
    font-family: var(--font-display);
    letter-spacing: 0.1cap;
}
.featured-btn{
    text-decoration: none;
    color:#111111;
    letter-spacing: 0.3cap;
    font-size:20px;
    font-weight:500;
}
.featured-btn:hover{
    color:#ff5a1f;
}
.product-track{
    display:grid;
     grid-template-columns: repeat(4, 1fr);
    gap:20px;
    margin-top:20px;
}
.product-card{
    position:relative;
    display:flex;
    flex-direction:column;
     transition: transform 0.25s, box-shadow 0.25s;
    background-color: #ece9e4;
}
.product-card:hover {
    transform: translateY(-6px);                    
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
}
.product-card .badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    padding: 5px 12px;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
}
.product-img {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.product-img img {
    width: 80%;
    height: 80%;
    object-fit: contain;         
    transition: transform 0.3s, opacity 0.2s;
}
.product-card:hover .product-img img {
    transform: scale(1.06) rotate(-4deg);
}
.product-card .product-name{
    font-size:18px;
    font-weight:900;
    padding-left:20px;
}
.product-name::after {          
    content: "";
    display: block;
    width: 70px;
    height: 1.5px;
    margin-top: 8px;
    background: #111111;
}
.product-card .price{
    font-size:25px;
}
.product-footer{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
}
.swatches{
    display:flex;
    gap:10px;
    
}
.swatch{
    width:26px;
    height:26px;
    padding:0;
    border-radius:50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--c);        
    cursor: pointer;
}
.swatch.active {
    outline: 1.5px solid #111111;
    outline-offset: 2px;         
}
.product-img img.straighten {
    rotate: -25deg;    
}
.fourth-hero{
    background-image: url(images/fourth-hero.png);
    min-height:50vh;
    align-items:center;
    padding-top:80px;
    padding-left:60px;
    padding-bottom:100px;
}
.fourth-text{
    width:30%;

}
.fourth-text h6{
    font-size:90px;
    color:#e9e6e1;
    text-transform: uppercase;
    font-weight:900;
    font-family: var(--font-display);
    line-height: 1.2cap;
    letter-spacing: 0.1cap;
}
.orange{
    color:#ff5a1f;
}
.fourth-text .description{
line-height:1.5;
margin-top:30px;
font-size:20px;
}
.about-btn{
    border:1px solid #e9e6e1;
    background:transparent;
    padding:20px 50px;
    color:#e9e6e1;
    font-size:18px;
    text-decoration: none;
    text-transform: uppercase;
    margin-left:30px;
    margin-top:40px;
   
}
.about-btn:hover{
    border:1px solid #ff5a1f;
    color:#ff5a1f;
}
.site-footer{
    position:relative;
    background:#111111;
    color:#e9e6e1;
    padding:60px 60px 30px;
}
.footer-wave{
    position:absolute;
    bottom:calc(100% - 20px);
    left:0;
    width:100%;
    height:80px;
    display:block;
    fill:#111111;
    margin-bottom:-1px;
}
.footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.6fr;
    gap: 40px;
    align-items: start;
}
.footer-logo {
    font-family: var(--font-display);
    font-size: 90px;
    line-height: 0.9;
    color: #e9e6e1;
    text-decoration: none;
    text-transform: uppercase;
}
.footer-tagline {
    margin: 16px 0 26px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(233, 230, 225, 0.75);
}
.social-media {
    display: flex;
    gap: 18px;
    margin-bottom:20px;
}

.social-media a {
    display: flex;
    color: #e9e6e1;
    transition: color 0.2s, transform 0.2s;
   
}

.social-media svg {
    width: 22px;
    height: 22px; 
    gap:30px;
}
.social-media svg:hover{
    color:#ff5a1f;
    transform: translateY(-2px);
}
.footer-title{
   margin-bottom: 16px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.footer-col{
   display:flex;
   flex-direction: column;
   gap:18px;
}
.footer-col a{
    text-decoration: none;
    color:#e9e6e1;
    font-size:13px;
    transition: color 0.2s;
}
.footer-col a:hover{
    color:#ff5a1f;
}
.news-form{
    display:flex;
    border:1px solid rgba(233, 230, 225, 0.3)
}
.news-form:focus-within{
border-color:#ff5a1f;
}
.news-form input{
    flex:1;
    min-width:0;
    padding:14px 16px;
    background:transparent;
    border:none;
    outline:none;
    color:#e9e6e1;
    font-family: var(--font-body);
    font-size:15px;
}
.news-form button{
    width:54px;
    border:none;
    background:#ff5a1f;
    color:#ffffff;
    font-size:20px;
    cursor: pointer;
}
.news-form button:hover{
    background:#e44a12;
}
.news-msg {
    min-height: 18px;
    margin-top: 10px;
    font-size: 13px;
    color: #ff5a1f;
}
.copyright {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(233, 230, 225, 0.15);
    text-align: right;
    font-size: 13px;
    color: rgba(233, 230, 225, 0.6);
}
.about-hero{
   background-image:url(images/about-hero.png);
   min-height:90vh;
}
.about-hero h1{
    font-size:110px;
}

.about-page header{
position:absolute;
top:0;
left:0;
right:0;
z-index:10;
background:transparent;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

}
.about-page .logo,
.about-page .navbar a,
.about-page .header-icons svg,
.about-page .header-icons a {
    color: #e9e6e1;
}
.about-page .search {
    background: rgba(255, 255, 255, 0.15);
}

.about-page .search input,
.about-page .search input::placeholder {
    color: #e9e6e1;
}
.about-page .logo:hover,
.about-page .navbar a:hover,
.about-page .header-icons svg:hover,
.about-page .header-icons a:hover {
    color: #e44a12;
}
.about-text{
    align-items:center;
    padding-left:80px;
    padding-top:120px;
}
.about-text .description{
    font-size:25px;
}
.second-about{
    min-height:70vh;
    display:flex;
    justify-content: space-between;
}
.second-about-left{
    align-items:center;
    padding-left:60px;
padding-top:60px;

}
.second-about-left .eyebrow{
    color:#111111;
}
.text-arrow{
    display:flex;
    gap:30px;
}
.text-arrow h2{
    font-size:70px;
}
.text-arrow i{
    margin-top:40px;
    font-size:30px;
    color:#e44a12;
}
.second-about-left .description{
    font-size:20px;
    margin-top:30px;
   
}
.collage{
    position:relative;
    width:100%;
    max-width:840px;
    aspect-ratio:4 / 3;
    margin-right:280px;

}
.collage-photo{
    position:absolute;
    object-fit: cover;
    border:6px solid #e9e6e1;
    box-shadow:0 12px 30px rgba(0, 0, 0, 0.35);

}
.photo-back{
    top:0;
    left:0;
    width:65%;
height:60%;
rotate: -6deg;
z-index:1;
}
.photo-front{
    top:15%;
    left:22%;
    width:85%;
    height:72%;
    rotate:3deg;
    z-index:2;
}
.third-about{
    min-height:60vh;
    background-image:url(images/about-background.png);
}
.third-about-text{
    align-items:center;
    padding-left:60px;
    padding-top:50px;
    width:28%;
}
.third-about-text h3{
    font-size:90px;
    color:#e9e6e1;
font-family: var(--font-display);
line-height:1.2;
}
.third-about-text .description{
    margin-top:40px;
    font-size:20px;
    line-height:1.5;
}
.fourth-about{
    min-height: 30vh;
padding-left:60px;
padding-right:60px;

}
.fourth-about .eyebrow{
    color:#111111;
    margin-top:40px;
}
.fourth-about-boxes{
    display:grid;
     grid-template-columns: repeat(4, 1fr);
}
.fourth-about-box{
    border-left:1px solid #111111;
    padding:10px 40px;
    display:flex;
    align-items:flex-start;
    gap:24px;
    flex:1;
}
.fourth-about-box:first-child {
    border-left: none;                              
    padding-left: 0;
}
.fourth-about-box-left i{
font-size:35px;
text-align:center;
width:40px;
}
.fourth-about-box-left{
    margin-right:10px;
}
.fourth-about-box-right h4{
font-size:22px;
 margin-bottom: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: uppercase;

}
.fourth-about-box-right .box-description{
    font-size:18px;
     margin-bottom: 80px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;         
    color: #333333;
}
.contact-page header{
    background-color: #111111;
}
.contact-page .logo,
.contact-page .navbar a,
.contact-page .header-icons svg,
.contact-page .header-icons a {
    color: #e9e6e1;
}
.contact-page .search {
    background: rgba(255, 255, 255, 0.15);
}

.contact-page .search input,
.contact-page .search input::placeholder {
    color: #e9e6e1;
}
.contact-page .logo:hover,
.contact-page .navbar a:hover,
.contact-page .header-icons svg:hover,
.contact-page .header-icons a:hover {
    color: #e44a12;
}
.contact-hero{
   min-height:70vh;
    background-image:url(images/contact-page.png);
}
.contact-hero-text h1{
    color:#111111;
font-family: var(--font-display);
font-size:120px;
}
.orange{
    color:#e44a12;
}
.contact-hero-text{
    text-align:center;
    padding-top:80px;
    width:35%;
    padding-left:40px;
}
.contact-hero-text .description{
    font-size:25px;
}
.contact-second{
    display:grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
min-height:50vh;

}
.contact-second-left{
    background-color: #111111;
    align-items: center;
    padding:60px;
    display:flex;

}
.contact-form{
    width: 100%;
    max-width: 620px;        
    margin:0 auto;      
    color: #e9e6e1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.form-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
}
.contact-form input, .message-box{
  padding: 16px 14px;                         
    border: 1px solid rgba(233, 230, 225, 0.6);  
    background-color: transparent;
    color: #e9e6e1;
    font-family: var(--font-body);
    font-size: 18px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(233, 230, 225, 0.6);
}
.contact-form input:focus,
.message-box:focus-within {
    outline: none;
    border-color: #ff5a1f;
}
.message-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: text;
}
.message-box textarea {
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;                    
    color: #e9e6e1;
    font-family: var(--font-body);
    font-size: 18px;
}
.send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
    border: none;
    background: #ff5a1f;
    color: #111111;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

.send-btn:hover {
    background:transparent;
    border:1px solid #e44a12;
    color:#e44a12;
}
.form-msg {
    min-height: 18px;
    color: #ff5a1f;
    font-size: 18px;
}
.contact-second-right{
     position: relative;    
    display: flex;
    align-items: center;    
    padding: 60px;
    background: #e9e6e1 url(images/social-media.png) center / cover;
    overflow: hidden; 
}
.hero-container,
.featured-hero,
.fourth-hero,
.about-hero,
.third-about,
.contact-hero,
.contact-second-right {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.social-box h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 80px;
    line-height: 0.9;
    color: #111111;
}

.social-box p {
    margin: 20px 0 26px;
    font-size: 16px;
    color: #111111;
}

.social-circles {
    display: flex;
    gap: 14px;
}

.social-circles a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1.5px solid #111111;
    border-radius: 50%;
    color: #111111;
    font-size: 24px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.social-circles a:hover {
    background: #111111;
    color: #e9e6e1;
}

.social-note {
    position: absolute;
    right: 50px;
    bottom: 40px;
    rotate: -12deg;
    font-family: var(--font-hand);
    font-size: 30px;
    line-height: 1.15;
    color: #ff5a1f;
    text-transform: uppercase;
}

.social-note::after {
    content: "";
    display: block;
    width: 70%;
    height: 10px;
    margin-top: 8px;
    border-bottom: 3px solid #ff5a1f;
    border-radius: 0 0 50% 50%;
}
.third-contact{
    min-height:40vh;
    gap:60px;
    align-items:start;
    padding: 80px 60px 140px; 
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.third-contact-left{
    align-items:center;
    padding-left:60px;
    width:45%;
}
.third-contact-left .eyebrow{
    color:#111111;
}
.third-contact-left h3{
    font-size:80px;
    font-family: var(--font-display);
    line-height:1.1;
}
.third-contact-right{
    align-items:center;
    padding-top:80px;
    padding-right:60px;

}
.faq-item{
    border-top:1px solid #b9b4ad;
}
.faq-item:last-child {
    border-bottom: 1px solid #b9b4ad;
}
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: #111111;
    cursor: pointer;
}
.faq-question:hover {
    color: #ff5a1f;
}
.faq-icon {
    position: relative;
    width: 20px;
    height: 18px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
.faq-icon::after {
    transform: translateY(-50%) rotate(90deg);     
}

.faq-item.open .faq-icon::after {
    transform: translateY(-50%) rotate(0deg);      
}
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.faq-answer-inner {
    overflow: hidden;
}

.faq-answer p {
    margin: 0 40px 22px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #444444;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}
.shop-hero{
    background-image: url(images/shipping.png);
    min-height:60vh;
      position: relative;    
    display: flex;
    align-items: center;    
    padding: 60px;
    overflow: hidden; 
      background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.container .description{
    font-size:30px;
}
   .acc-page {
            max-width: 1180px;
            margin: 0 auto;
            padding: 20px 40px 70px;
           }

        .acc-breadcrumb {
            font-family: "Space Mono", monospace;
            font-size: 15px;
            text-transform: uppercase;
        }

        .acc-breadcrumb a { color: inherit; text-decoration: none; }
        .acc-breadcrumb a:hover { color: var(--orange, #ff5a1f); }
        .acc-breadcrumb span { margin: 0 8px; }

        .acc-title {
            margin: 18px 0 30px;
            font-family: "Anton", sans-serif;
            font-size: 70px;
            line-height: 0.95;
            text-transform: uppercase;
            color:#111111;
           
        }

        .acc-title span { color: var(--orange, #ff5a1f); }

        .acc-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: stretch;
        }

        .acc-box {
            padding: 30px;
            background: var(--card, #ece9e4);
        }

        .acc-tabs {
            display: flex;
            gap: 24px;
            margin-bottom: 26px;
            border-bottom: 1px solid var(--line, #b9b4ad);
        }

        .acc-tab {
            padding: 0 0 10px;
            margin-bottom: -1px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-size: 15px;
            text-transform: uppercase;
            color: #777;
            cursor: pointer;
        }

        .acc-tab.active { color: #d6331a; border-bottom-color: var(--orange, #ff5a1f); }

        .acc-form { display: flex; flex-direction: column; gap: 16px; }

        .field { display: flex; flex-direction: column; gap: 6px; }

        .field label {
            font-family: "Space Mono", monospace;
            font-size: 15px;
            text-transform: uppercase;
        }

        .field input {
            height: 54px;
            padding: 0 14px;
            border: 1px solid var(--line, #b9b4ad);
            background: #fff;
            font-family: "Inter", sans-serif;
            font-size: 15px;
            border-radius:9px;
        }

        .field input:focus {
            outline: none;
            border-color: #d6331a;
        }

        .field input.invalid { border-color: #d6331a; }

        .field-error {
            min-height: 14px;
            font-size: 15px;
            color: #d6331a;
        }

        .acc-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            height: 58px;
            margin-top: 4px;
            border: none;
            background: var(--orange, #ff5a1f);
            color: #fff;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-size: 15px;
            text-transform: uppercase;
            cursor: pointer;
        }

        .acc-btn:hover { 
            background: #111111; 
            border:1px solid #d6331a;
            color:#d6331a;
        }

        .acc-note {
            margin: 4px 0 0;
            font-size: 12px;
            color: #666;
        }

        .acc-side {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            background: #111;
            color: #fff;
            background-image:url(images/movement-hero.png);
       background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        }

        .acc-side h2 {
            margin: 0 0 18px;
            font-family: "Anton", sans-serif;
            font-size: 44px;
            line-height: 1;
            text-transform: uppercase;
        }

        .acc-side h2 span { color: var(--orange, #ff5a1f); }

        .acc-side ul {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: "Space Mono", monospace;
            font-size: 15px;
            line-height: 2;
            text-transform: uppercase;
        }

        .acc-side li::before { content: "→ "; color: var(--orange, #ff5a1f); }

        .dash-hello {
            margin: 0 0 24px;
            font-family: "Space Mono", monospace;
            font-size: 13px;
        }

        .dash-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .dash-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 24px;
            background: var(--card, #ece9e4);
            color: #111;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        a.dash-card:hover { background: #111; color: #fff; }

        .dash-label {
            font-family: "Space Mono", monospace;
            font-size: 11px;
            text-transform: uppercase;
        }

        .dash-number {
            font-family: "Anton", sans-serif;
            font-size: 48px;
            line-height: 1;
        }

        .dash-number.orange { color: var(--orange, #ff5a1f); }

        .dash-details {
            margin: 0;
            font-size: 13px;
            line-height: 1.7;
        }

        .signout-btn {
            margin-top: 26px;
            padding: 12px 24px;
            border: 1.5px solid #111;
            background: transparent;
            font-family: "Space Mono", monospace;
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            cursor: pointer;
        }

        .signout-btn:hover { background: #111; color: #fff; }
  .wish-page {
    min-height: 75vh;
    padding: 24px 60px 140px;          
    background: #e9e6e1 url(images/account-hero.png) center / cover no-repeat;
}

.wish-breadcrumb,
.wish-top,
.wish-grid {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.wish-breadcrumb {
    font-family: var(--font-mono);
    font-size: 15px;
    text-transform: uppercase;
    color: #111111;
}

.wish-breadcrumb a {
    color: #555555;
    text-decoration: none;
}

.wish-breadcrumb a:hover {
    color: #ff5a1f;
}

.wish-breadcrumb span {
    margin: 0 10px;
}

.wish-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.wish-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 80px;
    line-height: 0.95;
    color: #111111;
    transform: none;                    
}

.wish-title span {
    color: #ff5a1f;
}

.wish-count {
    font-family: var(--font-mono);
    font-size: 17px;
    text-transform: uppercase;
}

.wish-page:has(.wish-empty:not([hidden])) .wish-top {
    display: none;
}

.wish-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    text-align: center;
}

.wish-empty[hidden] {
    display: none;                     
}

.wish-empty svg {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    color: #111111;
}

.wish-empty h2 {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 44px;
    text-transform: uppercase;
    color: #111111;
}

.wish-empty p {
    margin-bottom: 30px;
    font-size: 18px;
    color: #333333;
}

.wish-explore {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 54px;
    border: 1px solid #ff5a1f;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    border-radius: 9px;
}

.wish-explore:hover {
    background: transparent;
    color: #ff5a1f;
}

.wish-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.wish-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ece9e4;
    transition: transform 0.25s, box-shadow 0.25s;
}

.wish-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.wish-card-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #cfcac3;
}

.wish-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wish-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 8px;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

.wish-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.wish-remove svg {
    width: 24px;
    height: 24px;
    fill: #ff5a1f;
    stroke: #ff5a1f;
    transition: transform 0.2s;
}

.wish-remove:hover svg {
    transform: scale(1.15);
}

.wish-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    padding: 14px;
}

.wish-card-name {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.wish-card-name a {
    color: #111111;
    text-decoration: none;
}

.wish-card-name a:hover {
    color: #ff5a1f;
}

.wish-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.wish-card-row .sale {
    color: #ff5a1f;
}

.wish-card-row s {
    margin-left: 8px;
    color: #888888;
}

.wish-dots {
    display: flex;
    gap: 5px;
}

.wish-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--c);
}

.wish-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border: 1.5px solid #111111;
    color: #111111;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.wish-view:hover {
    background: #111111;
    color: #ffffff;
}
.cart-page {
    min-height: 75vh;
    
    padding: 24px 60px 140px;           
    background: #e9e6e1 url(images/account-hero.png) center / cover no-repeat;
}

.cart-breadcrumb,
.cart-title,
.cart-layout {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.cart-breadcrumb {
    font-family: var(--font-mono);
    font-size: 15px;
    text-transform: uppercase;
    color: #111111;
}

.cart-breadcrumb a { color: #555555; text-decoration: none; }
.cart-breadcrumb a:hover { color: #ff5a1f; }
.cart-breadcrumb span { margin: 0 10px; }

.cart-title {
    margin-top: 24px;
    margin-bottom: 30px;
    font-family: var(--font-display);
    font-size: 80px;
    line-height: 0.95;
    color: #111111;                      
    transform: none;                      
}

.cart-title span { color: #ff5a1f; }

.cart-page:has(.cart-empty:not([hidden])) .cart-title {
    display: none;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    text-align: center;
}

.cart-empty[hidden] { display: none; }

.cart-empty svg {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
    color: #111111;
}

.cart-empty h2 {
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 44px;
    text-transform: uppercase;
    color: #111111;
}

.cart-empty p {
    margin-bottom: 30px;
    font-size: 18px;
    color: #333333;
}

.cart-explore {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 54px;
    border: 1px solid #ff5a1f;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    border-radius: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.cart-explore:hover { background: transparent; color: #ff5a1f; }

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    align-items: start;
}

.cart-layout[hidden] { display: none; }

.cart-layout > section {
    padding: 24px;
    background: rgba(236, 233, 228, 0.92);
}

.cart-head {
    display: grid;
    grid-template-columns: 1fr 120px 100px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #111111;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
}

.cart-head span:nth-child(n+2) { text-align: right; }

.cart-item {
    display: grid;
    grid-template-columns: 110px 1fr 120px 100px;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #b9b4ad;
}

.cart-item-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #cfcac3;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-name {
    margin-bottom: 6px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
}

.cart-item-name a { color: #111111; text-decoration: none; }
.cart-item-name a:hover { color: #ff5a1f; }

.cart-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #555555;
    text-transform: capitalize;
}

.cart-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--c);
}

.remove-btn {
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #111111;
    cursor: pointer;
}

.remove-btn:hover { color: #ff5a1f; }

.qty {
    display: flex;
    justify-content: flex-end;
}

.qty-box {
    display: flex;
    align-items: center;
    border: 1px solid #b9b4ad;
}

.qty-btn {
    width: 32px;
    height: 34px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.qty-btn:hover { background: #111111; color: #ffffff; }
.qty-btn:disabled { opacity: 0.3; cursor: default; background: none; color: inherit; }

.qty-value {
    min-width: 30px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14px;
}

.cart-item-total {
    text-align: right;
    font-family: var(--font-display);
    font-size: 22px;
}

.cart-item-total s {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
}

.continue-link {
    display: inline-flex;
    gap: 10px;
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
}

.continue-link:hover { color: #ff5a1f; }

.cart-summary {
    position: sticky;
    top: 20px;
    padding: 28px;
    background: #111111;
    color: #e9e6e1;
}

.summary-title {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    text-transform: uppercase;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.summary-row.total {
    margin: 18px 0 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 230, 225, 0.25);
    font-family: var(--font-display);
    font-size: 28px;
}

.free-ship {
    margin: 6px 0 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(233, 230, 225, 0.75);
}

.free-ship strong { color: #ff5a1f; }

.ship-bar {
    display: block;
    height: 3px;
    margin-top: 8px;
    background: rgba(233, 230, 225, 0.2);
}

.ship-bar-fill {
    height: 100%;
    width: 0;
    background: #ff5a1f;
    transition: width 0.3s ease;
}

.checkout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 54px;
    border: 1px solid #ff5a1f;
    background: #ff5a1f;
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.checkout-btn:hover { background: transparent; color: #ff5a1f; }

.checkout-note {
    min-height: 16px;
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
    color: rgba(233, 230, 225, 0.7);
}

.summary-perks {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(233, 230, 225, 0.25);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(233, 230, 225, 0.75);
}
.header-icons a {
    position: relative;
    display: flex;
    align-items: center;
    color: #111111;
    text-decoration: none;
}

.cart-count {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #111111;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-btn {
    display: none;    
}
@media (max-width: 768px) {

    header {
        flex-wrap: wrap;             
        gap: 12px 20px;
        padding: 12px 16px;
        min-height: auto;
    }

    .logo {
        font-size: 40px;
    }

    .header-icons {
        gap: 18px;
        align-items: center;
    }

    .header-icons svg {
        width: 22px;
        height: 22px;
    }

     .search {
        display: none;
    }

    .navbar {
        order: 3;
        width: 100%;
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    header.menu-open .navbar {
        max-height: 400px;
    }

    .navbar a {
        padding: 16px 0;
        border-top: 1px solid rgba(17, 17, 17, 0.2);
        font-size: 20px;
    }

    .menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        background: none;
        border: none;
        color: #111111;
        cursor: pointer;
    }

    .menu-btn span {
        display: block;
        height: 2px;
        background: currentColor;
        transition: transform 0.3s, opacity 0.3s;
    }

    header.menu-open .menu-btn span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    header.menu-open .menu-btn span:nth-child(2) {
        opacity: 0;
    }

    header.menu-open .menu-btn span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-container {
        flex-direction: column;
        align-items: center;
text-align: center;
        min-height: auto;
        padding: 40px 20px 60px;
        background:
        linear-gradient(rgba(255, 90, 31, 0.85), rgba(255, 90, 31, 0.85)),
        url(images/hero-background.png) center / cover no-repeat;   /* ← add this */
}
.third-left{
    display:none;
}
    .eyebrow {
        font-size: 16px;
        margin-bottom: 20px;
    }

    h1 {
        font-size: 80px;
        margin-bottom: 40px;
    }

    .description {
        font-size: 18px;
    }

    .hero-btn {
        display: inline-block;
        padding: 18px 44px;
        font-size: 16px;
    }

     .hero-shoe {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 40px 0 20px;
        transform: rotate(var(--tilt));
        animation: float-phone 4s ease-in-out infinite;
    }

    .second-text-hero h2 {
        font-size: 48px;
    }

    .product-description {
        font-size: 18px;
    }

    .price {
        font-size: 50px;
    }

    .thumbs button {
        width: 64px;
        height: 64px;
    }
.second-hero {
        grid-template-columns: 1fr;   
        min-height: auto;
    }

    .left-hero,
    .right-hero {
        min-height: 380px;
        padding: 40px 20px;
    }
.right-hero .box-description {
    max-width: 180px;
}

    .second-hero h3 {
        font-size: 64px;
    }

    .box-description {
        font-size: 16px;
    }

    .box-btn {
        width: 64px;
        height: 64px;
        font-size: 32px;
    }

      .third-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        min-height: auto;
        padding: 60px 20px;
    }

    .cat-list {
        gap: 18px;
    }

    .cat-title {
        font-size: 44px;
    }

    .cat.active .cat-title {
        font-size: 60px;
    }

    .third-right h4 {
        font-size: 52px;
    }

    .third-description {
        font-size: 16px;
    }

    .explore-btn {
        padding: 16px 36px;
        font-size: 16px;
    }

    .bg-thumbs {
        margin-top: 30px;
    }

    .bg-thumb {
        width: 80px;
    }

    .featured-hero {
        min-height: auto;
        padding: 0 20px 60px;
    }

    .featured-hero .top {
        padding-top: 50px;
        align-items: center;
    }

    .featured-hero .eyebrow {
        font-size: 14px;
    }

    .featured-btn {
        font-size: 15px;
    }

    .featured-hero h4 {
        font-size: 60px;
    }

    .product-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 cards per row */
        gap: 12px;
    }

    .product-card .badge {
        top: 10px;
        left: 10px;
        font-size: 12px;
    }

    .product-card .product-name {
        font-size: 15px;
        padding-left: 12px;
    }

    .product-footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 12px 12px;
    }

    .product-card .price {
        font-size: 22px;
    }

    .swatches {
        gap: 6px;
    }

    .swatch {
        width: 20px;
        height: 20px;
    }

    .fourth-hero {
        min-height: auto;
        padding: 60px 20px 140px;     
         background-image:
        linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
        url(images/fourth-hero.png);
        background-position: 40% center;
    }

    .fourth-text {
        width: 100%;
    }
.fourth-text .description {
        color: #e9e6e1 !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    .fourth-text h6 {
        font-size: 60px;
    }

    .about-btn {
        display: inline-block;
        margin-left: 0;
        margin-top: 30px;
    }

    .site-footer {
        padding: 50px 20px 24px;
    }

    .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px 16px;
    }

    .footer-brand,
    .footer-news {
        grid-column: 1 / -1;          
    }

    .footer-logo {
        font-size: 64px;
    }

    .copyright {
        margin-top: 30px;
        text-align: left;
    }
     .shop-hero {
        min-height: auto;
        padding: 50px 20px;
        background-image:
            linear-gradient(rgba(255, 90, 31, 0.85), rgba(255, 90, 31, 0.85)),
            url(images/shipping.png);
    }

    .shop-title {
        font-size: 72px;
    }
      .about-text {
        padding: 140px 20px 60px;
    }

    .about-text h1 {
        font-size: 72px;
    }

    .about-text .description {
        font-size: 20px;
        color: #e9e6e1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }

    .about-page .menu-btn,
    .contact-page .menu-btn {
        color: #e9e6e1;
    }
     .second-about {
        flex-direction: column;
        gap: 40px;
        min-height: auto;
        padding: 60px 20px;
    }

    .second-about-left {
        padding: 0;
    }

    .text-arrow {
        flex-wrap: wrap;
        gap: 10px 20px;
    }

    .text-arrow h2 {
        font-size: 48px;
    }

    .text-arrow i {
        margin-top: 14px;
        font-size: 24px;
    }

    .second-about-left .description {
        font-size: 18px;
    }

    .collage {
        max-width: 100%;
        margin-right: 0;
    }
    .third-about {
        min-height: auto;
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url(images/about-background.png);
    }

    .third-about-text {
        width: 100%;
        padding: 80px 20px 60px;
    }

    .third-about-text h3 {
        font-size: 64px;
        line-height: 1;
    }

    .third-about-text .description {
        margin-top: 24px;
        font-size: 18px;
        color: #e9e6e1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    }
     .fourth-about {
        padding: 0 20px 140px;    
    }

    .fourth-about .eyebrow {
        margin-top: 50px;
        margin-bottom: 10px;
    }

    .fourth-about-boxes {
        grid-template-columns: 1fr;
    }

    .fourth-about-box,
    .fourth-about-box:first-child {
        padding: 24px 0;
        border-left: none;
        border-top: 1px solid #111111;
    }

    .fourth-about-box:first-child {
        border-top: none;
    }

    .fourth-about-box-left {
        margin-right: 0;
    }

    .fourth-about-box-left i {
        font-size: 32px;
    }
      .about-page header.menu-open {
        background: #111111;
    }

    .about-page .navbar a,
    .contact-page .navbar a {
        border-top-color: rgba(233, 230, 225, 0.2);
    }
     .contact-hero {
        min-height: auto;
   
    
    }

    .contact-hero-text {
        width: auto;
        padding: 60px 20px;
    }

    .contact-hero-text h1 {
        font-size: 74px;
        margin-bottom: 30px;
         background: rgba(233, 230, 225, 0.9); 
    }

    .contact-hero-text .description {
        font-size: 20px;
        font-weight: 600;
        padding: 14px 16px;
        background: rgba(233, 230, 225, 0.9); 
        text-shadow: none; 
    }
     .contact-second {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
    }

    .contact-second-left,
    .contact-second-right {
        padding: 40px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .social-box h2 {
        font-size: 56px;
    }

    .social-note {
        position: static;
        display: inline-block;
        margin-top: 30px;
        font-size: 24px;
    }

    .contact-second-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .third-contact {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 50px 20px 140px;
    }

    .third-contact-left {
        width: auto;
        padding: 0;
    }

    .third-contact-left h3 {
        font-size: 48px;
    }

    .third-contact-right {
        padding: 0;
    }

    .faq-question {
        font-size: 18px;
    }

    .faq-answer p {
        margin-right: 0;
        font-size: 16px;
    }
     .wish-page {
        padding: 24px 20px 140px;
    }

    .wish-title {
        font-size: 60px;
    }

    .wish-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));   
        gap: 12px;
    }

    .wish-card-row {
        flex-wrap: wrap;            
        gap: 6px;
    }

    .cart-page {
        padding: 24px 20px 140px;
    }

    .cart-title {
        font-size: 56px;
    }

    .cart-layout {
        grid-template-columns: minmax(0, 1fr);   
        gap: 24px;
    }

    .cart-layout > section {
        padding: 16px;
    }

    .cart-head {
        display: none;            
    }

    .cart-item {
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 8px 14px;
    }

    .cart-item-img {
        grid-row: span 3;
    }

    .qty {
        justify-content: flex-start;
    }

    .cart-item-total {
        text-align: left;
    }

    .cart-summary {
        position: static;
    }
     .acc-page {
        padding: 20px 20px 140px;
    }

    .acc-title {
        font-size: 56px;
        margin: 14px 0 24px;
    }

    .acc-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .acc-box {
        padding: 20px;
    }

    .acc-tab {
        font-size: 15px;
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes float-phone {
    0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
    50%      { transform: translateY(-12px) rotate(calc(var(--tilt) + 2deg)); }
}