.pool-store-scroller {
    background: #fff;
    padding: 1rem;
}

.tabs-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
    width:100%;
}

.tabs {
    display: flex;
}

.tab {
    flex: 1;
    padding: 0.75rem;
    text-align: center;
    background: var(--color-light-blue);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    font-weight: bold;
}

.tab:last-child {
    border-right: none;
}

.tab.active {
    background: var(--color-dark-blue);
}

.tab-content {
    padding: 1rem;
    background: var(--color-dark-blue);
    border-top: none;
    transition: background 0.3s ease;
}

.tab-content.white {
    background: #fff;
}

.category-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 3rem;
}

.category-view .item {
    text-align: center;
    color: white;
}

.category-view .item img {
    border-radius: 0.25rem;
    width: 10rem;
    height: 10rem;
}

.category-view .item p {
    margin-top:1rem;
}

.item-thumbnail{
    height:10rem;
    width:10rem;
    object-fit:cover;
    min-height:10rem;
    min-width:10rem;
}

#pool-store-main{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

#pool-store-blurb{
    width: 35%;
    height:auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

#trusted-brands{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    gap: 1rem;
}

#brand-main{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch; /* ensures equal column heights */
    width:100%;
}

#brand-text-wrapper{
    width:auto;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-orange);
    padding:4rem;
    background-image: url(/resources/images/inner_store.jpeg);
    background-size:cover;
    background-position:70%;
}

#brand-text{
    padding:2rem;
    background: rgb(0, 0, 0, 0.75);
}

#brands{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, 1fr);
    height: 100%;
}

#brands .item-thumbnail{
    width:100%;
    height:100%;
    object-fit: contain; /* use cover if you prefer edge-to-edge */
    display:block;
    aspect-ratio:2.5/1
}

#how-to-arrive{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap:1rem;
}

#map-main{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch; /* ensures equal column heights */
    width:100%;
}

#map-text-wrapper{
    width:auto;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-orange);
    padding: 4rem;
}

#map-text-wrapper > p, #brand-text-wrapper > p, #brand-text-wrapper > a{
    text-shadow: none !important;
}

#map-text{
    padding:2rem;
}

#map{
    width:100%;
    height:100%;
}

#pool-products {
  width: 100%;
}
.pp-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1rem 0 1.25rem 0;
  flex-wrap: wrap;
}
.pp-search {
  flex: 2 1 320px;
}
.pp-filters {
  display: flex;
  gap: 0.75rem;
}
.pp-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.pp-tab {
  padding: 0.65rem 0.9rem;
  border: 1px solid #dcdde1;
  border-radius: 8px;
  background: #fff;
  color: var(--color-dark-blue);
  font-weight: var(--medium);
  cursor: pointer;
}
.pp-tab.active {
  background: var(--color-light-blue);
  color: #fff;
  border-color: var(--color-light-blue);
}

.pp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9eaee;
  border-radius: 10px;
  box-shadow: var(--simple-lift);
}
.pp-card-img {
  width: 100%;
  height: 11rem;
  object-fit: contain;
}
.pp-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
}
.pp-card-title {
  font-weight: var(--semi-bold);
  color: var(--color-dark-blue);
}
.pp-card-brand {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.pp-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid #e0e0e0;
}
.pp-pill.brand {
  background: #f3fbfd;
  border-color: #d6f2f7;
}
.pp-pill.tag {
  background: #fafafa;
}
.pp-tag-row, .pp-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0;
}
.pp-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.pp-notes {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--color-dark-blue);
}

.popup-content-col {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pp-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.pp-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  background: #f7fafc; /* soft neutral background */
  padding: 2rem;
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
  max-height: 50rem;/* roughly 3 rows on desktop */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-light-blue) #e5e9ee;
}

/* Optional scrollbar styling for WebKit browsers */
.pp-results::-webkit-scrollbar {
  width: 8px;
}

.pp-results::-webkit-scrollbar-track {
  background: #e5e9ee;
  border-radius: 10px;
}

.pp-results::-webkit-scrollbar-thumb {
  background-color: var(--color-light-blue);
  border-radius: 10px;
}

@media (min-width: 1200px) {
  .pp-results {
    grid-template-columns: repeat(4, 1fr);
  }
}

#pp-q{
    width:100%;
    max-width:32rem;
}

#pp-title{
    text-align: center;
}

#google-maps-button{
  color: var(--color-orange);
  font-size: var(--site-subtitle);
  font-weight: var(--bold);
  line-height: 3rem;
  text-shadow: var(--simple-lift-text);
  background-color: white;
  padding: 1rem;
  border-radius: 12px;
}