/* Pull&Bear-inspired professional stylesheet
   Created for a clothing brand website. Use as base CSS.
   Notes: import fonts in your HTML head, e.g.
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet"> */

:root{
  --bg:#ffffff;
  --text:#111214;
  --muted:#6b6f73;
  --accent:#FF6100; /* Pull&Bear accent */
  --card:#f7f7f8;
  --glass: rgba(255,255,255,0.6);
  --radius:14px;
  --container:1200px;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/*.container{max-width:var(--container);margin:0 auto;padding:0 20px}*/

/* Header / Nav */
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{font-family:'Montserrat', 'Avant Garde', sans-serif;font-weight:700;letter-spacing:2px;font-size:20px;text-transform:uppercase}
.brand__tag{font-size:12px;color:var(--muted)}

.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px}

.icon-btn{background:none;border:0;padding:8px;border-radius:10px;cursor:pointer}
.icon-btn:hover{background:var(--card)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 460px;gap:32px;align-items:center;padding:56px 0}
.hero__left{max-width:1200px}
.hero__eyebrow{font-weight:600;text-transform:uppercase;font-size:22px;color:#f7f7f8;letter-spacing:1.5px}
.hero__title{color: #eceff5; font-family:'Montserrat', sans-serif;font-size:96px;margin:18px 0 12px;line-height:1.02}
.hero__sub{color:#edeff3;font-size:39px;margin-bottom:38px}
.hero__cta{display:inline-block;padding:14px 22px;border-radius:12px;background:var(--text);color:var(--bg);text-decoration:none;font-weight:700}

.hero__right{border-radius:18px;overflow:hidden;background:linear-gradient(180deg, #fff, #f6f6f6);box-shadow:0 10px 30px rgba(16,16,16,0.06);display:flex;align-items:center;justify-content:center;padding:20px}
.hero__image{width:100%;height:420px;object-fit:cover}

/* Collections / Filters */
.controls{display:flex;align-items:center;gap:12px;padding:18px 0}
.filter{background:var(--card);padding:10px 14px;border-radius:10px;border:1px solid rgba(16,16,16,0.03)}

/* Product grid */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:28px 0}
.card{background:var(--bg);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(16,16,16,0.04);transition:transform .22s ease,box-shadow .22s ease;border:1px solid rgba(16,16,16,0.03)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(16,16,16,0.08)}
.card__media{width:100%;height:320px;object-fit:cover;display:block}
.card__body{padding:14px}
.card__title{font-weight:600;margin:6px 0}
.card__price{color:var(--muted);font-weight:600}

.badge{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;padding:8px 10px;border-radius:10px;font-weight:700;font-size:12px}

/* Quick add / hover actions */
.card__overlay{position:relative}
.card__actions{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;opacity:0;transform:translateY(8px);transition:all .18s ease}
.card:hover .card__actions{opacity:1;transform:translateY(0)}
.action{background:rgba(0,0,0,0.06);border:0;padding:10px;border-radius:10px;cursor:pointer}

/* Typography helpers */
.lead{font-size:18px;color:var(--muted)}
.h6{font-weight:700;font-size:13px}

/* Footer */
.footer{border-top:1px solid rgba(16,16,16,0.04);padding:36px 0;margin-top:36px;color:var(--muted);font-size:14px}
.footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* Buttons */
.btn{display:inline-block;padding:12px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn--primary{background:var(--text);color:var(--bg)}
.btn--ghost{background:transparent;border:1px solid rgba(16,16,16,0.06)}

/* Utility */
.row{display:flex;gap:12px;align-items:center}
.center{display:flex;align-items:center;justify-content:center}

/* Responsive */
@media (max-width:1100px){
  .products{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:1fr 360px}
}
@media (max-width:820px){
  .products{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero__right{order:-1}
  .hero__image{height:300px}
}
@media (max-width:480px){
  .products{grid-template-columns:1fr}
  .brand__logo{font-size:18px}
  .hero__title{font-size:32px}
}

.hero.container {
  position: relative;
  width: 100%;
  height: 100vh;       /* full screen height */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  color: white;         /* make text visible over video */
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;          /* behind content */
  transform: translate(-50%, -50%);
  object-fit: cover;    /* cover entire container */
}

.hero__left {
  position: relative;
  z-index: 1;           /* above video */
  max-width: 1000px;
  padding: 20px;
}

.hero__cta {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: rgba(0,0,0,0.6); /* semi-transparent button */
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 5px;
}

.hero__cta:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Accessibility touches */
:focus{outline:3px solid rgba(255,97,0,0.12);outline-offset:3px}

/* Model Zoom Effect */
.zoomed {
  transform: scale(1.5);
  transition: transform 0.3s ease;
}

/* Modal Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes zoomIn {
  from { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

@keyframes zoomOut {
  from { 
    transform: scale(1); 
    opacity: 1; 
  }
  to { 
    transform: scale(0.8); 
    opacity: 0; 
  }
}

/* End of stylesheet */