/*
  LastPick - Layout
  This file contains styles for page structure, containers, and major layout components.
*/

.page-shell {
  overflow-x: clip;
}

.skip-link {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 100;
  transform: translateY(-140%);
  border-radius: 999px;
  background: var(--warm-cream);
  color: var(--dark-green);
  padding: 10px 14px;
  font-weight: 800;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid rgba(167, 212, 111, 0.55);
  outline-offset: 4px;
}

/* Premium Section Container System */
.floating-section {
  width: calc(100% - 32px);
  max-width: 704px;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem); /* REFINEMENT: Standardized vertical margin for consistent section spacing. */
  padding: clamp(24px, 5.5vw, 36px) clamp(22px, 5vw, 36px);
  border-radius: 24px;
  background: #FFEFB3;
  border: 1px solid rgba(1, 62, 55, .08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(255, 239, 179, .35);
  overflow: hidden;
}

.product-grid,
.section-inner,
.gallery-inner,
.footer-grid {
  width: min(100%, var(--container));
  /* Padding is now on the .floating-section container */
  padding-inline: 0;
}

.product-grid {
  display: grid; /* This will be a single column grid by default */
  gap: var(--space-lg);
  align-items: center;
}

.product-image,
.product-copy,
.our-story-content,
.our-story-image {
  min-width: 0;
}

.our-story-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* REFINEMENT: Adjusted grid for better image/text balance. */
  gap: clamp(2rem, 4vw, 4rem); /* REFINEMENT: Reduced gap for tighter composition. */
  align-items: center;
}