/* ─── Galleri (Masonry) ─── */
/* Laid out by layoutGallery() in gallery.js, which deals the tiles into these
   columns in sort order. --gallery-columns is how it asks the stylesheet how
   many to make, so the breakpoints below stay the single source of truth. */
#gallery {
  --gallery-columns: 4;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  width: 100%;
  /* Frame style variables */
  --frame-gradient: repeating-linear-gradient(
    90deg,
    #D4B896 0px,
    #E5C9A8 1px,
    #C5A885 2px,
    #DFC4A2 3px,
    #D4B896 4px,
    #E5C9A8 5px,
    #D4B896 6px,
    #DCBF99 7px,
    #D4B896 8px,
    #C5A885 9px,
    #DFC4A2 10px
  );
  --frame-top: #B59970;
  --frame-right: #D4B896;
  --frame-bottom: #C5A885;
  --frame-left: #B89A78;
  --frame-inset-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.2);
  --frame-outer-shadow: 0 3px 10px rgba(181, 153, 112, 0.3);
}

/* Bookmarks are long and narrow, so more of them fit across (see
   updateGalleryColumnWidth in gallery.js) — but not as many as would fit. A
   tile a third as wide as it is tall stops being worth looking at somewhere
   under 180px across, so these counts keep it near that at every width. */
#gallery.gallery--narrow {
  --gallery-columns: 6;
}

@media (max-width: 1100px) {
  #gallery {
    --gallery-columns: 3;
  }

  #gallery.gallery--narrow {
    --gallery-columns: 5;
  }
}

@media (max-width: 720px) {
  #gallery {
    --gallery-columns: 2;
  }

  #gallery.gallery--narrow {
    --gallery-columns: 3;
  }
}

@media (max-width: 480px) {
  #gallery {
    --gallery-columns: 2;
  }

  #gallery.gallery--narrow {
    --gallery-columns: 2;
  }
}

.gallery-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 15px;
}

.gallery-item::after {
  content: " ";
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: var(--bg-warm);
  font-size: 0.8rem;
  font-family: 'Quicksand', sans-serif;
  pointer-events: none;
  text-shadow: 0 1px 3px var(--shadow-dark);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  padding: 3px;
  background: var(--frame-gradient);
  border: 5px solid;
  border-color: var(--frame-top) var(--frame-right) var(--frame-bottom) var(--frame-left);
  border-radius: 2px;
  box-shadow:
    var(--frame-inset-shadow),
    var(--frame-outer-shadow);
  transition: transform 0.2s ease;
}

.gallery-item img:hover {
  transform: scale(1.1);
}

/* Clay and bookmarks are each held to one shape (see gallery.js), so every
   tile in a row of them is the same height. The photo fills its frame — the
   shape it is held to is the shape it very nearly already is, so what this
   trims is a few pixels off an end, not a picture. */
.gallery-item--uniform img {
  object-fit: cover;
}

.gallery-item--circle {
  aspect-ratio: 1 / 1;
}

.gallery-item--circle img {
  border-radius: 50%;
}

.gallery-item-info {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  gap: 6px;
}

.gallery-item-size,
.gallery-item-price {
  background: rgba(44, 36, 22, 0.72);
  color: #fff;
  font-size: 0.75rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 20px;
  backdrop-filter: blur(2px);
  min-width: 0;
}

.gallery-item-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.gallery-item-price-current,
.gallery-item-price-old,
.gallery-item-discount {
  display: block;
}

.gallery-item-price-old {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.65rem;
  text-decoration: line-through;
}

.gallery-item-discount {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 12px;
}

@media (max-width: 960px) {
  .gallery-item-size,
  .gallery-item-price {
    font-size: 0.62rem;
    padding: 2px 6px;
    letter-spacing: 0.02em;
  }

  .gallery-item-price-old,
  .gallery-item-discount {
    font-size: 0.6rem;
  }
}

/* Empty / informational notice shown inside gallery (e.g. no clay products) */
.gallery-empty-notice {
  text-align: center;
  padding: 1.25rem 1rem;
  margin: 12px auto 18px auto;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--bg-warm);
  border: 1px solid var(--accent-green);
  border-radius: 8px;
  max-width: 900px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.discount-badge {
  position: absolute;
  top: 18px;
  left: -45px;
  padding: 8px 60px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(-45deg);
  text-align: center;
  box-shadow: 0 4px 10px var(--shadow-dark);
  pointer-events: none;
  background: #d21f3a;
  color: #fff;
}

.sold-badge {
  position: absolute;
  top: 18px;
  right: -45px;
  background: var(--accent-green);
  color: var(--text-light);
  padding: 8px 60px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(45deg);
  text-align: center;
  box-shadow: 0 4px 10px var(--shadow-dark);
  pointer-events: none;
}

@media (max-width: 960px) {
  .discount-badge {
    padding: 6px 40px;
    font-size: 0.65rem;
    letter-spacing: 1.5px;
    left: -35px;
  }
}

/* ─── Page title spacing ─── */
.page-title {
  margin-bottom: 24px;
}

/* ─── Filter knappar ─── */
.gallery-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 40px 0 30px 0;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* ─── Sticky filter bar (desktop) ─── */
/* Desktop only — on phones and tablets the floating filter button in
   css/fab.css carries the same controls */
/* ── The band under the header ─────────────────────────────────
   Which kind of work is being shown, and the filters that apply to it. They
   travel together under the fixed header: setupFilterBar() measures the band
   and moves the page down to clear it. Below 961px the filter bar drops out
   (the floating button carries it) and the band is the type row alone. */

#shop-bands {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, opacity 0.2s ease;
  border-bottom: 1px solid var(--accent-green);
}

#shop-type-bar {
  display: flex;
  gap: clamp(4px, 2vw, 24px);
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
  /* Enough kinds to outgrow a phone one day: they scroll rather than wrap,
     so the band keeps its height */
  overflow-x: auto;
  scrollbar-width: none;
}

#shop-type-bar::-webkit-scrollbar {
  display: none;
}

.shop-type-btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-dark);
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.6vw, 1rem);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}

.shop-type-btn:hover {
  color: var(--accent-green);
}

.shop-type-btn.active {
  background: var(--accent-green);
  color: var(--text-light);
}

#gallery-filter-bar {
  display: none;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* On the overview there is no grid for them to filter */
body.shop-overview #gallery-filter-bar,
body.shop-overview #filter-fab {
  display: none !important;
}

body.shop-overview #gallery-wrapper {
  display: none;
}

body:not(.shop-overview) #gallery-overview {
  display: none;
}

/* The page title introduces the shop, which is what the overview is. Once a
   kind has been chosen the row under the header already says what is on
   screen, and the heading only pushes the works further down. */
body:not(.shop-overview) .page-title {
  display: none;
}

@media (min-width: 961px) {
  #gallery-filter-bar {
    display: flex;
    gap: clamp(20px, 4.5vw, 70px);
  }
}

.filter-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.filter-reset-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #5a8a6a;
  color: white;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.filter-reset-btn:hover {
  background: #3d6b52;
}

.filter-dropdown.has-filter .filter-reset-btn {
  display: flex;
}

.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--accent-light);
  border-radius: 3px;
  background: var(--bg-warm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.filter-dropdown-trigger:hover,
.filter-dropdown.open .filter-dropdown-trigger {
  border-color: var(--accent-green);
}

.filter-dropdown.has-filter .filter-dropdown-trigger {
  background: var(--accent-green);
  border-color: var(--accent-green);
}

.filter-dropdown.has-filter .filter-dropdown-label {
  color: var(--text-light);
}

.filter-dropdown.has-filter .filter-chevron {
  fill: var(--text-light);
}

.filter-dropdown-label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
}

.filter-chevron {
  width: 9px;
  height: 6px;
  fill: var(--accent-green);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.filter-dropdown.open .filter-chevron {
  transform: rotate(180deg);
}

.filter-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg-light);
  border: 1px solid var(--accent-light);
  border-radius: 3px;
  box-shadow: 0 4px 16px var(--shadow-light);
  padding: 6px;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  min-width: 100%;
}

.filter-dropdown.open .filter-dropdown-panel {
  display: flex;
}

/* Sort sits at the right end of the bar and has the longest options, so its
   panel hangs leftwards rather than off the edge of the screen */
#filter-sort-dd .filter-dropdown-panel {
  left: auto;
  right: 0;
}

.filter-option {
  background: transparent;
  color: var(--text-dark);
  border: none;
  padding: 7px 14px;
  border-radius: 2px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.filter-option:hover {
  background: var(--bg-warm);
}

.filter-option.active {
  background: var(--accent-green);
  color: var(--text-light);
}

/* ── The overview ──────────────────────────────────────────────
   What the shop shows before a kind has been chosen: a row per kind and the
   way into each, so a visitor meets three invitations rather than one grid of
   everything the studio has ever made. */

/* The same 20px gutter #gallery keeps, so a row of works lines up with the
   grid it opens into */
#gallery-overview {
  padding: 20px;
}

.overview-row {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.overview-row:last-child {
  margin-bottom: 0;
}

.overview-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.overview-row-heading {
  margin: 0;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
}

.overview-row-link {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  color: var(--accent-green);
  font-family: inherit;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
}

.overview-row-link:hover {
  opacity: 0.7;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.5vw, 18px);
  align-items: start;
}

.overview-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.overview-card-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(150px, 19vw, 260px);
  /* Only as wide as the picture in it, so anything pinned to a corner lands on
     a corner of the picture — and nothing can spill onto the card beside it */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 6px;
}

/* The corner ribbon needs a tile's width to read as a ribbon, and a bookmark
   card is a third of one. Here the same "Såld" is a pill on the picture. */
.overview-card-frame .sold-badge {
  top: auto;
  right: 6px;
  bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 1px;
  transform: none;
  box-shadow: none;
}

.overview-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 6px;
  transition: transform 0.25s ease;
}

/* Held to the piece's real proportions, filling them from the middle of the
   photo rather than being squashed into them */
.overview-card img.overview-card-img--cropped {
  height: 100%;
  width: auto;
  object-fit: cover;
}

.overview-card:hover img {
  transform: translateY(-3px);
}

.overview-card-label {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: clamp(0.8rem, 2.2vw, 0.95rem);
}

/* Fewer cards rather than a second row: the point of a row is that it reads
   as one glance at what a kind holds */
@media (max-width: 1100px) {
  .overview-grid .overview-card:nth-child(n + 4) {
    display: none;
  }

  .overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .overview-grid .overview-card:nth-child(n + 3) {
    display: none;
  }

  .overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}