/* ---------- Tokens ---------- */
:root {
  --navy-dark: #131921;
  --navy: #232f3e;
  --navy-light: #37475a;
  --accent: #febd69;
  --accent-dark: #e77600;
  --link: #007185;
  --link-hover: #c7511f;
  --price-red: #b12704;
  --star: #de7921;
  --bg: #eaeded;
  --card-bg: #ffffff;
  --border: #d5d9d9;
  --text: #0f1111;
  --text-muted: #565959;
  --radius: 8px;
  --header-h: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Header ---------- */
.main-header {
  background: var(--navy-dark);
  color: #fff;
}

.header-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.logo-img {
  height: 88px;
  width: auto;
  display: block;
}

.search-bar {
  flex: 0 0 50%;
  display: flex;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  min-width: 160px;
  max-width: 600px;
  margin: 0 auto;
}

.search-category { display: none; }

.search-bar input {
  flex: 1;
  border: none;
  padding: 0 10px;
  font-size: 15px;
  min-width: 0;
}
.search-bar button {
  background: var(--accent);
  width: 45px;
  font-size: 16px;
}
.search-bar button:hover { background: var(--accent-dark); }

.menu-toggle {
  display: none;
  background: none;
  color: #fff;
  font-size: 24px;
  padding: 8px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .menu-toggle { display: block; }
}

/* ---------- Category nav ---------- */
.category-nav {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Top-level nav list. Note: overflow-x:auto + overflow-y:visible is NOT
   valid together (the spec forces both axes to behave the same, silently
   clipping dropdowns), so this stays fully visible. There's rarely enough
   items to need horizontal scrolling at desktop widths anyway; flex-wrap
   is the safety net for narrow desktop windows. */
.category-nav > ul {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding: 8px 18px;
}

.category-nav a {
  font-size: 13px;
  color: #fff;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.category-nav a:hover,
.category-nav a:focus-visible { border-color: #fff; }
.nav-highlight { color: var(--accent); font-weight: 600; }

.category-nav > ul > li {
  display: flex;
  align-items: center;
}

/* Submenu base styles (desktop absolute dropdown) */
.category-nav .has-submenu {
  position: relative; /* containing block for absolute submenu */
}
.category-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--navy);
  min-width: 220px;
  max-height: 400px;           /* Add this - adjust height as needed */
  overflow-y: auto;            /* Add this - enables scrolling */
  overflow-x: hidden;          /* Add this - prevents horizontal scroll */
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  padding: 8px 0;
  border-radius: 4px;
  z-index: 10000;
  flex-direction: column;
}

.category-nav .submenu li { padding: 0; }
.category-nav .submenu a {
  display: block;
  padding: 8px 14px;
  color: #fff;
  font-size: 13px;
  border-radius: 0;
}
.category-nav .submenu a:hover,
.category-nav .submenu a:focus-visible { background: var(--navy-light); border-color: transparent; }

/* Desktop: show submenu on hover or keyboard focus */
@media (min-width: 861px) {
  .category-nav .has-submenu:hover > .submenu,
  .category-nav .has-submenu:focus-within > .submenu {
    display: flex;
  }
}

/* Submenu toggle button (only used on mobile) */
.submenu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  margin-left: 6px;
  padding: 4px 6px;
  cursor: pointer;
}

/* Mobile: stacked nav in normal document flow (no fragile fixed offsets),
   toggled open/closed by JS adding .open to the nav. */
@media (max-width: 860px) {
  .category-nav > ul {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .category-nav.open > ul { display: flex; }

  .category-nav.open > ul > li {
    border-bottom: 1px solid var(--navy-light);
    justify-content: space-between;
  }
  .category-nav.open a { display: block; padding: 12px 14px; flex: 1; }

  /* show per-item toggle on mobile */
  .submenu-toggle { display: inline-block; }

  /* mobile nested submenu flows with the document and stays collapsed by default */
  .category-nav .submenu {
  position: static;
  box-shadow: none;
  padding-left: 12px;
  background: var(--navy-dark);
  display: none;
  width: 100%;
  max-height: 300px;           /* Add this */
  overflow-y: auto;            /* Add this */
  overflow-x: hidden;          /* Add this */
}


  /* when JS adds .open to the parent li, show its submenu */
  .category-nav .has-submenu.open > .submenu { display: flex; }

  .category-nav .has-submenu { flex-wrap: wrap; }
  .category-nav .has-submenu > a { padding-right: 8px; }
}

/* ---------- Category cards ---------- */
.category-cards-section {
  max-width: 1500px;
  margin: 24px auto;
  padding: 0 18px;
}

.category-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1; /* lower than .category-nav so dropdowns can appear above */
}

.cat-card {
  background: var(--card-bg);
  padding: 18px;
  border-radius: var(--radius);
}
.cat-card h3 { font-size: 16px; margin-bottom: 12px; }
.cat-card img { width: 100%; height: 160px; object-fit: cover; margin-bottom: 12px; border-radius: 4px; }
.cat-card a { color: var(--link); font-size: 13px; font-weight: 600; }
.cat-card a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---------- Section heading ---------- */
.section-heading {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.section-heading .section-title {
  width: 100%;
  margin-bottom: 12px;
}
.section-heading .section-description {
  width: 100%;
}
.section-heading h2 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.section-heading h1 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.see-more { color: var(--link); font-size: 13px; font-weight: 600; }
.see-more:hover { color: var(--link-hover); }

/* ---------- Deals strip ---------- */
.deals-strip { max-width: 1500px; margin: 24px auto; padding: 0 18px; }
.deals-scroll { display: flex; flex-wrap: wrap; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.deal-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  min-width: 200px;
  max-width: 200px;
  flex-shrink: 0;
  position: relative;
  border: 1px solid var(--border);
}
.deal-card img { height: 140px; object-fit: cover; width: 100%; border-radius: 4px; margin-bottom: 10px; }
.deal-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--price-red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.deal-title { font-size: 13px; margin-bottom: 6px; height: 34px; overflow: hidden; }

@media (max-width: 860px) {
  .deals-scroll {
    overflow-x: visible;
    justify-content: center;
  }
  .deal-card {
    flex: 1 1 calc(50% - 7px);
    min-width: 140px;
    max-width: calc(50% - 7px);
  }
}

@media (max-width: 520px) {
  .deal-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ---------- Prices / stars ---------- */
.price { margin: 4px 0; }
.price-current { color: var(--price-red); font-size: 17px; font-weight: 700; }
.price-was { color: var(--text-muted); font-size: 12px; text-decoration: line-through; margin-left: 6px; }
.stars { color: var(--star); font-size: 13px; }
.stars span { color: var(--link); margin-left: 4px; }

/* ---------- Departments list ---------- */
.departments-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.department-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.category-header {
  margin-bottom: 16px;
  text-align: center;
}

.category-header h2 {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.category-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.category-left {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: center;
}

.category-description {
  flex: 1;
  text-align: center;
  width: 100%;
}

.category-description p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}

.category-image {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

.category-image img {
  width: auto;
  height: auto;
  border-radius: var(--radius);
  max-width: 160px;
  margin: 0 auto;
}

.category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  font-size: 13px;
  width: 100%;
}

.category-links a {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.category-links a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.department-divider {
  display: none;
}

@media (max-width: 768px) {
  .departments-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-content {
    flex-direction: column;
    align-items: center;
  }

  .category-left {
    width: 100%;
  }

  .category-description {
    text-align: center;
    width: 100%;
  }

  .category-image {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .departments-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- Product grid ---------- */
.product-grid-section { max-width: 1500px; margin: 24px auto 40px; padding: 0 18px; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.product-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin: 0 auto 10px;
  border-radius: 4px;
}
.product-title { font-size: 14px; margin-bottom: 6px; flex-grow: 1; color: var(--link); }
.product-card:hover .product-title { color: var(--link-hover); cursor: pointer; }

/* ---------- Single product detail ---------- */
/* ---------- Single product detail ---------- */
.product-detail-section {
  max-width: 1500px;
  margin: 24px auto 40px;
  padding: 0 18px;
}

/* Stacks title at top across all content */
.product-page-h1 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 24px;
  width: 100%;
  flex: 0 0 100%;
}

.product-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
}

.product-detail-media {
  flex: 0 1 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Form styling to ensure image button centering */
.product-detail-media form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.product-detail-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  margin: 0 auto 20px;
  display: block;
}

/* Centered Check Price Image */
.check-price-img {
  display: block;
  margin: 0 auto;
}

.check-price-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.check-price-btn:hover,
.check-price-btn:focus-visible {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.check-price-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.check-price-btn .arrow {
  transition: transform 0.15s ease;
}
.check-price-btn:hover .arrow {
  transform: translateX(4px);
}

/* Increased font size for description */
.product-detail-info {
  flex: 1 1 320px;
  max-width: 600px;
  text-align: left;
  font-size: 17px; /* Updated larger font size */
  line-height: 1.6;
}

.product-detail-info p {
  margin-bottom: 16px;
}

@media (max-width: 860px) {
  .product-detail {
    padding: 24px;
  }
  .product-detail-media,
  .product-detail-info {
    flex: 1 1 100%;
    text-align: center;
  }
}

.add-cart-btn {
  margin-top: 10px;
  background: var(--accent);
  border-radius: 20px;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
}
.add-cart-btn:hover { background: var(--accent-dark); color: #fff; }

/* ---------- Load more / See more CTA ---------- */
.load-more {
  text-align: center;
  margin-top: 24px;
}
.load-more .header-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 36px;
  border-radius: 24px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.load-more .header-btn:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #fff; margin-top: 30px; }
.back-to-top { width: 100%; background: var(--navy-light); color: #fff; padding: 14px; font-size: 13px; text-align: center; }
.back-to-top:hover { background: #45566e; }
.footer-columns { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 36px 18px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-size: 15px; margin-bottom: 8px; }
.footer-col a { font-size: 13px; color: #ddd; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--navy-light); padding: 20px 18px 30px; text-align: center; font-size: 12px; color: #bbb; }
.footer-logo { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 10px; }
.footer-logo-img { height: 56px; width: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .category-cards { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .logo-img { height: 34px; }
  .category-cards { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; text-align: center; }
  .top-strip-right { display: none; }
  .hero-caption { left: 5%; max-width: 90%; }
  .header-inner {
  flex-wrap: wrap;
  gap: 10px;
	}
	.logo { order: 1; }
	.menu-toggle { order: 2; }
	.search-bar {
	  order: 3;
	  flex: 1 1 100%;
	  max-width: 100%;
	  margin: 0;
	}
}