/* Minimal reset and accessibility helpers */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Rubik+Mono+One&display=swap');

/* Editable variables for quick tweaks */
:root{
  --carousel-min-height: 420px; /* minimum pixel height */
  --carousel-vh: 70vh;         /* preferred viewport height (use e.g. 60vh, 70vh, 80vh) */
  --carousel-max-height: 900px;/* maximum pixel height */
  --carousel-fit-default: cover;/* default object-fit for slides: 'cover' or 'contain' */
  --carousel-control-size: 56px;/* size of prev/next circular controls */
  --carousel-indicator-size: 12px;/* dot size */
  
  /* Section alternating colors */
  --color-light: #fffbea;
  --color-accent1: #fff9c4;
  --color-accent2: #ffe8b6;
  /* Accent for borders (blue) - used for outlines and borders only */
  --accent-blue: #0a66ff;

  /* Layout / sizing helpers (edit these to quickly adjust scaling site-wide) */
  --logo-max-width: min(36vw, 340px);
  --logo-max-height: 220px;
  --h1-logo-max-height: 300px;
  --h2-logo-max-height: 200px;
  --product-row-min: 260px;
  --product-row-preferred: 32vh;
  --product-row-max: 420px;
}

/* ==========================================
  CSS SECTION MAP / NOTES
  - Variables: quick theme values (colors, sizes)
  - Reset & base: box-sizing, image defaults
  - Accessibility helpers: skip link, focus styles
  - Header / Nav: top bar, logo and navigation
  - Hero / Carousel: site hero and image carousel
  - Products / Collections: grid of product cards
  - Vintage Rock: vintage collection layout
  - Features: "Why Choose Urth Clothes" section
  - Contact / Forms: contact form controls
  - Footer: site-wide footer styling
  - Media queries: responsive adjustments for devices
  Comment each block below for quick editing.
  ========================================== */

* { box-sizing: border-box; }
html, body { height: 100%; }
img { max-width: 100%; height: auto; display: block; }

/* Center all H2 headings site-wide */
h2 { text-align: center; }

/* Skip link (hidden until focused) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: #ffea00;
  color: #421e04;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

:focus {
  outline: 3px solid #ffea00;
  outline-offset: 3px;
}

/* ------------------
   Base / Body styles
   Controls page background, font stack and base text color
   ------------------ */

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: #fffbea;
  color: #421e04;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #ff9100 0%, #ffea00 100%);
  padding: 16px 28px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  box-shadow: 0 4px 16px #ffe08270;
}

/* ------------------
  Header / Nav
  - .logo: brand text and inline logo sizing
  - #nav-toggle: mobile menu button
  - .primary-nav / nav a: top navigation links
  ------------------ */

header { position: relative; }

/* Inline logo next to brand text */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: 0;
}

.inline-logo {
  width: auto;
  height: auto;
  max-width: 30vw; /* responsive cap */
  /* larger default cap so header logo appears more prominent */
  max-height: 140px;
  margin-right: 12px;
}

/* Inline logos in headings (responsive) */
.h-logo, .h1-logo, .h2-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  margin-bottom: 4px;
  width: auto;
  height: auto;
  /* larger responsive caps for more prominent logos */
  max-width: var(--logo-max-width);
  max-height: var(--logo-max-height);
  object-fit: contain;
}

/* H1: biggest logo cap */
h1 .h-logo, h1 .h1-logo { max-height: var(--h1-logo-max-height); }
/* H2: large but smaller than H1 */
h2 .h-logo, h2 .h2-logo { max-height: var(--h2-logo-max-height); }

@media (min-width: 1000px) {
  /* larger header logo on very wide screens */
  .inline-logo { max-width: 360px; max-height: 200px; }
}

@media (max-width: 760px) {
  .inline-logo { max-width: 40vw; max-height: 72px; }
  header { padding: 12px 16px; }
  nav.primary-nav { right: 8px; top: 64px; }
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logo {
  font-family: 'Rubik Mono One', monospace;
  font-size: 2rem;
  color: #ffffff;
  letter-spacing: 2px;
}

/* Blue stroke / outline for header brand text (uses webkit stroke with text-shadow fallback) */
.logo {
  -webkit-text-stroke: 2px var(--accent-blue);
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 -1px 0 rgba(255,255,255,0.02);
}

#nav-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
}

.primary-nav a { padding: 6px 8px; }

nav a {
  text-decoration: none;
  margin: 0 16px;
  color: #421e04;
  font-weight: 700;
  transition: color 0.3s;
}
nav a:hover {
  color: var(--accent-blue);
}

/* Ensure mobile nav pops above the carousel controls/slides */
.primary-nav { z-index: 9999; }

@media (max-width: 760px) {
  /* when the nav collapses into the menu, make sure it's on top */
  nav.primary-nav { position: absolute; right: 8px; top: 64px; z-index: 9999; background: rgba(255,255,255,0.98); }
}

/* Responsive grid for vintage items */
.vintage-rock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: start;
}
.vintage-rock-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,250,235,0.8);
  padding: 10px;
  border-radius: 8px;
}
.vintage-rock-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* Featured products grid — prevent empty gaps and keep tidy layout */
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  grid-auto-rows: 1fr; /* make rows uniform height so cells align */
  align-items: start;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,250,235,0.9);
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.product-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 6px;
}
.product-card h3 { margin-top: 8px; }

/* Hide any leftover description elements on the homepage (defensive) */
.vintage-rock .desc, .products > .product-list .desc, .vintage-rock .card-details, .products > .product-list .card-details { display: none !important; }

/* Inventory policy block styling */
.inventory-policy { max-width: 1100px; margin: 24px auto; padding: 18px; background: #fffef6; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); }
.inventory-policy h3 { margin-top: 16px; }
.inventory-policy .notice { background: #fff4df; padding: 10px; border-left: 4px solid var(--accent-blue); border-radius: 6px; }

.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 12px; }
.related-card { display: flex; flex-direction: column; gap: 8px; align-items: center; text-decoration: none; color: inherit; }
.related-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.related-card span { font-size: 0.95rem; font-weight: 700; }

/* Footer & small link styling */
footer address { font-style: normal; margin-top: 8px; font-weight: 700; }
footer p a { color: var(--accent-blue); text-decoration: underline; margin: 0 6px; }

@media (max-width: 420px) {
  .vintage-rock-grid { gap: 10px; }
  .product-list { gap: 10px; }
  .vintage-rock-item img { padding-bottom: 0; min-height: 120px; object-fit: cover; width: 100%; }
  .product-card img { min-height: 120px; object-fit: cover; width: 100%; }
  .related-card img { min-height: 100px; }
  .inventory-policy { padding: 12px; }
}

/* Grid breakpoints: fixed column counts on wide screens, single-column stacks on smaller windows */
@media (min-width: 1200px) {
  /* Wide desktops: vintage grid shows 3 columns, featured shows 5 columns */
  .vintage-rock-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .product-list { grid-template-columns: repeat(5, 1fr); gap: 24px; }
}

@media (max-width: 1024px) {
  /* Small laptop / small window / phone: single item stacked vertically */
  .vintage-rock-grid,
  .product-list { grid-template-columns: 1fr !important; gap: 12px; }

  /* Use natural image heights when stacked so visual context is preserved */
  .product-card img { aspect-ratio: auto; height: auto; object-fit: contain; }
  .vintage-rock-item img { height: auto; object-fit: contain; }

  .product-card, .vintage-rock-item { padding: 8px; }
}


/* ------------------
   Hero / Carousel
   Controls the large hero area and image carousel behavior
   Keep images responsive and accessible
   ------------------ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #ff9100 60%, #ffea00 100%);
  /* Responsive min height so hero scales on small devices */
  min-height: clamp(320px, 40vh, 700px);
  text-align: center;
  border-radius: 0 0 60px 60px;
  margin-bottom: 0;
  position: relative;
  box-shadow: 0 8px 24px #ffe08233;
  padding: 0 !important;
}

.products {
  background: var(--color-accent1) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
}

/* ------------------
  Products / Featured Collection
  - .products: full-bleed section wrapper
  - .product-list: responsive grid
  - .product-card: individual card style and hover state
  ------------------ */

.vintage-rock {
  background: var(--color-light) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
}

.about-section {
  background: var(--color-accent2) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
}

.features {
  background: var(--color-accent1) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
}

.contact-section {
  background: var(--color-light) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
}

footer {
  background: linear-gradient(90deg, #ff910099 0%, #ffea0099 100%);
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  padding: 32px;
  text-align: center;
  color: #421e04;
  font-size: 1.1rem;
  margin-top: 0;
  box-shadow: 0 -4px 30px #ffe08299;
}

/* Carousel styles */
/* Hero (single image) styles */
.hero { padding: 0 !important; }
.hero-single { display:none; }

/* Carousel styles (single-image slides) */
.hero-carousel { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); position: relative; overflow: hidden; }
.hero-carousel .slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform 600ms ease; }
.hero-carousel .slide { display: block; height: clamp(var(--carousel-min-height), var(--carousel-vh), var(--carousel-max-height)); }
.hero-carousel .slide-panel { width: 100%; height: 100%; overflow: hidden; position: relative; }
.hero-carousel img { width: 100%; height: 100%; object-fit: var(--carousel-fit-default); object-position: 50% 50%; display: block; }

/* Caption overlay on bottom half of each slide panel */
.hero-carousel .slide-panel .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 60%);
  color: #fff;
  font-weight: 700;
  text-align: center;
  z-index: 6;
  font-size: 1rem;
}

/* When a caption has a heading, place a bottom overlay that sits on the lower portion of the slide */
.hero-carousel .slide-panel .caption.caption--center {
  bottom: 0;
  top: auto;
  transform: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%);
  padding: 14px 18px;
  text-align: center;
}
.hero-carousel .slide-panel .caption.caption--center h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
  line-height: 1.1;
}
.hero-carousel .slide-panel .caption.caption--center p {
  margin: 6px 0 0 0;
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  font-size: 0.95rem;
}

@media (max-width: 760px) {
  .hero-carousel .slide-panel .caption.caption--center { padding: 10px 12px; }
  .hero-carousel .slide-panel .caption.caption--center h2 { font-size: 1rem; }
}


/* Controls */
.hero-carousel .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(66,30,4,0.75); color: #fff; border: none; width: var(--carousel-control-size); height: var(--carousel-control-size); padding: 0; border-radius: 50%; cursor: pointer; font-size: 1.6rem; z-index: 10; display:flex; align-items:center; justify-content:center }
.hero-carousel .carousel-control.prev { left: 12px; }
.hero-carousel .carousel-control.next { right: 12px; }
.hero-carousel .carousel-control:hover { background: rgba(255,111,0,0.9); }

.carousel-indicators { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; gap: 8px; z-index: 12; }
.carousel-indicators button { width: var(--carousel-indicator-size); height: var(--carousel-indicator-size); border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; }
.carousel-indicators button[aria-selected="true"] { background: #ff6f00; box-shadow: 0 2px 8px rgba(255,111,0,0.3); }

@media (max-width: 760px) {
  .hero-carousel .slide { display: block; }
  .hero-carousel .slide-panel { height: 50vh; }
  .hero-carousel .slides { grid-auto-columns: 100%; }
}

@media (max-width: 760px) {
  .hero-carousel { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .hero-carousel .slides { height: clamp(260px, 50vh, 520px); }
  .hero-carousel .slide img { width: 100%; height: 100%; object-fit: var(--carousel-fit-default); object-position: 50% 50%; border-radius: 0; }
  .hero-carousel .slide.contain img { object-fit: contain; object-position: 50% 50%; }
  .hero-carousel .slide-caption h2 { font-size: 1.2rem; }
  .hero-carousel .carousel-control { padding: 10px 12px; font-size: 1.2rem; }
}

.hero h1 {
  font-family: 'Rubik Mono One', monospace;
  font-size: 3rem;
  margin: 20px 0 24px 0;
  color: #421e04;
  text-shadow: 0 2px 8px #fff17670;
}

.cta-btn {
  padding: 16px 36px;
  background: linear-gradient(90deg, #ffea00 0%, #ff9100 100%);
  color: #421e04;
  font-size: 1.2rem;
  font-family: 'Roboto', sans-serif;
  border: none;
  border-radius: 40px;
  box-shadow: 0 2px 8px #ff910071;
  cursor: pointer;
  margin-top: 18px;
  font-weight: 700;
  transition: background 0.2s;
  text-decoration: none;
}
.cta-btn:hover {
  background: linear-gradient(270deg, #ffea00 10%, #ff9800 90%);
}

.products {
  padding: 60px 24px !important;
}

.products > h2,
.products > .product-list {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.products h2 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff9100;
  font-size: 2rem;
  margin-bottom: 24px;
  text-align: center;
}
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  /* Responsive fixed row height: keeps all cards equal height but scales with viewport */
  grid-auto-rows: clamp(var(--product-row-min), var(--product-row-preferred), var(--product-row-max)); /* ensures even rows with no extra vertical space */
}
.product-card {
  background: #fffde7;
  padding: 18px 12px;
  border-radius: 24px;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s;
  box-shadow: 0 2px 8px #ff910025;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

/* Card description and small details */
.product-card .desc,
.vintage-rock-item .desc {
  margin: 8px 0 6px 0;
  color: #4a2b12;
  font-size: 0.95rem;
  text-align: center;
}
.card-details {
  list-style: disc;
  padding-left: 20px;
  margin: 6px 0 0 0;
  color: #3b2a1f;
  font-size: 0.85rem;
}
.card-details li { margin-bottom: 4px; }

/* Make images and headings inside product cards size consistently */
.product-card img {
  width: auto;
  max-width: 100%;
  max-height: 60%;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
}
.product-card h3 {
  margin: 0;
  padding: 6px 8px;
  background: rgba(66,30,4,0.08);
  border-radius: 12px;
  width: 100%;
  text-align: center;
}

/* Custom sizing per product using data-shape attribute */
.product-card[data-shape="square"] { 
  grid-column: span 1; 
}
.product-card[data-shape="horizontal"] { 
  grid-column: span 2; 
  grid-row: span 1; 
}

@media (max-width: 1024px) {
  .product-card[data-shape="horizontal"] {
    grid-column: span 1;
  }
}

/* Location gallery styling */
.location-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
  align-items: center;
  justify-items: center;
}

.location-photo {
  width: 100%;
  /* let the image scale naturally so the full photo is visible */
  height: auto;
  max-height: 60vh; /* cap height on very tall viewports */
  object-fit: contain; /* ensures the entire image shows without cropping */
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: block;
}

.location-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    auto-rows: 180px;
  }
  .product-card[data-shape="square"],
  .product-card[data-shape="horizontal"] {
    grid-column: span 1 !important;
  }
  
  .location-gallery {
    grid-template-columns: 1fr;
    gap: 0; /* eliminate extra space on narrow screens */
  }
  
  .location-photo {
    height: auto; /* let image scale naturally to avoid unused space */
    display: block;
    width: 100%;
  }
  
  .h1-logo {
    max-height: 64px;
    width: auto;
  }
  
  .h2-logo {
    /* larger but still responsive cap for medium screens */
    max-height: 100px;
    width: auto;
  }
  
  h1 {
    font-size: 28px;
  }
  
  h2 {
    font-size: 22px;
  }
  
  .hero {
    min-height: 60vh;
  }
  
  .carousel {
    /* responsive carousel height */
    height: clamp(260px, 45vh, 420px);
  }
  
  nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
    gap: 12px;
    auto-rows: 160px;
  }
  
  .location-gallery {
    grid-template-columns: 1fr;
    gap: 0; /* remove spacing so the image sits flush */
  }
  
  .location-photo {
    height: auto; /* natural image height to prevent blank space */
    display: block;
    width: 100%;
  }
  
  .h1-logo {
    max-height: 32px;
  }
  
  .h2-logo {
    max-height: 28px;
  }
  
  h1 {
    font-size: 22px;
  }
  
  h2 {
    font-size: 18px;
  }
  
  .hero {
    min-height: 50vh;
    padding: 20px 15px;
  }
  
  .carousel {
    /* responsive carousel height for smaller screens */
    height: clamp(220px, 40vh, 340px);
  }
  
  section {
    padding: 20px 15px;
  }
  
  .product-card h3 {
    font-size: 14px;
  }
  
  nav {
    padding: 12px 15px;
  }
}

.product-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(255,145,0,0.18);
  border-color: var(--accent-blue);
}

/* Ensure product images fill top of card consistently */
.product-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(255,145,0,0.08);
  margin-bottom: 12px;
}

/* Keep title inside document flow (no absolute positioning) */
.product-card h3 {
  margin: 0;
  padding: 8px 10px;
  background: rgba(66,30,4,0.06);
  border-radius: 10px;
  width: 100%;
  text-align: center;
  color: #421e04;
  font-weight: 700;
}

.features {
  padding: 60px 24px !important;
  text-align: center;
}

.features > h2,
.features > ul {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Ensure .features section background and border fill the full viewport width
   - We apply full-bleed using 100vw with negative margins on the section wrapper
   - Inner content remains constrained by max-width for readable line lengths
*/
.features { 
  /* full-bleed enforced earlier; keep content constrained via > h2 and > ul */
  width: 100vw; 
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color-accent1) !important;
  border-bottom: 3px solid var(--accent-blue);
}

.about h2, .features h2 {
  font-family: 'Rubik Mono One', monospace;
  font-size: 1.7rem;
  color: #ff9100;
  margin-bottom: 18px;
}
.about p {
  font-size: 1.2rem;
  color: #5d3b09;
  margin: 0 0 18px 0;
}

.divider {
  margin: 0 auto;
  margin-top: 16px;
  width: 55%;
  border-bottom: 4px dashed var(--accent-blue);
  border-radius: 2px;
  background: none;
}

.features ul {
  display: flex;
  justify-content: center;
  gap: 30px;
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
  color: #8d5100;
}

footer {
  background: linear-gradient(90deg, #ff910099 0%, #ffea0099 100%);
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  padding: 32px;
  text-align: center;
  color: #421e04;
  font-size: 1.1rem;
  margin-top: 0;
  box-shadow: 0 -4px 30px #ffe08299;
}
footer a {
  color: #ff6f00;
  text-decoration: none;
  margin: 0 8px;
  font-weight: 700;
}
footer a:hover {
  color: #ffab00;
}

.footer-logo {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.footer-logo-img {
  max-width: 300px;
  max-height: 100px;
  width: auto;
  height: auto;
}

/* Responsive nav: show hamburger on small screens */
@media (max-width: 760px) {
  #nav-toggle { display: block; }
  nav.primary-nav { display: none; position: absolute; right: 16px; top: 72px; background: #fffde7; padding: 12px; border-radius: 8px; box-shadow: 0 6px 18px #00000022; }
  nav.primary-nav.open { display: flex; flex-direction: column; gap: 8px; }
  nav.primary-nav a { display: block; }
}

/* Nav link styling (consistent across pages) */
.primary-nav a {
  text-decoration: none;
  margin: 0 8px;
  padding: 8px 14px;
  border-radius: 12px;
  color: #421e04;
  font-weight: 700;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  display: inline-block;
}
.primary-nav a:hover,
.primary-nav a:focus {
  background: rgba(10,102,255,0.08);
  color: var(--accent-blue);
  transform: translateY(-1px);
}
.primary-nav a:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 3px;
}
.primary-nav a[aria-current="page"] {
  background: linear-gradient(90deg,#ff9100,#ff6f00);
  color: #fff;
  box-shadow: 0 6px 18px #ff910033;
}

/* Mobile nav link spacing when open */
@media (max-width: 760px) {
  .primary-nav a { margin: 6px 0; padding: 10px 14px; border-radius: 10px; }
  .primary-nav a[aria-current="page"] { box-shadow: none; }
}

/* Vintage Rock Tshirts section */
.vintage-rock {
  padding: 60px 24px !important;
}

.vintage-rock > h2,
.vintage-rock > p,
.vintage-rock-grid {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.vintage-rock h2 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff9100;
  font-size: 2rem;
  margin-bottom: 12px;
}
.vintage-rock > p {
  font-size: 1rem;
  color: #5d3b09;
  margin-bottom: 24px;
  line-height: 1.6;
}
.vintage-rock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.vintage-rock-item {
  background: #fffde7;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px #ff910025;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}
.vintage-rock-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px #ff910050;
  border-color: var(--accent-blue);
}
.vintage-rock-item img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 12px;
}
.vintage-rock-item h3 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff6f00;
  font-size: 1.3rem;
  margin: 12px 0 8px 0;
}
.vintage-rock-item p {
  font-size: 0.95rem;
  color: #5d3b09;
  margin: 0;
}

@media (max-width: 760px) {
  .vintage-rock { padding: 0 16px; }
  .vintage-rock h2 { font-size: 1.6rem; }
  .vintage-rock-grid { grid-template-columns: 1fr; gap: 16px; }
  .vintage-rock-item img { height: 160px; }
}

/* Contact section */
.contact-section {
  padding: 60px 24px !important;
}

.contact-section > h2,
.contact-section > p,
.contact {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.contact-section h2 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff9100;
  font-size: 2rem;
  margin-bottom: 12px;
}
.contact-section > p {
  font-size: 1rem;
  color: #5d3b09;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Form styling */
.contact {
  background: #fffde7;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 2px 8px #ff910025;
}
.contact form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact label {
  font-weight: 700;
  color: #421e04;
  font-size: 0.95rem;
}
.contact input,
.contact textarea {
  padding: 10px 12px;
  border: 2px solid #ffea00;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  color: #421e04;
  background: #fff;
}
.contact input:focus,
.contact textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(10,102,255,0.12);
}
.contact button {
  padding: 12px 24px;
  background: linear-gradient(90deg, #ffea00 0%, #ff9100 100%);
  color: #421e04;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 2px 8px #ff910071;
  transition: background 0.2s;
}
.contact button:hover {
  background: linear-gradient(270deg, #ffea00 10%, #ff9800 90%);
}

@media (max-width: 760px) {
  .contact-section { padding: 0 16px; }
  .contact-section h2 { font-size: 1.6rem; }
  .contact { padding: 16px; }
}

/* About section - professional layout with image and content */
.about-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px !important;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-text h1 {
  font-family: 'Rubik Mono One', monospace;
  font-size: 2.8rem;
  margin: 0 0 24px 0;
  color: #ff9100;
  line-height: 1.2;
}

.about-text > p {
  font-size: 1.1rem;
  color: #5d3b09;
  line-height: 1.8;
  margin: 0 0 32px 0;
}

.about-highlights {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.highlight-item h3 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff6f00;
  font-size: 1.3rem;
  margin: 0 0 12px 0;
}

.highlight-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.highlight-item li {
  font-size: 0.95rem;
  color: #5d3b09;
  margin: 8px 0;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

.highlight-item li:before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #ff9100;
  font-weight: 700;
}

.about-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 145, 0, 0.08);
  border-radius: 20px;
  padding: 32px;
  min-height: clamp(240px, 40vh, 520px);
}

.about-image img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 145, 0, 0.15);
}

@media (max-width: 760px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Product Detail Page Styles */
.product-detail {
  background: var(--color-light) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 60px 24px !important;
}

.product-detail-container {
  max-width: 1000px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  color: #ff9100;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 24px;
  font-size: 1.1rem;
  transition: color 0.2s;
}

.back-link:hover {
  color: #ff6f00;
}

.product-detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.product-detail-image {
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.product-detail-image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.product-detail-info h1 {
  font-family: 'Rubik Mono One', monospace;
  font-size: 2.2rem;
  color: #421e04;
  margin-top: 0;
  margin-bottom: 16px;
}

.product-price {
  margin: 24px 0;
  border: 2px solid #ff9100;
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 145, 0, 0.05);
}

.price {
  font-family: 'Rubik Mono One', monospace;
  font-size: 1.8rem;
  color: #ff9100;
  font-weight: 700;
}

.product-description h2 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff9100;
  font-size: 1.4rem;
  margin-top: 24px;
  margin-bottom: 12px;
}

.product-description h3 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff6f00;
  font-size: 1.1rem;
  margin-top: 16px;
  margin-bottom: 12px;
}

.product-description p {
  color: #5d3b09;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.product-description ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-description li {
  color: #5d3b09;
  padding: 8px 0 8px 24px;
  position: relative;
}

.product-description li:before {
  content: "▸";
  color: #ff9100;
  position: absolute;
  left: 0;
}

.product-actions {
  margin-top: 32px;
}

.google-maps-section {
  background: var(--color-accent1) !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-bottom: 3px solid var(--accent-blue);
  padding: 60px 24px !important;
}

.google-maps-section h2 {
  font-family: 'Rubik Mono One', monospace;
  color: #ff9100;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 12px;
}

.google-maps-section > p {
  text-align: center;
  color: #5d3b09;
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.maps-container {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(255, 145, 0, 0.15);
}

.maps-container iframe {
  border-radius: 20px !important;
}

@media (max-width: 760px) {
  .product-detail-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .product-detail-image {
    /* responsive product image area */
    min-height: clamp(220px, 35vh, 380px);
  }
  
  .product-detail-info h1 {
    font-size: 1.6rem;
  }
  
  .about-text h1 {
    font-size: 2rem;
  }
  
  .about-image {
    min-height: clamp(220px, 40vh, 380px);
    padding: 24px;
  }
}

/* ==================================================
   Additional Responsive Tweaks
   - Large screens: make product cards bigger, increase hero font size
   - Very small phones: reduce paddings and image sizes for comfortable fit
   These increase the "super responsive" behavior across sizes.
   ================================================== */

@media (min-width: 1400px) {
  /* larger grid items for big viewports */
  .product-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
    auto-rows: 320px;
    max-width: 1400px;
  }

  .product-card {
    border-radius: 28px;
  }

  .product-card img {
    max-height: 220px;
    max-width: 76%;
  }

  .hero h1 { font-size: 4rem; }
  .about-text h1 { font-size: 3.2rem; }
}

@media (max-width: 360px) {
  /* very small phones: reduce image size and padding */
  .product-list { grid-template-columns: 1fr; gap: 10px; auto-rows: 140px; }
  .product-card img { max-height: 110px; max-width: 80%; }
  .features { padding: 28px 12px !important; }
  .hero { min-height: 42vh; }
  .inline-logo { max-height: 64px; }
  .product-card h3 { font-size: 13px; padding: 6px 10px; }
}

/* ------------------------------------------------------------------
   Tablet / Small Desktop layout: use Grid/Flex between 768px and 1199px
   This range provides a flexible two-column layout for main content
   - .about-content, .product-detail-content use a responsive grid
   - .product-list increases column size and rows adapt
   - Navigation remains horizontal but more compact
------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Two-column main areas */
  .about-content,
  .product-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }

  /* Product grid: 2-3 columns depending on width */
  .product-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    auto-rows: minmax(260px, auto);
    max-width: 1100px;
  }

  /* Make hero slightly taller on mid screens */
  .hero { min-height: 56vh; }

  /* Navigation layout: space saving */
  nav.primary-nav { display: flex; gap: 8px; align-items: center; }
  nav.primary-nav a { padding: 6px 10px; margin: 0 6px; }

  /* Ensure images use intrinsic size (avoid upscaling) */
  img { max-width: 100%; height: auto; width: auto; }
  .hero-carousel img { width: 100%; height: auto; object-fit: cover; }
}

/* Small accessibility/responsive polish: ensure focus outlines remain visible on all sizes */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}