/* ============================================================
   CheddarBaits — lure page styles
   ------------------------------------------------------------
   Kept in its own file so nothing here can fight with style.css.
   Every class below starts with .lure- for the same reason.

   The three values below are eyeballed from your live site. If
   style.css already defines your gold and orange as variables,
   swap them in here and everything follows.
   ============================================================ */

:root {
  --lure-gold:   #f0b429;
  --lure-orange: #e8541f;
  --lure-panel:  #1c1c1c;
  --lure-line:   #2e2e2e;
  --lure-muted:  #b3b3b3;
}

/* ---------- layout ---------- */

.lure-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- the image that swaps ---------- */

.lure-viewer {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #141414;
  border: 1px solid var(--lure-line);
  overflow: hidden;
}

.lure-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown when a color has no photo yet. Tinted with that color's
   swatch so the viewer still visibly changes when you switch. */
.lure-photo-pending {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lure-photo-pending span {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
}

/* ---------- the panel beside it ---------- */

.lure-panel {
  padding-top: 0.25rem;
}

.lure-price {
  color: var(--lure-gold);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.lure-copy {
  color: var(--lure-muted);
  max-width: 58ch;
  line-height: 1.65;
  margin: 0 0 2rem;
}

/* ---------- dropdown ---------- */

.lure-picker {
  margin-bottom: 1.75rem;
}

.lure-picker label {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.lure-picker select {
  width: 100%;
  max-width: 26rem;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  background-color: var(--lure-panel);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--lure-line);
  border-radius: 0;
  cursor: pointer;

  /* custom arrow, since the native one looks wrong on dark */
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lure-gold) 50%),
    linear-gradient(135deg, var(--lure-gold) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 2px),
    calc(100% - 1rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lure-picker select:hover {
  border-color: var(--lure-gold);
}

.lure-picker select:focus-visible {
  outline: 2px solid var(--lure-gold);
  outline-offset: 2px;
}

.lure-picker select option {
  background: var(--lure-panel);
  color: #fff;
}

/* ---------- selected color description ---------- */

.lure-color-info {
  border-left: 3px solid var(--lure-orange);
  padding-left: 1.1rem;
  margin-bottom: 2rem;
  min-height: 4.5rem;
}

.lure-color-info h3 {
  color: #fff;
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.lure-color-info p {
  color: var(--lure-muted);
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
}

/* ---------- footnote ---------- */

.lure-note {
  color: #8a8a8a;
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.lure-note a {
  color: var(--lure-gold);
}

/* ---------- mobile ---------- */

@media (max-width: 780px) {
  .lure-detail {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .lure-viewer {
    aspect-ratio: 3 / 2;
  }

  .lure-picker select {
    max-width: none;
  }
}

/* ---------- "poured in" links on the colors page ---------- */

.lure-avail {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: #8a8a8a;
}

.lure-avail a {
  color: var(--lure-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lure-avail a:hover,
.lure-avail a:focus-visible {
  border-bottom-color: var(--lure-gold);
}

/* ============================================================
   GALLERY PAGE
   ============================================================ */

.gallery-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}

.gallery-tile {
  position: relative;
  padding: 0;
  border: 1px solid var(--lure-line);
  background: #141414;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.gallery-tile-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.gallery-tile:hover .gallery-tile-photo img,
.gallery-tile:focus-visible .gallery-tile-photo img {
  transform: scale(1.04);
}

.gallery-caption {
  display: block;
  padding: 0.55rem 0.6rem;
  color: var(--lure-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.gallery-tile:focus-visible {
  outline: 2px solid var(--lure-gold);
  outline-offset: 2px;
}

/* Empty slots while the photo count is still building up. */
.gallery-tile-pending {
  aspect-ratio: 1 / 1;
  border-style: dashed;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-tile-pending span {
  color: #6a6a6a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gallery-empty {
  color: var(--lure-muted);
  text-align: center;
}

/* "See More" link under the homepage gallery strip. */
.gallery-more {
  max-width: 1180px;
  margin: 1.5rem auto 0;
  text-align: right;
}

.gallery-more a {
  color: var(--lure-gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gallery-more a:hover,
.gallery-more a:focus-visible {
  border-bottom-color: var(--lure-gold);
}

/* ---------- lightbox ---------- */

body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}

.lightbox-figure figcaption {
  color: #d0d0d0;
  font-size: 0.9rem;
  text-align: center;
  max-width: 60ch;
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.6rem;
}

.lightbox-nav {
  background: none;
  border: none;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.5rem;
  opacity: 0.7;
  flex: 0 0 auto;
}

.lightbox-nav:hover,
.lightbox-close:hover {
  color: var(--lure-gold);
  opacity: 1;
}

.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 2px solid var(--lure-gold);
  outline-offset: 2px;
}

/* ---------- mobile ---------- */

@media (max-width: 900px) {
  .gallery-page-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
  }
}

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

  .lightbox {
    padding: 1rem;
    gap: 0.25rem;
  }

  .lightbox-nav {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-tile img {
    transition: none;
  }

  .gallery-tile:hover img,
  .gallery-tile:focus-visible img {
    transform: none;
  }
}

/* ============================================================
   ORDER FORM
   ============================================================ */

.order-wrap {
  max-width: 640px;
  margin: 0 auto;
}

#order-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.order-field label {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.order-field label span {
  color: #8a8a8a;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.order-field-narrow {
  max-width: 8rem;
}

/* ---------- repeatable bait/color/quantity rows ---------- */

.order-item {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.4rem;
  border: 1px solid var(--lure-line);
  margin-bottom: 1.4rem;
}

.order-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-item-heading span {
  color: var(--lure-gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.order-item-remove {
  background: none;
  border: none;
  color: #8a8a8a;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.order-item-remove:hover,
.order-item-remove:focus-visible {
  color: var(--lure-orange);
}

.item-qty-note {
  color: #8a8a8a;
  font-size: 0.78rem;
  margin: 0.5rem 0 0;
  min-height: 1.1em;
}

.button-secondary {
  background: none;
  border: 1px dashed var(--lure-gold);
  color: var(--lure-gold);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  margin-bottom: 1.75rem;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: rgba(240, 180, 41, 0.08);
}

.order-field-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.order-total {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.order-total-label {
  color: #8a8a8a;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.order-total-value {
  color: var(--lure-gold);
  font-size: 1.3rem;
  font-weight: 700;
}

.order-field select,
.order-field input,
.order-field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background-color: var(--lure-panel);
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--lure-line);
  border-radius: 0;
}

.order-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lure-gold) 50%),
    linear-gradient(135deg, var(--lure-gold) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 2px),
    calc(100% - 1rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.order-field select:disabled {
  color: #6a6a6a;
  cursor: not-allowed;
}

.order-field textarea {
  resize: vertical;
  font-family: inherit;
}

.order-field select:hover,
.order-field input:hover,
.order-field textarea:hover {
  border-color: var(--lure-gold);
}

.order-field select:focus-visible,
.order-field input:focus-visible,
.order-field textarea:focus-visible {
  outline: 2px solid var(--lure-gold);
  outline-offset: 2px;
}

.order-note {
  color: #8a8a8a;
  font-size: 0.85rem;
  margin: 0;
}

.order-note-shipping {
  color: var(--lure-muted);
  border-left: 3px solid var(--lure-orange);
  padding-left: 0.9rem;
}

/* ============================================================
   PRODUCT CARD IMAGE FIX
   ------------------------------------------------------------
   CSS Grid items default to min-height: auto, which lets a
   replaced element (an <img>) size itself by its own aspect
   ratio instead of respecting .product-images' fixed 320px row
   height. The oversized image then gets clipped by
   overflow: hidden on the parent — which looks exactly like a
   cropping bug, even though object-fit: contain (already set
   correctly in style.css) is doing its job on the wrong-sized
   box. min-height: 0 here is the actual fix.
   ============================================================ */

.product-images img {
  min-height: 0;
  min-width: 0;
}

/* ============================================================
   HOMEPAGE GALLERY TEASER TILES
   ------------------------------------------------------------
   Not the full gallery.html grid, which has its own rules under
   .gallery-page-grid. These are just the 4 teaser tiles on the
   homepage.
   ============================================================ */
.gallery-grid .gallery-placeholder {
  aspect-ratio: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.gallery-teaser-photo {
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery-teaser-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-teaser-caption {
  padding: 0.6rem 0.7rem;
  color: var(--lure-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  font-style: italic;
}

.order-success {
  text-align: center;
  padding: 3rem 1rem;
}

.order-success h3 {
  color: var(--lure-gold);
  margin: 0 0 0.75rem;
}

.order-success p {
  color: var(--lure-muted);
  margin: 0;
}