/* CSS Variables based on Figma design tokens */
:root {
  /* Colors */
  --color-grey-5: #0d0d0d;
  --color-grey-94: #faebe3;
  --color-grey-98: #fffdf5;
  --color-grey-99: #fffefa;
  --color-cream-200: #efe9e1;
  --color-cream-500: #b3a696;
  --color-cream-mocha: #a47764;
  --color-dove-gray: #666666;
  --color-grey-5-40: rgba(13, 13, 13, 0.4);

  /* Typography */
  --font-family: 'Outfit', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Font Sizes */
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-48: 48px;
  --font-size-68: 68px;
  --font-size-70: 70px;
  --font-size-72: 72px;
  --font-size-80: 80px;
  --font-size-120: 120px;

  /* Line Heights */
  --line-height-29: 29.48px;
  --line-height-36: 36.4px;
  --line-height-42: 42.24px;
  --line-height-44: 44.2px;
  --line-height-48: 48px;
  --line-height-64: 64px;
  --line-height-72: 72px;
  --line-height-81: 81.6px;
  --line-height-120: 120px;
  --line-height-130: 130px;

  /* Spacing */
  --spacing-140: 140px;
  --spacing-169: 169.5px;
  --spacing-31: 31.7px;

  /* Breakpoints */
  --breakpoint-1440: 1440px;
  --breakpoint-1920: 1920px;

  /* iOS Viewport Fix */
  --vh: 1vh;
  --actual-vh: 1vh;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

/* Page Header */
.page-header {
  padding: 120px var(--spacing-140) 80px;
  background-color: var(--color-cream-200);
  text-align: center;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 13, 13, 0.4);
  z-index: 1;
}

.page-header-container {
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-header h1 {
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  color: var(--color-grey-98);
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(13, 13, 13, 0.5);
}

.page-header p {
  font-size: var(--font-size-28);
  color: var(--color-grey-98);
  line-height: var(--line-height-29);
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(13, 13, 13, 0.5);
}

/* Active nav link */
.nav-link.active {
  opacity: 0.7;
  font-weight: var(--font-weight-regular);
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  color: var(--color-grey-5);
  background-color: var(--color-cream-200);
  line-height: var(--line-height-29);
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-light);
  line-height: 1.2;
}

/* Ensure strong tags are bold across all browsers */
strong {
  font-weight: bold !important;
}

/* Sustainability section list styling - smaller font size */
.sustainability-section ul li {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
}

/* Navigation */
.navbar {
  padding: 0 var(--spacing-140) 0;
  position: sticky;
  top: 0;
  background-color: var(--color-cream-200);
  z-index: 100;
}

.nav-content {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  height: 120px;
}

.logo {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure anchor wrapper doesn't break logo sizing */
.logo a {
  display: block;
  height: 100%;
}

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

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: transparent;
  color: var(--color-grey-5);
  border-radius: 12px;
  padding: 8px;
}

/* Scrim for mobile menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 13, 13, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 998; /* below .navigation (999) */
}
.nav-overlay.active { opacity: 1; pointer-events: auto; }

.navigation {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.5vw, 60px);
  flex-wrap: nowrap;
}

.nav-link {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-light);
  transition: opacity 0.3s ease;
  white-space: nowrap; /* prevent two-line labels on Windows/Android */
  word-break: keep-all;
  hyphens: none;
}

.nav-link:hover {
  opacity: 0.7;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border: 1px solid var(--color-grey-5);
  border-radius: 74px;
  font-size: var(--font-size-18);
  transition: all 0.3s ease;
  white-space: nowrap; /* keep button label on one line */
}

.nav-btn:hover {
  background-color: var(--color-grey-5);
  color: var(--color-grey-99);
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-radius: 74px;
  font-size: var(--font-size-18);
}

/* Language Switcher Styles */
.nav-lang {
  margin-left: 16px;
  position: relative;
  display: flex;
  align-items: center;
}

#lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  padding: 6px 12px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap; /* avoid wrapping of language label */
}

#lang-toggle:hover {
  opacity: 0.7;
}

#lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  min-width: 180px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 2000; /* above nav + overlay on mobile */
  /* keep menu visible within viewport on mobile */
  max-height: min(260px, calc(var(--vh, 1vh) * 50));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#lang-menu.show {
  display: block;
}

/* Dropup variant for tight space near iOS bottom toolbar */
#lang-menu.dropup {
  top: auto;
  bottom: calc(100% + 8px);
}

.lang-choice {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.lang-choice:hover {
  background: rgba(0, 0, 0, 0.06);
}

.lang-choice[aria-selected="true"] {
  background: rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

/* Hero Section */
.hero {
  padding: 60px var(--spacing-140);
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero-container {
  display: flex;
  gap: 60px;
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  min-height: 650px;
  align-items: center;
  width: 100%;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
  padding-top: 0;
  max-width: 600px;
}

.hero-title {
  font-size: var(--font-size-68);
  font-weight: var(--font-weight-light);
  line-height: 1.1;
  margin-bottom: 0;
}

.title-line {
  display: flex;
  align-items: center;
  gap: 20px;
  height: auto;
  margin-top: 20px;
}

.title-divider {
  width: 120px;
  height: 3px;
  background-color: var(--color-grey-5);
}

.hero-actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.btn-outline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 32px;
  border: 1.5px solid var(--color-grey-5);
  border-radius: 62.5px;
  background: transparent;
  color: var(--color-grey-5);
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 50px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Normalize icon size in About button to prevent height inflation */
.btn-outline svg {
  width: 24px;
  height: 24px;
}

.btn-outline:hover {
  background-color: var(--color-grey-5);
  color: var(--color-grey-99);
  transform: translateY(-1px);
  border-color: var(--color-grey-5);
}

.btn-outline:focus {
  outline: 2px solid var(--color-grey-5);
  outline-offset: 2px;
}

.btn-outline:active {
  transform: translateY(0);
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 32px;
  background-color: var(--color-grey-5);
  color: var(--color-grey-99);
  border: 1.5px solid var(--color-grey-5);
  border-radius: 62.5px;
  font-size: var(--font-size-28);
  font-weight: var(--font-weight-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  min-height: 50px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-primary:hover {
  background-color: #333333;
  border-color: #333333;
  transform: translateY(-1px);
}

.btn-primary:focus {
  outline: 2px solid var(--color-grey-5);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: translateY(0);
}

.hero-image {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  max-width: 55%;
}

.hero-img {
  width: 100%;
  max-width: 650px;
  height: auto;
  aspect-ratio: 784/795;
  object-fit: cover;
  border-radius: 50px;
  border: 10px solid var(--color-cream-500);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* Hero image animation states */
.hero-img.fading {
  opacity: 0;
  transform: scale(0.98);
}

.hero-img.entering {
  opacity: 1;
  transform: scale(1);
}

/* Hero slider styles - removed (unused in Newspaper layout) */



/* Trusted By Section - removed (unused in Newspaper layout) */

/* About Section */
.about-section {
  padding: 70px var(--spacing-140) 0px;
}

.about-container {
  display: flex;
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  align-items: flex-start;
  justify-content: flex-end;
}

.about-title {
  flex: 0 0 500px;
  position: sticky;
  top: 0;
  padding-top: 70px;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-title h2 {
  color: var(--color-grey-5);
  font-family: 'Outfit', sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 300;
  line-height: 48px;
}

/* About menu - removed (unused in Newspaper layout) */

.btn-outline-small {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 33px;
  border: 1px solid var(--color-grey-5);
  border-radius: 60px;
  background: transparent;
  color: var(--color-grey-5);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-light);
  transition: all 0.3s ease;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn-outline-small:hover {
  background-color: var(--color-grey-5);
  color: var(--color-grey-99);
}

.about-content {
  flex: 1;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 93px;
}

/* Tab content - removed (unused in Newspaper layout) */

.large-text {
  font-size: var(--font-size-34);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-44);
  margin-bottom: 20px;
}

/* Stats grid - removed (unused in Newspaper layout) */

/* Image Carousel - removed (unused in Newspaper layout) */

/* Sustainable Development Section */
.sustainable-section {
  padding: 140px var(--spacing-140) var(--spacing-169);
}

.sustainable-container {
  display: flex;
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  align-items: flex-start;
  justify-content: flex-end;
}

.sustainable-title {
  flex: 0 0 520px;
  position: sticky;
  top: 0;
  padding-top: 70px;
  padding-right: 40px;
}

.sustainable-title h2 {
  font-size: 48px;
  font-weight: var(--font-weight-light);
  line-height: 48px;
}

/* Sustainable menu - removed (unused in Newspaper layout) */

/* Button text visibility - removed (unused in Newspaper layout) */

.sustainable-content {
  flex: 1;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 93px;
}

.sustainable-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-grey-5);
  border: none;
}

/* Categories Marquee */

/* Categories Marquee - refined to match newspaper aesthetics */
.categories-marquee {
  /* removed borders for a cleaner newspaper flow */
  border-top: none;
  border-bottom: none;
  padding: 28px 0;
  margin: 8px 0 12px; /* subtle breathing room from Vision/Mission */
  overflow: hidden;
  background: transparent;
}

.marquee-content {
  display: flex;
  gap: 32px;
  animation: scroll-categories 20s linear infinite; /* ticker-like speed */
  font-size: 28px; /* compact, consistent with site scale */
  font-weight: 300;
  line-height: 1.2;
  color: rgba(13, 13, 13, 0.85); /* darker for readability, newspaper ink */
  text-transform: none;
  white-space: nowrap;
  align-items: center;
  letter-spacing: 0.5px;
  font-variant: small-caps; /* stock listings vibe */
  font-family: var(--font-family); /* match site typography */
}

/* Subtle separators between items to echo newspaper section dots */
.marquee-content span {
  position: relative;
}

.marquee-content span:not(:last-child)::after {
  content: '·';
  color: var(--color-cream-mocha);
  opacity: 0.6; /* subtle */
  margin-left: 32px;
  font-size: 0.9em; /* near-text size, unobtrusive */
  vertical-align: middle;
}

/* Pause on hover for user control */
.categories-marquee:hover .marquee-content { animation-play-state: paused; }

@keyframes scroll-categories {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .marquee-content { animation: none; }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .marquee-content {
    font-size: 22px;
    gap: 24px;
  }
  .marquee-content span:not(:last-child)::after { margin-left: 24px; }
}

/* Product Lines - removed (unused in Newspaper layout) */

/* Apparel Subcategories */
.apparel-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.apparel-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.subcategory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.subcategory-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.subcategory-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.subcategory-item:hover .subcategory-image {
  transform: scale(1.05);
}

.subcategory-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-grey-5);
  margin: 0;
  line-height: 1.4;
}

/* Expand icon animation */
.expand-icon {
  transition: transform 0.3s ease;
}

.product-item.expanded .expand-icon {
  transform: rotate(180deg);
}

/* Footwear Subcategories */
.footwear-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.footwear-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Workwear Subcategories */
.workwear-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.workwear-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Accessories Subcategories */
.accessories-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.accessories-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Home Textiles Subcategories */
.hometextile-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.hometextile-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Home Division Subcategories */
.homedivision-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.homedivision-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Pets Subcategories */
.pets-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.pets-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Sport & Sportswear Subcategories */
.sport-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.sport-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Lighting Subcategories */
.lighting-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.lighting-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Appliances Subcategories */
.appliances-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.appliances-subcategories.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

/* Garden Images */
.garden-images {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
  background-color: var(--color-cream-mocha);
  margin: 0;
  padding: 0;
}

.garden-images.expanded {
  max-height: 2000px;
  padding: 40px 0;
}

.garden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.garden-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.garden-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.garden-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.garden-item:hover .garden-image {
  transform: scale(1.05);
}

/* Toys Images - removed (unused in Newspaper layout) */

/* Services Section - removed (unused in Newspaper layout) */

/* Advantages Section - removed (superseded by Newspaper variants) */

/* Footer */
.footer {
  background-color: var(--color-grey-5);
  color: var(--color-grey-98);
  padding: 100px var(--spacing-140) 80px;
}


.footer-container {
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.footer-email {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 164px;
  border: 1px solid var(--color-grey-98);
  border-radius: 160px;
  padding: 40px 1px;
}

.footer-email a {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-48);
  text-align: center;
  transition: opacity 0.3s ease;
}

.footer-email a:hover {
  opacity: 0.8;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left text, centered logo, right address */
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 0 200px;
}

.footer-text h2 {
  font-size: var(--font-size-48);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-48);
}

.footer-address {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 0 24px;
}

.footer-logo {
  width: auto;
  height: 120px;
  object-fit: contain;
}

/* Dedicated center column for the logo on desktop */
.footer-logo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optical alignment: lift logo a bit on desktop so it aligns with address block */
@media (min-width: 1025px) {
  /* Cofnij podbicie logo i lekko opuść blok adresu dla lepszego wyrównania optycznego */
  .footer-logo-center .footer-logo { transform: translateY(0); }
  /* Adres do góry, aby linia środka zgrywała się z logo i hasłem */
  .footer-address .address-text { transform: translateY(-6px); }
  /* Większa typografia adresu, by zbalansować hasło po lewej */
  .footer-address .address-text p {
    font-size: var(--font-size-28);
    line-height: var(--line-height-44);
  }
}

.address-text p {
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-light);
  line-height: 35.2px;
  text-align: left;
  margin: 0;
}

.footer-nav {
  border-top: 1px solid var(--color-grey-94);
  border-bottom: 1px solid var(--color-grey-94);
  padding: 24px 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 31px;
}

.footer-links a {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-29);
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.7;
}

.social-links {
  margin-left: auto;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 10px;
  transition: background-color 0.3s ease;
}

.social-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.social-link img {
  width: 28px;
  height: 28px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-legal {
  display: flex;
  gap: 16px;
}

.footer-legal a {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-29);
  text-decoration: underline;
  transition: opacity 0.3s ease;
}

.footer-legal a:hover {
  opacity: 0.7;
}

.footer-copy p {
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-29);
  text-align: right;
}

/* Responsive Design */
@media (max-width: 1440px) {
  .navbar,
  .hero,
  .about-section,
  .sustainable-section,
  .product-lines,
  .advantages-section,
  .footer,
  .newspaper-footer,
  .page-header {
    padding-left: 40px;
    padding-right: 40px;
  }


  .service-item {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Medium screens - 13" MacBook and similar */
@media (max-width: 1366px) {
  .hero-container {
    gap: 40px;
    min-height: 550px;
  }

  .hero-title {
    font-size: 58px;
  }

  .hero-image {
    max-width: 80%;
  }

  .hero-img {
    max-width: 650px;
    border-radius: 40px;
    border: 8px solid var(--color-cream-500);
  }

  .btn-outline,
  .btn-primary {
    font-size: 24px;
    padding: 7px 28px;
    min-height: 46px;
  }

  .title-divider {
    width: 100px;
  }
}

@media (max-width: 1280px) {
  .hero {
    padding: 40px var(--spacing-140);
  }

  .hero-container {
    gap: 30px;
    min-height: 500px;
  }

  .hero-title {
    font-size: var(--font-size-48);
    line-height: 1.2;
  }

  .hero-content {
    gap: 40px;
  }

  .hero-image {
    max-width: 75%;
  }

  .hero-img {
    max-width: 600px;
    border-radius: 35px;
    border: 6px solid var(--color-cream-500);
  }

  .btn-outline,
  .btn-primary {
    font-size: var(--font-size-22);
    padding: 7px 24px;
    min-height: 42px;
  }

  .btn-outline svg,
  .btn-primary svg {
    width: 24px;
    height: 24px;
  }

  /* Keep desktop nav, just tighten spacing/size to delay hamburger */
  .navigation { gap: clamp(16px, 2.2vw, 40px); }
  .nav-link, .nav-btn { font-size: 18px; padding: 10px 6px; }
  .menu-toggle { display: none; }
}

/* Progressive switch to hamburger a bit later to avoid early collapse
   on 13" laptops while still fixing Android tablets in landscape */
@media (max-width: 1150px) {
  .menu-toggle { display: block; }
  .nav-content { height: 96px; }
  .logo { height: 96px; }
  .logo-img { height: 84px; }
  .navigation {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-cream-200);
    box-shadow: 0 6px 24px rgba(13, 13, 13, 0.12);
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 32px calc(env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.open { transform: translateY(0); }
  .nav-link, .nav-btn { font-size: 20px; padding: 12px 6px; }
}

/* Tablet landscape: force drawer even on wider viewports when device is touch-first
   This prevents the language switcher from hanging outside the navbar background
   and keeps the main content centered while the header spans full width. */
@media (pointer: coarse) and (max-width: 1368px) {
  .menu-toggle { display: block; }
  .nav-content { height: 96px; }
  .logo { height: 96px; }
  .logo-img { height: 84px; }
  .navigation {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-cream-200);
    box-shadow: 0 6px 24px rgba(13, 13, 13, 0.12);
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 32px calc(env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.open { transform: translateY(0); }
  .nav-link, .nav-btn { font-size: 20px; padding: 12px 6px; }
}

@media (max-width: 1024px) {
  /* Early hamburger for tablets/landscape phones */
  .menu-toggle { display: block; }
  .nav-content { height: 96px; }
  .logo { height: 96px; }
  .logo-img { height: 84px; }

  /* Turn top nav into slide-down drawer */
  .navigation {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-cream-200);
    box-shadow: 0 6px 24px rgba(13, 13, 13, 0.12);
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 32px calc(env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    /* Ensure the menu never exceeds viewport height */
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* keep content clear of device bottom safe-area */
  }
  .navigation.open { transform: translateY(0); }
  .nav-link, .nav-btn { font-size: 20px; padding: 12px 6px; }

  .hero-container {
    flex-direction: column;
    gap: 40px;
  }

  .hero-image {
    max-width: 100%;
  }

  .hero-img {
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 784/795;
  }

  .hero-title {
    font-size: 50px;
  }

  .about-container,
  .sustainable-container,
  .advantages-container {
    flex-direction: column;
    gap: 40px;
  }

  .about-title,
  .sustainable-title,
  .advantages-title {
    flex: none;
    position: static;
    max-width: none;
    padding-right: 0;
  }
  
  /* Ensure title containers don't extend beyond viewport on mobile */
  .about-title,
  .sustainable-title {
    width: 100%;
    overflow: hidden;
  }

  /* Removed unused menu styles */
  

  .footer-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0;
  }

  .footer-text h2 {
    font-size: 36px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .nav-content { height: 80px; }
  .logo { height: 80px; }
  .logo-img { height: 68px; }
  .navigation {
    gap: 30px;
  }

  .nav-link {
    font-size: 16px;
  }

  .page-header {
    padding: 80px var(--spacing-140) 60px;
    min-height: 300px;
  }

  .page-header h1 {
    font-size: 48px;
  }

  .page-header p {
    font-size: 24px;
  }

  .hero-title {
    font-size: 40px;
  }

  .title-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: auto;
  }

  .title-divider {
    width: 100px;
  }

  .hero-actions {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
  }

  .btn-outline,
  .btn-primary {
    font-size: 24px;
    padding: 9px 28px;
    min-height: 46px;
    width: 100%;
    justify-content: center;
  }

  .large-text {
    font-size: 24px;
  }

  /* Reduce spacing between buttons and content on mobile */
  .about-title {
    gap: 20px;
  }

  .sustainable-title {
    gap: 20px;
  }

  .about-content {
    padding-top: 40px;
  }

  .sustainable-content {
    padding-top: 40px;
  }

  .hero-image {
    max-width: 100%;
    width: 100%;
  }

  .hero-img {
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 784/795;
    border-radius: 30px;
    border: 4px solid var(--color-cream-500);
  }


  .product-container {
    gap: 60px;
  }

  .product-title {
    padding-top: 20px;
  }

  .product-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .product-content h3 {
    font-size: 36px;
  }

  .product-item {
    padding: 24px 0;
    gap: 16px;
  }

  .product-number {
    font-size: 24px;
  }

  /* Apparel subcategories mobile styles */
  .apparel-subcategories.expanded {
    padding: 30px 0;
  }

  .subcategory-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    padding: 0 20px;
  }

  .subcategory-item {
    padding: 16px;
  }

  .subcategory-image {
    width: 100px;
    height: 100px;
  }

  .subcategory-item h4 {
    font-size: 14px;
  }

  /* Footwear subcategories mobile styles */
  .footwear-subcategories.expanded {
    padding: 30px 0;
  }

  /* Workwear subcategories mobile styles */
  .workwear-subcategories.expanded {
    padding: 30px 0;
  }

  /* Accessories subcategories mobile styles */
  .accessories-subcategories.expanded {
    padding: 30px 0;
  }

  /* Home Textiles subcategories mobile styles */
  .hometextile-subcategories.expanded {
    padding: 30px 0;
  }

  /* Home Division subcategories mobile styles */
  .homedivision-subcategories.expanded {
    padding: 30px 0;
  }

  /* Pets subcategories mobile styles */
  .pets-subcategories.expanded {
    padding: 30px 0;
  }

  /* Sport & Sportswear subcategories mobile styles */
  .sport-subcategories.expanded {
    padding: 30px 0;
  }

  /* Lighting subcategories mobile styles */
  .lighting-subcategories.expanded {
    padding: 30px 0;
  }

  /* Appliances subcategories mobile styles */
  .appliances-subcategories.expanded {
    padding: 30px 0;
  }

  /* Garden images mobile styles */
  .garden-images.expanded {
    padding: 30px 0;
  }

  .garden-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 0 15px;
  }

  .garden-image {
    height: 120px;
  }

  /* Toys images mobile styles */
  .toys-images.expanded {
    padding: 30px 0;
  }

  .toys-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    padding: 0 15px;
  }

  .toys-image {
    height: 120px;
  }

  /* Hide arrow icon on mobile */
  .arrow-icon {
    display: none;
  }

  .product-preview {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: 200px;
    margin-top: 16px;
    border-radius: 12px;
    opacity: 1;
    z-index: 1;
  }

  .product-item.active .product-preview {
    opacity: 1;
  }

  /* Hide preview on hover for mobile, show by default */
  .product-item:not(.active) .product-preview {
    opacity: 0.7;
  }

  .service-content h2 {
    font-size: 60px;
  }

  .advantage-item {
    flex-direction: column;
    gap: 20px;
    padding-right: 0;
  }

  .advantage-number {
    font-size: 80px;
    margin-right: 0;
  }

  .advantage-text {
    margin-left: 0;
  }

  /* Improved Footer Mobile Styles */
  .footer-container {
    gap: 60px;
  }

  .footer-email {
    height: auto;
    min-height: 120px;
    border-radius: 80px;
    padding: 30px 20px;
  }

  .footer-email a {
    font-size: 24px;
    line-height: 1.2;
    word-break: break-word;
    hyphens: auto;
  }

  .footer-main {
    flex-direction: column;
    gap: 40px;
    padding: 0;
    text-align: center;
  }

  .footer-text h2 {
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 0;
  }

  .footer-address {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0;
    text-align: center;
  }

  .footer-logo {
    height: 80px;
  }

  .address-text p {
    font-size: 18px;
    line-height: 1.4;
    text-align: center;
  }

  .footer-nav {
    padding: 20px 0;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .footer-links a {
    font-size: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
  }

  .footer-copy p {
    text-align: center;
  }


  /* Responsive buttons - removed duplicate rule as it's now handled above */
  

  /* Further reduce spacing on smaller mobile screens */
  .about-title {
    gap: 15px;
  }

  .sustainable-title {
    gap: 15px;
  }

  .about-content {
    padding-top: 20px;
  }

  .sustainable-content {
    padding-top: 20px;
  }
  
  /* Extend menus to full width on smallest screens */
}

@media (max-width: 480px) {
  .nav-content { height: 70px; }
  .logo { height: 70px; }
  .logo-img { height: 60px; }
  .navbar,
  .hero,
  .about-section,
  .sustainable-section,
  .product-lines,
  .advantages-section,
  .footer,
  .newspaper-footer,
  .page-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-header {
    padding: 60px 20px 40px;
    min-height: 250px;
  }

  .page-header h1 {
    font-size: 36px;
  }

  .page-header p {
    font-size: 20px;
  }

  /* Keep inner gutters for the newspaper footer on small screens */
  .newspaper-footer .footer-container {
    padding: 0 12px;
  }

  /* Reduced spacing between sections on mobile */
  .hero {
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 60vh;
  }

  .hero-container {
    gap: 25px;
    min-height: auto;
  }

  .hero-content {
    gap: 30px;
  }

  .about-section {
    padding-top: 15px;
    padding-bottom: 25px;
  }

  .sustainable-section {
    padding-top: 25px;
    padding-bottom: 30px;
  }

  .product-lines {
    padding-top: 20px;
    padding-bottom: 25px;
  }

  .advantages-section {
    padding-top: 15px;
    padding-bottom: 25px;
  }

  .footer {
    padding-top: 30px;
    padding-bottom: 40px;
  }

  .service-item {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-title {
    font-size: 32px;
  }

  .hero-image {
    max-width: 100%;
    width: 100%;
  }

  .hero-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 784/795;
    border-radius: 25px;
    border: 3px solid var(--color-cream-500);
  }

  /* Mobile navigation drawer */
  .navigation {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: var(--color-cream-200);
    box-shadow: 0 6px 24px rgba(13, 13, 13, 0.12);
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
    max-height: calc(var(--vh, 1vh) * 100);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.open { transform: translateY(0); }
  .nav-link, .nav-btn { font-size: 20px; padding: 14px 8px; }

  .marquee-content {
    font-size: 40px;
  }

  .product-container {
    gap: 40px;
  }

  .product-title {
    padding-top: 15px;
  }

  .product-content h3 {
    font-size: 28px;
  }

  .product-item {
    padding: 20px 0;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  .product-content {
    width: 100%;
    gap: 12px;
  }

  /* Apparel subcategories small mobile styles */
  .apparel-subcategories.expanded {
    padding: 20px 0;
  }

  .subcategory-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 0 15px;
  }

  .subcategory-item {
    padding: 12px;
  }

  .subcategory-image {
    width: 80px;
    height: 80px;
  }

  .subcategory-item h4 {
    font-size: 12px;
  }

  /* Footwear subcategories small mobile styles */
  .footwear-subcategories.expanded {
    padding: 20px 0;
  }

  /* Workwear subcategories small mobile styles */
  .workwear-subcategories.expanded {
    padding: 20px 0;
  }

  /* Accessories subcategories small mobile styles */
  .accessories-subcategories.expanded {
    padding: 20px 0;
  }

  /* Home Textiles subcategories small mobile styles */
  .hometextile-subcategories.expanded {
    padding: 20px 0;
  }

  /* Home Division subcategories small mobile styles */
  .homedivision-subcategories.expanded {
    padding: 20px 0;
  }

  /* Pets subcategories small mobile styles */
  .pets-subcategories.expanded {
    padding: 20px 0;
  }

  /* Sport & Sportswear subcategories small mobile styles */
  .sport-subcategories.expanded {
    padding: 20px 0;
  }

  /* Lighting subcategories small mobile styles */
  .lighting-subcategories.expanded {
    padding: 20px 0;
  }

  /* Appliances subcategories small mobile styles */
  .appliances-subcategories.expanded {
    padding: 20px 0;
  }

  /* Garden images small mobile styles */
  .garden-images.expanded {
    padding: 20px 0;
  }

  .garden-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 0 10px;
  }

  .garden-image {
    height: 100px;
  }

  /* Toys images small mobile styles */
  .toys-images.expanded {
    padding: 20px 0;
  }

  .toys-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 0 10px;
  }

  .toys-image {
    height: 100px;
  }

  .product-number {
    font-size: 18px;
    width: auto;
  }

  .product-preview {
    height: 160px;
    margin-top: 12px;
  }

  /* Hide arrow icon on mobile (reinforced for 480px) */
  .arrow-icon {
    display: none !important;
  }

  /* Improve touch targets for mobile */
  .product-item {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .product-item:active {
    background-color: rgba(179, 166, 150, 0.05);
  }

  .service-content h2 {
    font-size: 48px;
  }

  /* Enhanced Footer Mobile Styles for Small Screens */
  .footer-container {
    gap: 40px;
  }

  .footer-email {
    height: auto;
    min-height: 100px;
    border-radius: 60px;
    padding: 25px 15px;
    margin: 0 auto;
    max-width: 100%;
  }

  .footer-email a {
    font-size: 20px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    display: block;
    padding: 0 10px;
  }

  .footer-main {
    flex-direction: column;
    gap: 30px;
    padding: 0;
    text-align: center;
  }

  .footer-text h2 {
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0;
  }

  .footer-address {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 0;
    text-align: center;
  }

  .footer-logo {
    height: 60px;
  }

  .address-text p {
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    margin: 0;
  }

  .footer-nav {
    padding: 15px 0;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }

  .footer-links a {
    font-size: 16px;
    padding: 8px 12px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
  }

  .footer-legal a {
    font-size: 14px;
  }

  .footer-copy p {
    font-size: 14px;
    text-align: center;
  }
}

/* Corporate Newspaper Footer - Matching site style */
.newspaper-footer {
  background: var(--color-cream-200);
  color: var(--color-grey-5);
  padding: var(--spacing-140) var(--spacing-140) 40px var(--spacing-140);
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  border-top: 4px solid var(--color-cream-mocha);
}

.newspaper-footer .footer-container {
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  padding: 0;
}

/* Corporate masthead style */
.newspaper-footer .footer-header {
  text-align: center;
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 3px double var(--color-grey-5);
  position: relative;
}

.newspaper-footer .footer-header::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: #d4af37;
}

.newspaper-footer .footer-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  margin-bottom: 20px;
}

.newspaper-footer .footer-brand h3 {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-light);
  margin: 0 0 8px 0;
  color: var(--color-grey-5);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.newspaper-footer .footer-brand p {
  font-size: var(--font-size-18);
  color: var(--color-dove-gray);
  margin: 0;
  font-style: italic;
  font-weight: var(--font-weight-light);
}

/* Content in newspaper box style */
.newspaper-footer .footer-content {
  background: #f9f9f9;
  padding: 40px;
  border-left: 6px solid var(--color-cream-mocha);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(13, 13, 13, 0.08);
}

.newspaper-footer .footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.newspaper-footer .footer-contact {
  flex: 1;
}

.newspaper-footer .footer-contact p:first-child {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-medium);
  color: var(--color-grey-5);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.newspaper-footer .footer-contact p {
  font-size: var(--font-size-16);
  color: var(--color-dove-gray);
  margin: 0 0 8px 0;
  line-height: var(--line-height-29);
  font-weight: var(--font-weight-light);
}

.newspaper-footer .footer-contact a {
  color: var(--color-grey-5);
  text-decoration: none;
  border-bottom: 2px solid #d4af37;
  transition: all 0.3s ease;
  font-weight: var(--font-weight-regular);
}

.newspaper-footer .footer-contact a:hover {
  color: var(--color-cream-mocha);
  border-bottom-color: var(--color-cream-mocha);
}

.newspaper-footer .footer-legal {
  flex: 1;
  text-align: right;
  padding-top: 20px;
}

.newspaper-footer .footer-legal p {
  font-size: var(--font-size-16);
  color: var(--color-dove-gray);
  margin: 0;
  line-height: var(--line-height-29);
  font-weight: var(--font-weight-light);
}

.newspaper-footer .footer-legal a {
  color: var(--color-dove-gray);
  text-decoration: underline;
  text-decoration-color: #d4af37;
  transition: all 0.3s ease;
}

.newspaper-footer .footer-legal a:hover {
  color: var(--color-grey-5);
  text-decoration-color: var(--color-grey-5);
}

/* Responsive Design */
@media (max-width: 1440px) {
  .newspaper-footer {
    padding: 80px 40px 40px 40px;
  }
}

@media (max-width: 768px) {
  .newspaper-footer {
    padding: 60px 20px 30px 20px;
  }
  
  .newspaper-footer .footer-header {
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  
  .newspaper-footer .footer-brand h3 {
    font-size: var(--font-size-28);
    letter-spacing: 1px;
  }
  
  .newspaper-footer .footer-brand p {
    font-size: var(--font-size-16);
  }
  
  .newspaper-footer .footer-content {
    padding: 30px 24px;
  }
  
  .newspaper-footer .footer-info {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  .newspaper-footer .footer-legal {
    text-align: center;
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .newspaper-footer {
    padding: 40px 20px 20px 20px;
  }
  
  .newspaper-footer .footer-header {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  
  .newspaper-footer .footer-logo {
    height: 60px;
    margin-bottom: 16px;
  }
  
  .newspaper-footer .footer-brand h3 {
    font-size: var(--font-size-22);
  }
  
  .newspaper-footer .footer-brand p {
    font-size: var(--font-size-16);
  }
  
  .newspaper-footer .footer-content {
    padding: 24px 20px;
  }
  
  .newspaper-footer .footer-contact p:first-child {
    font-size: var(--font-size-16);
  }
  
  .newspaper-footer .footer-contact p,
  .newspaper-footer .footer-legal p {
    font-size: 14px;
  }
}

/* Extra Small Screens - 320px and below */
@media (max-width: 320px) {
  .footer-container {
    gap: 30px;
  }

  .footer-email {
    min-height: 80px;
    border-radius: 50px;
    padding: 20px 12px;
  }

  .footer-email a {
    font-size: 16px;
    line-height: 1.2;
    padding: 0 5px;
  }

  .footer-main {
    gap: 25px;
  }

  .footer-text h2 {
    font-size: 18px;
    line-height: 1.1;
  }

  .footer-address {
    gap: 12px;
  }

  .footer-logo {
    height: 50px;
  }

  .address-text p {
    font-size: 14px;
    line-height: 1.3;
  }

  .footer-nav {
    padding: 12px 0;
  }

  .footer-links {
    gap: 12px;
  }

  .footer-links a {
    font-size: 14px;
    padding: 6px 8px;
  }

  .footer-bottom {
    gap: 12px;
  }

  .footer-legal a {
    font-size: 12px;
  }

  .footer-copy p {
    font-size: 12px;
  }
}

/* Catalog Modal - removed (unused in Newspaper layout) */



















/* Old Brands Section - removed (Newspaper brands used instead) */

/* Design Modal Styles */
.design-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* iOS fix: use environment safe area and dynamic viewport */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
  /* Force proper initialization */
  margin: 0;
  transform: none;
}

.design-modal.active {
  display: flex;
}

.design-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(8px);
  /* iOS fix: ensure overlay covers full viewport */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: -webkit-fill-available;
}

.design-container {
  position: relative;
  z-index: 1001;
  max-width: 1200px;
  max-height: 95vh;
  max-height: calc(var(--vh, 1vh) * 95);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  /* iOS fix: prevent container from being pushed off screen */
  min-height: 0;
  /* Force proper positioning */
  margin: 0;
  transform: none;
}

.design-close {
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translateY(-50%);
  background: linear-gradient(225deg, var(--color-grey-5) 0%, rgba(13, 13, 13, 0.9) 100%);
  border: none;
  color: var(--color-grey-98);
  cursor: pointer;
  z-index: 9999;
  width: 40px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 0 8px 8px 0;
  box-shadow: 
    4px 0 16px rgba(13, 13, 13, 0.4),
    inset -1px 0 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 2px solid var(--color-cream-200);
  border-left: none;
  font-family: var(--font-family);
  pointer-events: auto;
}

.design-close::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
  border-radius: 0 8px 8px 0;
  pointer-events: none;
  z-index: -1;
}

.design-close:hover {
  right: -28px;
  background: linear-gradient(225deg, var(--color-grey-5) 0%, rgba(13, 13, 13, 0.95) 100%);
  box-shadow: 
    6px 0 20px rgba(13, 13, 13, 0.5),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.05);
}

.design-close:active {
  right: -25px;
  transform: translateY(-50%) scale(0.98);
}

.design-close svg {
  transition: transform 0.2s ease;
}

.design-close:hover svg {
  transform: scale(1.1);
}

.design-viewer {
  position: relative;
  width: 100%;
  max-width: 1000px;
  background: var(--color-grey-98);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(13, 13, 13, 0.3);
  overflow: visible;
  /* Ensure proper positioning reset */
  transform: scale(1);
  opacity: 1;
  margin: 0;
}

.design-content {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  border-radius: 16px;
  /* Ensure inner sections respect rounded corners */
  overflow: hidden;
}

.design-header {
  padding: 32px 40px 24px 40px;
  background: var(--color-grey-98);
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 16px 16px 0 0;
}

.design-main {
  display: flex;
  flex: 1;
  min-height: 500px;
}

.design-image-section {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--color-cream-200);
}

.design-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(13, 13, 13, 0.15);
}

.design-text-section {
  flex: 1;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-grey-98);
}

.design-header h2 {
  font-size: var(--font-size-36);
  font-weight: var(--font-weight-light);
  color: var(--color-grey-5);
  margin: 0 0 8px 0;
  line-height: var(--line-height-42);
}

.design-header h3 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-medium);
  color: var(--color-cream-mocha);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.design-body p {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-29);
  color: var(--color-grey-5);
  margin: 0 0 20px 0;
}

.design-body p:last-child {
  margin-bottom: 0;
}

.mobile-design-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(13, 13, 13, 0.1);
  border: none;
  color: var(--color-grey-5);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.mobile-design-close:hover {
  background: rgba(13, 13, 13, 0.2);
  transform: scale(1.1);
}

/* Newspaper-themed mobile close button */
.newspaper-mobile-close {
  background: #fff7eb !important;
  color: #0d0d0d !important;
  border: 1px solid rgba(13, 13, 13, 0.12) !important;
  box-shadow: 0 6px 14px rgba(13, 13, 13, 0.18) !important;
}

.newspaper-mobile-close:hover {
  background: #fffaf0 !important;
}

/* Newspaper theme overrides for design modal */
.design-viewer.newspaper-theme {
  background: #fffdf5;
  border: 1px solid rgba(13, 13, 13, 0.08);
  box-shadow: 0 20px 40px rgba(13, 13, 13, 0.25);
}

.design-viewer.newspaper-theme .design-header {
  background: #fffdf5;
  padding: 28px 32px 12px 32px;
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  border-radius: 16px 16px 0 0;
}

.design-viewer.newspaper-theme .design-header h2 {
  color: #0d0d0d;
  font-weight: 300;
  font-size: var(--font-size-32);
}

.design-viewer.newspaper-theme .design-header h3 {
  color: #a47764;
  font-size: var(--font-size-18);
}

.design-viewer.newspaper-theme .design-main {
  background: #fffdf5;
}

.design-viewer.newspaper-theme .design-text-section {
  background: #fffdf5;
}

.design-viewer.newspaper-theme .design-body p {
  color: #0d0d0d;
  line-height: 1.7;
}

.design-viewer.newspaper-theme .design-image-section {
  background: #fff7eb;
}

.design-viewer.newspaper-theme .design-image {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.12);
}

/* Lighter close button for newspaper theme */
.newspaper-design-close {
  background: linear-gradient(225deg, #fff7eb 0%, #efe6d8 100%) !important;
  color: #0d0d0d !important;
  border: 1px solid rgba(13, 13, 13, 0.12) !important;
  box-shadow: 0 12px 24px rgba(13, 13, 13, 0.15),
    inset -1px 0 0 rgba(255, 255, 255, 0.5) !important;
}

/* Responsive Design Modal */
@media (max-width: 1024px) {
  .design-container {
    max-width: 95vw;
    max-height: calc(var(--vh, 1vh) * 95);
  }
  
  .design-viewer {
    max-width: 100%;
  }
  
  .design-content {
    min-height: 550px;
  }
  
  .design-header {
    padding: 28px 32px 20px 32px;
  }
  
  .design-main {
    min-height: 450px;
  }
  
  .design-image-section {
    flex: 0 0 35%;
    padding: 24px;
  }
  
  .design-text-section {
    padding: 24px 32px;
  }
  
  .design-header h2 {
    font-size: var(--font-size-32);
  }
  
  .design-header h3 {
    font-size: var(--font-size-22);
  }
  
  .design-body p {
    font-size: var(--font-size-17);
  }
  
  .design-close {
    width: 36px;
    height: 70px;
    right: -28px;
    z-index: 9999;
  }
  
  .design-close:hover {
    right: -22px;
  }
}

@media (max-width: 768px) {
  .design-modal {
    padding: 5px;
  }
  
  .design-container {
    max-height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-width: 100vw;
    width: 100vw;
    overflow-y: auto;
  }
  
  .design-close {
    display: none;
  }
  
  .design-viewer {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    border-radius: 0;
    max-width: 100%;
  }
  
  .design-content {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }
  
  .design-header {
    padding: 24px;
    border-radius: 0;
  }
  
  .design-main {
    flex-direction: column;
    min-height: auto;
  }
  
  .design-image-section {
    flex: none;
    min-height: 280px;
    padding: 20px 24px;
  }
  
  .design-text-section {
    flex: 1;
    padding: 20px 24px 32px 24px;
    overflow-y: auto;
  }
  
  .design-header h2 {
    font-size: var(--font-size-28);
  }
  
  .design-header h3 {
    font-size: var(--font-size-20);
  }
  
  .design-body p {
    font-size: var(--font-size-16);
    margin-bottom: 16px;
  }
  
  .mobile-design-close {
    display: flex;
  }
}

@media (max-width: 480px) {
  .design-modal {
    padding: 0;
  }
  
  .design-container {
    max-height: 100vh;
    max-height: calc(var(--vh, 1vh) * 100);
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    overflow-y: auto;
  }
  
  .design-viewer {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    border-radius: 0;
  }
  
  .design-content {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }
  
  .design-header {
    padding: 20px;
  }
  
  .design-image-section {
    min-height: 240px;
    padding: 16px 20px;
  }
  
  .design-text-section {
    padding: 16px 20px 28px 20px;
  }
  
  .design-header h2 {
    font-size: var(--font-size-24);
    line-height: 1.3;
  }
  
  .design-header h3 {
    font-size: var(--font-size-18);
  }
  
  .design-body p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  
  .mobile-design-close {
    width: 28px;
    height: 28px;
    top: 12px;
    right: 12px;
  }
  
  .mobile-design-close svg {
    width: 16px;
    height: 16px;
  }
}

/* Newspaper Modal Styles - removed duplicate (authoritative block kept below) */


/* Newspaper Layout Styles */
.newspaper-layout {
    background-color: #f8f8f8;
    font-family: 'Times New Roman', serif;
}

.newspaper-header {
    background: #B3A696;
    color: white;
    padding: 20px 0;
    text-align: center;
    border-bottom: 4px solid #d4af37;
}

.newspaper-title {
    font-size: 48px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.newspaper-subtitle {
    font-size: 18px;
    margin: 10px 0 0 0;
    opacity: 0.8;
}

.newspaper-date {
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.7;
}

.newspaper-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background: white;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.newspaper-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.main-article {
    border-right: 2px solid #e0e0e0;
    padding-right: 40px;
}

.main-article h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.main-article .lead {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.4;
}

.main-article p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify;
}

.sidebar {
    padding-left: 20px;
}

.sidebar h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 10px;
}

.advantages-list {
    margin-top: 20px;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #B3A696;
}

.advantage-number {
    font-size: 24px;
    font-weight: 800;
    color: #B3A696;
    margin-right: 15px;
    min-width: 40px;
    line-height: 1;
}

.advantage-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.3;
}

.advantage-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin: 0;
}

.stats-box {
    background: #f5f5f5;
    padding: 20px;
    margin-bottom: 30px;
    border-left: 4px solid #d4af37;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
}

.stat-number {
    font-weight: bold;
    color: #1a1a1a;
    /* Restore large numeral styling for Key Statistics */
    font-size: var(--font-size-72);
    line-height: var(--line-height-64);
}

.about-section {
    margin-top: 40px;
    border-top: 2px solid #e0e0e0;
    padding-top: 40px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

.about-text {
    padding: 20px;
}

.about-text h3 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    border-bottom: 2px solid #B3A696;
    padding-bottom: 10px;
}

.about-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.about-text ul {
    margin: 15px 0;
    padding-left: 20px;
}

.about-text li {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 8px;
}

.about-image {
    display: grid;
    gap: 24px;
    align-content: start;
}

.about-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* Slightly different crop for the second image to add visual rhythm */
.about-image img + img {
    aspect-ratio: 4 / 3;
}

.brands-section {
    margin-top: 40px;
    border-top: 2px solid #e0e0e0;
    padding-top: 40px;
    background: transparent;
}

.brands-newspaper-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.brand-newspaper-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #B3A696;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.brand-newspaper-card:hover {
    background: #f5f5f5;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.brand-logo-newspaper {
    margin-bottom: 20px;
}

.brand-logo-img-newspaper {
    height: 140px;
    width: auto;
    object-fit: contain;
}

.brand-content-newspaper {
    width: 100%;
}

.brand-content-newspaper h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.3;
}

.brand-content-newspaper p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
}

.brand-features-newspaper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
}

.feature-tag-newspaper {
    background: transparent;
    color: #B3A696;
    padding: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    position: relative;
}

.feature-tag-newspaper:not(:last-child)::after {
    content: '•';
    margin-left: 8px;
    color: #B3A696;
    font-weight: bold;
}

.departments-section {
    margin-top: 40px;
    border-top: 2px solid #e0e0e0;
    padding-top: 40px;
    background: transparent;
}

.departments-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.department-card {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid #1a1a1a;
}

.department-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.department-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.3s ease;
}

.department-card:hover .department-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.department-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    color: white;
    z-index: 2;
}

.department-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.department-content p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 15px;
}

.newspaper-modal-btn {
    background: #B3A696;
    color: white;
    border: 2px solid #B3A696;
    padding: 8px 20px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newspaper-modal-btn:hover {
    background: transparent;
    color: #B3A696;
    border-color: #B3A696;
}

/* Newspaper Modal Styles (overrides inline to match site theme) */
.newspaper-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.newspaper-modal.active { display: flex; opacity: 1; align-items: center; justify-content: center; }

.newspaper-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.6);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.newspaper-modal-content {
    position: relative;
    background: #fffdf5;
    max-width: 1000px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid rgba(13,13,13,0.08);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(13,13,13,0.25);
}

.newspaper-modal-header {
    background: #fffdf5;
    color: #0d0d0d;
    padding: 28px 32px 12px 32px;
    border-bottom: 1px solid rgba(13,13,13,0.08);
    position: sticky;
    top: 0;
    z-index: 1;
}

.newspaper-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto; /* hard reset so button doesn't jump to the left after reopen */
    background: rgba(13,13,13,0.06);
    border: none;
    color: #0d0d0d;
    font-size: 22px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    line-height: 1;
}

.newspaper-modal-title {
    font-size: 32px;
    font-weight: 300;
    margin: 0 48px 6px 0;
    color: #0d0d0d;
}

.newspaper-modal-subtitle {
    font-size: 18px;
    color: #a47764;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.newspaper-modal-body { padding: 28px 32px 32px 32px; line-height: 1.7; }

.newspaper-modal-body p { font-size: 18px; color: #0d0d0d; margin-bottom: 16px; }

.newspaper-modal-image {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin-bottom: 20px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 24px rgba(13,13,13,0.12);
}
 
/* Product Carousel Decoration - removed (unused in Newspaper layout) */

.sustainability-section {
    margin-top: 40px;
}

.sustainability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.sustainability-card {
    background: #f9f9f9;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #d4af37;
}

.sustainability-card h3 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.sustainability-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.quote-box {
    background: #B3A696;
    color: white;
    padding: 30px;
    margin: 40px 0;
    text-align: center;
    border-left: 6px solid #d4af37;
}

.quote-box blockquote {
    font-size: 24px;
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.quote-box cite {
    display: block;
    margin-top: 15px;
    font-size: 16px;
    opacity: 0.8;
}

.products-showcase {
    margin-top: 40px;
    border-top: 2px solid #e0e0e0;
    padding-top: 40px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.product-category {
    text-align: center;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.product-category:hover {
    background: #1a1a1a;
    color: white;
    transform: translateY(-5px);
}

.product-category h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.product-category p {
    font-size: 12px;
    opacity: 0.8;
}


.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-logo {
    height: 120px;
    margin-bottom: 20px;
}

.footer-text {
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-contact {
    font-size: 16px;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .newspaper-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .main-article {
        border-right: none;
        padding-right: 0;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 20px;
    }
    
    .sidebar {
        padding-left: 0;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .brands-newspaper-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .departments-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .sustainability-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .newspaper-title {
        font-size: 32px;
    }
    
    .main-article h1 {
        font-size: 28px;
    }

    /* Mobile fixes: prevent horizontal overflow in newspaper layout */
    .newspaper-content { overflow-x: clip; }
    .newspaper-content img { max-width: 100%; height: auto; display: block; }
    .stats-box { padding: 16px; }
    .stat-item { flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
    .stat-number { 
        font-size: clamp(28px, 12vw, 44px);
        line-height: 1.1;
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .brands-newspaper-grid {
        grid-template-columns: 1fr;
    }
    
    .departments-grid {
        grid-template-columns: 1fr;
    }
    
    .sustainability-grid {
        grid-template-columns: 1fr;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .newspaper-title {
        font-size: 24px;
    }
    
    .main-article h1 {
        font-size: 24px;
    }
    
    /* Responsive image gallery */
    .main-article div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Responsive visual showcase */
    section div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Extra-small mobile: keep stats readable without causing overflow */
    .stat-number { font-size: clamp(22px, 14vw, 38px); }
}

/* ============================= */
/* New Premium Footer (2025 rev) */
/* ============================= */
.site-footer {
  background: linear-gradient(180deg, #fffdf5 0%, #f7efe6 100%);
  border-top: 3px solid var(--color-cream-mocha);
  padding: 80px var(--spacing-140) 40px;
  color: var(--color-grey-5);
  font-family: var(--font-family);
}

.site-footer__container {
  max-width: var(--breakpoint-1440);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: auto 1fr auto; /* brand | address | email */
  align-items: start;
  gap: 32px;
}

.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__logo { height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(13,13,13,0.08)); }
.site-footer__tagline { margin: 0; color: var(--color-dove-gray); font-size: 16px; line-height: 1.4; }

.site-footer__cta {
  justify-self: end;
  padding: 10px 20px;
  border: 1px solid var(--color-grey-5);
  border-radius: 999px;
  transition: all .25s ease;
}
.site-footer__cta:hover { background: var(--color-grey-5); color: var(--color-grey-99); }

.site-footer__divider { border: none; border-top: 1px solid rgba(13,13,13,0.15); margin: 0; }

.site-footer__middle { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px; }
.site-footer__address { font-style: normal; text-align: center; }
.site-footer__address-line { margin: 0; font-size: 17px; color: #333; line-height: 1.4; }
.site-footer__actions { display: flex; align-items: center; gap: 16px; }
.site-footer__link { text-decoration: underline; text-decoration-color: #d4af37; color: inherit; }
.site-footer__link:hover { color: var(--color-cream-mocha); text-decoration-color: var(--color-cream-mocha); }

.site-footer__offices { display: grid; gap: 16px; align-self: stretch; }
@media (min-width: 1025px) { .site-footer__offices { grid-template-columns: repeat(4, minmax(160px, 1fr)); } }
@media (max-width: 1024px) { .site-footer__offices { grid-template-columns: repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 640px) { .site-footer__offices { grid-template-columns: 1fr; } }
.site-footer__office { text-align: center; }
.site-footer__office-title { margin: 0 0 4px; font-weight: 600; color: #1a1a1a; }
.site-footer__office-company { margin: 0 0 6px; color: var(--color-dove-gray); }
.site-footer__office-address { margin: 0; }

.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.site-footer__copyright { margin: 0; font-size: 15px; color: var(--color-dove-gray); }

@media (max-width: 1024px) {
  .site-footer { padding-left: 40px; padding-right: 40px; }
  .site-footer__top { 
    grid-template-columns: 1fr; 
    gap: 24px; 
    text-align: center;
    justify-items: center;
  }
  .site-footer__brand { 
    flex-direction: column; 
    align-items: center; 
    gap: 12px; 
    text-align: center;
  }
  .site-footer__address { text-align: center; }
  .site-footer__cta { justify-self: center; }
  .site-footer__middle { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 480px) {
  .site-footer { padding-left: 20px; padding-right: 20px; padding-top: 60px; }
  .site-footer__logo { height: 52px; }
  .site-footer__title { font-size: 22px; }
  .site-footer__tagline { font-size: 14px; }
  .site-footer__actions { justify-content: center; }
  .site-footer__bottom { 
    flex-direction: column; 
    gap: 12px; 
    text-align: center; 
    align-items: center;
  }
  .site-footer__copyright { text-align: center; }
}