/* ==========================================================================
   DESIGN FOUNDATIONS & TOKEN VARIABLES
   ========================================================================== */


html {
  scroll-behavior: smooth !important;
  background-color: var(--bg-deep);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
}

body {
  background-color: var(--bg-deep);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* Explicit Section Heading Colors */
.product-category,
.timeline-section h1,
.gradient-custom h1,
.sponsors-section h2,
.newsletter-container h1 {
  color: #1A1A1A !important;
}

/* ==========================================================================
   EDITORIAL HERO (LIGHT THEME LUXURY FASHION)
   ========================================================================== */
.editorial-hero {
  height: calc(100vh - 90px) !important;
  margin-top: 90px !important; /* Offsets the 90px fixed navbar */
  background-color: var(--bg-deep) !important;
  position: relative;
  overflow: hidden !important; /* Fits precisely inside the viewport fold */
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
body.unverified .editorial-hero {
  height: calc(100vh - 138px) !important; /* Offsets 90px navbar + 48px strip */
  margin-top: 0px !important; /* Prevent double push since body padding-top is already 138px */
}
.editorial-left {
  padding: 30px 8% !important;
  padding-left: max(8%, 60px) !important;
}

.editorial-text-wrapper {
  max-width: 750px;
}

/* Giant Fashion Bold Title */
.editorial-main-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 5.5rem !important; /* Increased from 4.5rem to 5.5rem as requested */
  line-height: 0.95 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-primary) !important;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.editorial-main-title .capsule-pill {
  font-size: 1.15rem !important; /* Scaled up to balance with larger 5.5rem heading */
  padding: 8px 24px !important;
  border: 2.5px solid var(--text-primary) !important;
}

/* Outlined Word Styling */
.outlined-word {
  color: transparent !important;
  -webkit-text-stroke: 2px var(--text-primary);
  font-weight: 700;
}

/* Capsule Pill Badge Row */
.capsule-badge-row {
  margin-bottom: 25px;
}

.capsule-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #BCEFE9 !important; /* Light Sporty Teal */
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: 800;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  padding: 6px 20px;
  border-radius: 999px !important;
  border: 2px solid var(--text-primary) !important;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
}

/* Narrative Copy */
.editorial-desc {
  font-size: 1.05rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin-bottom: 30px;
  max-width: 680px; /* Increased to fill space and align with wider heading wrapper */
}

/* Sticker Arrow Button */
.editorial-action-row {
  display: flex;
  align-items: center;
}

.sticker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--secondary-accent) !important; /* Burn Orange */
  color: #FFFFFF !important; /* White arrow */
  border-radius: 50%;
  text-decoration: none !important;
  border: 2px solid var(--text-primary) !important;
  box-shadow: 2px 2px 0px var(--text-primary);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  vertical-align: middle;
}

.sticker-btn:hover {
  transform: scale(1.1) rotate(15deg);
  background-color: var(--primary-accent) !important; /* Solar Yellow hover */
  color: var(--text-primary) !important;
  box-shadow: 3px 3px 0px var(--text-primary);
}

.sticker-btn .arrow-icon {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

/* Right Column Photographic Showcase */
.editorial-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 5% !important;
}

.editorial-image-frame {
  position: relative;
  max-width: 360px;
  max-height: 460px;
  width: 100%;
  border-radius: 0px; /* Streetwear lookbooks love sharp angles */
  border: 3px solid var(--text-primary) !important;
  box-shadow: 8px 8px 0px #1A1A1A !important; /* Flat offset shadow */
  overflow: visible; /* To let overlapping badges overflow */
  background: var(--primary-accent); /* Bright Solar Yellow block fallback behind image */
}

.editorial-main-image {
  width: 100%;
  max-height: 454px;
  display: block;
  object-fit: cover;
  transition: transform 0.5s var(--transition-smooth);
}

.editorial-image-frame:hover .editorial-main-image {
  transform: scale(1.02);
}

/* Summer Sale Circle Sticker Overlay */
.summer-sale-sticker {
  position: absolute;
  top: 25%;
  left: -45px; /* Overlap the left edge as in reference design */
  width: 110px;
  height: 110px;
  background-color: #1F1E23 !important; /* Dark streetwear black circle */
  color: #FFFFFF !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-accent) !important; /* Bold Burn Orange border */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
  z-index: 10;
  transform: rotate(-10deg);
  transition: transform 0.4s var(--transition-smooth);
}

.editorial-image-frame:hover .summer-sale-sticker {
  transform: scale(1.1) rotate(10deg);
}

.sticker-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.sticker-tag {
  font-family: var(--font-body) !important; /* Roboto standard-width for small tags */
  font-size: 0.58rem !important; /* Slightly smaller for perfect fit */
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #FFFFFF !important; /* Standardized to crisp white */
  text-transform: uppercase;
}

.sticker-discount {
  font-family: var(--font-heading) !important; /* Bold Unbounded */
  font-weight: 900;
  font-size: 1.5rem !important;
  line-height: 1;
  color: var(--primary-accent) !important; /* Vivid Burn Orange #FE672E */
}

/* Responsive Editorial Rules */
@media screen and (max-width: 991px) {
  .editorial-hero {
    height: auto !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    min-height: calc(100vh - 90px) !important;
  }
  body.unverified .editorial-hero {
    min-height: calc(100vh - 138px) !important;
  }
  .editorial-main-title {
    font-size: 4.2rem !important; /* Scaled up tablet view to match desktop enlargement */
  }
  .editorial-main-title .capsule-pill {
    font-size: 0.95rem !important; /* Scale back down pill on tablet screens */
    padding: 6px 18px !important;
    border: 2px solid var(--text-primary) !important;
  }
  .editorial-left {
    padding: 60px 4% !important;
  }
  .editorial-image-frame {
    margin-top: 40px;
    box-shadow: 8px 8px 0px #1A1A1A !important;
  }
  .summer-sale-sticker {
    top: -20px;
    right: -20px;
    width: 95px;
    height: 95px;
  }
  .sticker-discount {
    font-size: 1rem;
  }
}

/* Premium Neobrutalist Hero Action Buttons */
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px !important;
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: 3px solid var(--text-primary) !important;
  border-radius: 0px !important; /* Sharp corners */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer;
}

.cta-signup {
  background-color: var(--primary-accent) !important; /* Bright Solar Yellow/Teal */
  color: var(--text-primary) !important;
  box-shadow: 4px 4px 0px var(--text-primary) !important;
}

.cta-signup:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0px var(--text-primary) !important;
  background-color: var(--secondary-accent) !important; /* Purple */
  color: #FFFFFF !important;
}

.cta-login {
  background-color: #FFFFFF !important;
  color: var(--text-primary) !important;
  box-shadow: 4px 4px 0px var(--text-primary) !important;
}

.cta-login:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0px var(--text-primary) !important;
  background-color: var(--text-primary) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   PRODUCTS SECTION
   ========================================================================== */
.product {
  background-color: var(--bg-deep) !important;
  position: relative;
}

.product::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: var(--primary-accent);
  filter: blur(150px);
  opacity: 0.1;
  top: 10%;
  left: 0;
}

.product-category {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.product-container {
  background-color: transparent !important;
}

.product-container .row {
  row-gap: 40px !important; /* Perfect spacious editorial card row gap */
}

/* Streetwear Flat Geometric Product Card */
.product-card {
  background: #FFFFFF !important;
  border: 2px solid var(--text-primary) !important;
  border-radius: 0px !important; /* Sharp corners */
  padding: 20px !important;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 8px 8px 0px var(--text-primary) !important; /* Flat streetwear drop shadow */
}

.product-card::before {
  display: none; /* Remove legacy gradient blurs */
}

.product-card:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 12px 12px 0px var(--text-primary) !important;
}

.badge-best-selling {
  background: var(--secondary-accent) !important; /* Urgency Burn Orange */
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 4px 12px;
  border-radius: 0px !important;
  border: 2px solid var(--text-primary) !important;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  box-shadow: 3px 3px 0px var(--text-primary);
  text-transform: uppercase;
}

.product-image {
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: var(--bg-deep) !important;
  border-radius: 0px !important;
  border: 2px solid var(--text-primary);
  overflow: hidden;
}

.product-thumb {
  max-height: 85% !important;
  max-width: 85% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  transition: var(--transition-smooth);
}

.product-card:hover .product-thumb {
  transform: scale(1.06) rotate(1deg);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.product-brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 0;
  letter-spacing: 0.02em;
}

.product-short-description {
  font-size: 15px !important;
  color: var(--text-secondary);
  line-height: 1.65 !important;
  margin-bottom: 0;
  flex-grow: 1;
}

.card-rating-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: var(--transition-smooth);
  width: max-content;
}

.card-rating-trigger:hover {
  transform: scale(1.05);
}

.price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.8rem;
  color: #1A1A1A !important; /* Pitch Black */
  margin: 0;
  line-height: 1;
}

.card-btn {
  width: 100%;
  background: var(--primary-accent) !important; /* Solar Yellow CTA */
  border: 2px solid var(--text-primary) !important;
  color: #1A1A1A !important; /* Pitch Black */
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 12px;
  border-radius: 50px !important; /* Pill style */
  transition: var(--transition-smooth);
  box-shadow: 4px 4px 0px var(--text-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  display: block;
  text-align: center;
}

.card-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0px var(--text-primary) !important;
  background-color: var(--secondary-accent) !important; /* Urgency Orange on hover */
  color: white !important;
  text-decoration: none !important;
}

/* ==========================================================================
   TIMELINE SECTION ("Why Choose Us")
   ========================================================================== */
.timeline-section {
  background-color: var(--bg-surface) !important;
  position: relative;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding: 80px 0;
}

.main-timeline {
  position: relative;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px 0;
}

.main-timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: var(--border-light) !important;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.timeline {
  position: relative;
  width: 50%;
  padding: 10px 40px;
  box-sizing: border-box;
  margin-bottom: 0;
}

.timeline.left {
  left: 0;
  text-align: right;
}

.timeline.right {
  left: 50%;
  text-align: left;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -8px;
  background-color: var(--bg-deep) !important;
  border: 3px solid var(--primary-accent) !important;
  border-radius: 50%;
  top: 30px;
  z-index: 10;
  transition: var(--transition-smooth);
}

.timeline.right::after {
  left: -8px;
  right: auto;
}

.timeline:hover::after {
  background-color: var(--secondary-accent) !important;
  border-color: var(--secondary-accent) !important;
  box-shadow: 0 0 10px var(--secondary-accent);
  transform: scale(1.3);
}

.timeline .card {
  background: var(--secondary-accent) !important; /* Burn Orange contrast background */
  border: 2px solid #1A1A1A !important; /* Solid 2px #1A1A1A border */
  border-radius: 0px !important; /* Sharp corners */
  transition: var(--transition-smooth);
  box-shadow: 4px 4px 0px #1A1A1A !important; /* Flat offset box-shadow */
  display: inline-block;
  width: 100%;
  text-align: left !important; /* Standardize text-align to left */
}

.timeline .card-body {
  background-color: transparent !important; /* Bypasses global card-body background override */
}

.timeline:hover .card {
  border-color: #1A1A1A !important;
  box-shadow: 8px 8px 0px #1A1A1A !important;
  transform: translateY(-4px);
}

.timeline .card-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: #FFFFFF !important; /* Bold high-contrast white over orange */
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.timeline .card-body p {
  font-size: 15px !important;
  color: #FFFFFF !important; /* Clear readable white over orange */
  line-height: 1.65 !important;
}

@media screen and (max-width: 768px) {
  .main-timeline::after {
    left: 31px;
  }
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    text-align: left !important;
  }
  .timeline.right {
    left: 0;
  }
  .timeline::after {
    left: 23px;
    right: auto;
  }
  .timeline.right::after {
    left: 23px;
  }
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.gradient-custom {
  background: var(--bg-deep) !important; /* Flat background, remove radial blurs */
}

.gradient-custom .card {
  background: #FFFFFF !important;
  border: 2px solid var(--text-primary) !important;
  border-radius: 0px !important;
  padding: 40px 20px;
  box-shadow: 8px 8px 0px var(--text-primary) !important;
}

.gradient-custom img.rounded-circle {
  border: 3px solid var(--text-primary) !important;
  padding: 0px;
  box-shadow: 4px 4px 0px var(--text-primary);
}

.gradient-custom h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.gradient-custom p {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.carousel-indicators button {
  background-color: var(--text-secondary) !important;
  opacity: 0.3 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  margin: 0 6px !important;
  transition: var(--transition-smooth) !important;
}

.carousel-indicators button.active {
  background-color: var(--text-primary) !important;
  opacity: 1 !important;
  transform: scale(1.3);
}

/* ==========================================================================
   SPONSORS SECTION
   ========================================================================== */
.sponsors-section {
  background-color: var(--bg-deep) !important;
  border-top: 1px solid var(--border-light);
}

.sponsors-grid-container {
  background: #FFFFFF !important;
  border: 2px solid var(--text-primary) !important;
  border-radius: 0px !important; /* Sharp streetwear corners */
  box-shadow: 6px 6px 0px var(--text-primary) !important; /* Bold flat offset shadow */
  padding: 50px 30px !important;
  margin-top: 30px;
  transition: var(--transition-smooth);
}

.sponsors-grid-container:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0px var(--text-primary) !important;
}

.sponsors-section svg {
  color: var(--text-primary) !important;
  opacity: 0.45;
  transition: var(--transition-smooth);
}

.sponsors-section svg:hover {
  opacity: 0.95;
  transform: scale(1.08);
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */
.newsletter-container {
  background: var(--bg-surface) !important; /* Elegant Lookbook surface block */
  border-top: 2px solid var(--text-primary) !important;
  border-bottom: 2px solid var(--text-primary) !important;
  padding: 80px 40px !important;
}

.newsletter-container h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;
  text-transform: uppercase;
}

.newsletter-container .form-control {
  background-color: #FFFFFF !important;
  border: 2px solid var(--text-primary) !important;
  color: var(--text-primary) !important;
  border-radius: 0px !important; /* Sharp angles */
  padding: 16px 20px;
  font-size: 1rem;
}

.newsletter-container .form-control:focus {
  border-color: var(--primary-accent) !important;
  box-shadow: var(--shadow-glow) !important;
}

.newsletter-container .btn-dark {
  background: var(--primary-accent) !important; /* Solar Yellow CTA */
  border: 2px solid var(--text-primary) !important;
  border-left: none !important;
  color: var(--text-primary) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 0px !important;
  padding: 0 35px;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--transition-smooth);
}

.newsletter-container .btn-dark:hover {
  background: var(--secondary-accent) !important;
  color: white !important;
  transform: none;
}

.newsletter-image {
  filter: drop-shadow(4px 4px 0px var(--text-primary));
  animation: floatSlow 5s ease-in-out infinite;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================================
   SCROLLBAR & FOOTER STYLING
   ========================================================================== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: hsla(215, 20%, 40%, 0.4);
  border-radius: 10px;
  border: 2px solid var(--bg-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(215, 20%, 50%, 0.6);
}

/* Footer layout tokens */
footer .main-footer {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-light);
  padding: 80px 0 60px 0 !important;
}

footer .widget-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-primary) !important;
  margin-bottom: 25px;
}

footer p, footer li a {
  color: var(--text-secondary) !important;
  font-size: 0.95rem;
  line-height: 1.7;
}

footer li a {
  transition: var(--transition-smooth);
}

footer li a:hover {
  color: var(--primary-accent) !important;
  padding-left: 5px;
}

.footer-copyright {
  background: var(--bg-deep) !important;
  border-top: 1px solid var(--border-light);
  padding: 24px 0 !important;
}

.footer-copyright p {
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
}

/* ==========================================================================
   HOME PAGE — COMPREHENSIVE RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet — max 991px */
@media (max-width: 991px) {
  .editorial-hero {
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 90px) !important;
    padding: 40px 0 60px 0 !important;
    margin-top: 90px !important;
  }

  .editorial-left {
    padding: 30px 5% !important;
    text-align: center !important;
  }

  .editorial-text-wrapper {
    max-width: 100% !important;
  }

  .editorial-main-title {
    font-size: 3.5rem !important;
  }

  .editorial-action-row {
    justify-content: center !important;
  }

  .editorial-right {
    padding: 20px 5% !important;
  }

  .editorial-image-frame {
    max-width: 320px !important;
    margin: 0 auto;
  }

  .summer-sale-sticker {
    width: 90px !important;
    height: 90px !important;
    left: -20px !important;
  }

  .newsletter-container {
    padding: 60px 20px !important;
    text-align: center !important;
  }

  .newsletter-container h1 {
    font-size: 2.2rem !important;
  }

  .sponsors-grid-container {
    padding: 35px 20px !important;
  }

  .product-category {
    font-size: 2rem !important;
  }

  footer .main-footer {
    padding: 60px 0 40px 0 !important;
  }
}

/* Tablet — max 768px */
@media (max-width: 768px) {
  .editorial-main-title {
    font-size: 2.8rem !important;
  }

  .editorial-desc {
    font-size: 0.95rem !important;
  }

  .hero-cta-btn {
    padding: 12px 22px !important;
    font-size: 0.85rem !important;
  }

  .product-card {
    box-shadow: 5px 5px 0px var(--text-primary) !important;
  }

  .product-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 7px 7px 0px var(--text-primary) !important;
  }

  .timeline-section {
    padding: 60px 0;
  }

  .timeline .card-body h3 {
    font-size: 1.2rem;
  }

  .gradient-custom .card {
    padding: 25px 15px;
  }

  .newsletter-container h1 {
    font-size: 1.8rem !important;
  }

  .newsletter-image {
    width: 60px;
    height: auto;
  }

  footer .main-footer {
    padding: 50px 0 30px 0 !important;
  }

  footer .widget-title {
    font-size: 1.1rem;
  }
}

/* Mobile — max 576px */
@media (max-width: 576px) {
  .editorial-hero {
    margin-top: 80px !important;
    min-height: auto !important;
    padding: 30px 0 50px 0 !important;
  }

  .editorial-left {
    padding: 20px 4% !important;
  }

  .editorial-main-title {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
  }

  .editorial-main-title .capsule-pill {
    font-size: 0.78rem !important;
    padding: 5px 14px !important;
  }

  .editorial-desc {
    font-size: 0.9rem !important;
  }

  .hero-cta-btn {
    padding: 10px 18px !important;
    font-size: 0.78rem !important;
  }

  .sticker-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .editorial-image-frame {
    max-width: 260px !important;
  }

  .summer-sale-sticker {
    width: 75px !important;
    height: 75px !important;
    left: -15px !important;
  }

  .sticker-discount {
    font-size: 1.1rem !important;
  }

  .product-category {
    font-size: 1.6rem !important;
  }

  .product-image {
    height: 180px !important;
  }

  .product-brand {
    font-size: 1.2rem !important;
  }

  .price {
    font-size: 1.4rem !important;
  }

  .card-btn {
    font-size: 0.9rem !important;
    padding: 10px !important;
  }

  .main-timeline::after {
    left: 20px;
  }

  .newsletter-container {
    padding: 40px 15px !important;
  }

  .newsletter-container h1 {
    font-size: 1.5rem !important;
  }

  .newsletter-container .btn-dark {
    padding: 0 20px !important;
    font-size: 0.9rem;
  }

  .sponsors-grid-container {
    padding: 25px 15px !important;
  }

  footer .main-footer {
    padding: 40px 0 20px 0 !important;
  }
}

/* Small Mobile — max 400px */
@media (max-width: 400px) {
  .editorial-main-title {
    font-size: 1.8rem !important;
  }

  .editorial-image-frame {
    max-width: 220px !important;
  }

  .hero-cta-btn {
    padding: 9px 14px !important;
    font-size: 0.72rem !important;
  }

  .product-image {
    height: 160px !important;
  }
}

/* Large Desktop — min 1400px */
@media (min-width: 1400px) {
  .editorial-left {
    padding: 30px 10% !important;
    padding-left: max(10%, 80px) !important;
  }

  .editorial-image-frame {
    max-width: 420px !important;
    max-height: 540px !important;
  }

  .editorial-main-image {
    max-height: 534px !important;
  }
}