/**
 * Appily Fifty-Two — Harbor Berth Exchange Floor
 * Layout: dark hero + search ticket | cargo deck (left) + sticky berth rail (right)
 * View modes: deck grid / ledger list — distinct from grove poster lattice
 */

.page-shop-berth {
  --bt-ink: #101820;
  --bt-harbor: #142433;
  --bt-deep: #0C1620;
  --bt-copper: #C45C26;
  --bt-brass: #C9A227;
  --bt-sea: #3D7A6A;
  --bt-fog: #EEF2F5;
  --bt-paper: #F7F9FB;
  --bt-muted: #5C6B78;
  --bt-line: rgba(20, 36, 51, 0.12);
  --bt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bt-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --bt-shadow: 0 18px 44px rgba(20, 36, 51, 0.12);
  background:
    radial-gradient(820px 400px at 0% 0%, rgba(196, 92, 38, 0.08), transparent 55%),
    radial-gradient(640px 360px at 100% 20%, rgba(61, 122, 106, 0.07), transparent 50%),
    var(--bt-fog);
}

.page-shop-berth .page-main {
  padding-top: 0;
  overflow-x: clip;
}

.a52-berth { padding-bottom: 4rem; }

.a52-berth-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .65s var(--bt-ease) var(--berth-delay, 0s),
    transform .65s var(--bt-ease) var(--berth-delay, 0s);
}
.a52-berth-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes a52BtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 92, 38, .4); }
  70% { box-shadow: 0 0 0 12px rgba(196, 92, 38, 0); }
}
@keyframes a52BtShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes a52BtDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(28px, 16px) scale(1.06); }
}
@keyframes a52BtCrateIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ——— Hero ——— */
.a52-berth-hero {
  position: relative;
  color: #fff;
  padding: clamp(2.4rem, 5.5vw, 3.8rem) 0 2.75rem;
  background: linear-gradient(135deg, var(--bt-deep) 0%, var(--bt-harbor) 52%, #1E354A 100%);
  overflow: hidden;
  isolation: isolate;
}
.a52-berth-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.a52-berth-orb {
  position: absolute;
  width: 340px; height: 340px;
  top: -120px; right: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 92, 38, .35), transparent 68%);
  animation: a52BtDrift 10s ease-in-out infinite alternate;
}
.a52-berth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, #000 25%, transparent 88%);
  opacity: .7;
}
.a52-berth-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 1.75rem;
  align-items: stretch;
}
.a52-berth-kicker {
  margin: 0 0 .65rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bt-brass);
}
.a52-berth-hero h1 {
  margin: 0 0 .7rem;
  font-size: clamp(2rem, 4.8vw, 3.35rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  max-width: 16ch;
}
.a52-berth-lede {
  margin: 0 0 1.35rem;
  max-width: 44ch;
  color: rgba(255,255,255,.74);
  font-size: 1.02rem;
}

.a52-berth-search {
  display: flex;
  align-items: stretch;
  max-width: 520px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.18);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--bt-snap);
}
.a52-berth-search:focus-within {
  border-color: var(--bt-copper);
  box-shadow: 0 0 0 4px rgba(196, 92, 38, .22);
  transform: translateY(-2px);
}
.a52-berth-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  padding: .95rem 1.1rem;
  min-width: 0;
}
.a52-berth-search input::placeholder { color: rgba(255,255,255,.72); }
.a52-berth-search button {
  border: 0;
  background: var(--bt-copper);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: background .2s;
}
.a52-berth-search button:hover { background: #9E4518; }

.a52-berth-ticket {
  height: 100%;
  padding: 1.25rem 1.2rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.a52-berth-ticket-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bt-brass);
}
.a52-berth-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin: 0;
}
.a52-berth-meters div {
  padding: .65rem .7rem;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}
.a52-berth-meters div:last-child { grid-column: 1 / -1; }
.a52-berth-meters dt {
  margin: 0;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.a52-berth-meters dd {
  margin: .2rem 0 0;
  font-family: var(--a52-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}
.a52-berth-reset {
  display: inline-flex;
  justify-content: center;
  margin-top: auto;
  padding: .7rem .9rem;
  background: var(--bt-copper);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.a52-berth-reset:hover { background: #9E4518; }
.a52-berth-ticket-note {
  margin: auto 0 0;
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}

/* ——— Floor: cargo + right rail ——— */
.a52-berth-floor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1.75rem;
  align-items: start;
  padding-top: 2rem;
}

.a52-berth-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  padding: .75rem .9rem;
  background: #fff;
  border: 1px solid var(--bt-line);
  position: sticky;
  top: 88px;
  z-index: 25;
  box-shadow: 0 8px 24px rgba(20, 36, 51, .05);
  transition: box-shadow .25s;
}
.a52-berth-toolbar.is-pin {
  box-shadow: 0 14px 32px rgba(20, 36, 51, .1);
}
.a52-berth-toolbar-copy p {
  margin: 0;
  font-size: .9rem;
  color: var(--bt-muted);
}
.a52-berth-toolbar-copy strong { color: var(--bt-ink); }
.a52-berth-view {
  display: inline-flex;
  gap: .25rem;
  padding: .22rem;
  background: var(--bt-fog);
  border: 1px solid var(--bt-line);
}
.a52-berth-view button {
  border: 0;
  background: transparent;
  color: var(--bt-muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.a52-berth-view button.is-active {
  background: var(--bt-harbor);
  color: #fff;
}

/* Cargo crates — deck */
.a52-berth-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.a52-berth-deck[data-view="ledger"] {
  grid-template-columns: 1fr;
  gap: .65rem;
}

.a52-berth-crate {
  position: relative;
  background: #fff;
  border: 1px solid var(--bt-line);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px);
  transition: transform .3s var(--bt-snap), box-shadow .3s, border-color .3s;
}
.a52-berth-crate.is-visible {
  opacity: 1;
  transform: none;
  animation: a52BtCrateIn .5s var(--bt-ease) both;
  animation-delay: calc(min(var(--crate-i, 0), 8) * 0.04s);
}
.a52-berth-crate::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .25s;
}
.a52-berth-crate::after {
  content: '';
  position: absolute; top: -40%; left: -35%;
  width: 40%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg) translateX(-140%);
  transition: transform .65s ease;
  z-index: 3; pointer-events: none;
}
.a52-berth-crate:hover {
  transform: translateY(-6px);
  box-shadow: var(--bt-shadow);
}
.a52-berth-crate:hover::before { border-color: rgba(196, 92, 38, .5); }
.a52-berth-crate:hover::after { transform: rotate(18deg) translateX(340%); }

.a52-berth-crate--featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.a52-berth-crate--featured .a52-berth-crate-media { min-height: 100%; }
.a52-berth-crate--featured .a52-berth-crate-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.4rem;
}

.a52-berth-crate-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bt-fog);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.a52-berth-crate--featured .a52-berth-crate-media {
  aspect-ratio: auto;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.a52-berth-crate-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--bt-ease), filter .4s ease;
}
.a52-berth-crate:hover .a52-berth-crate-media img {
  transform: scale(1.07);
  filter: saturate(1.1);
}
.a52-berth-tag {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  background: var(--bt-harbor);
  color: #fff;
  font-size: .65rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .55rem;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.a52-berth-tag--sale {
  background: var(--bt-copper);
  box-shadow: 0 6px 16px rgba(196, 92, 38, .35);
}
.a52-berth-tag--soft { background: var(--bt-sea); }
.a52-berth-crate-peek {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: .7rem;
  background: linear-gradient(0deg, rgba(12, 22, 32, .85), transparent);
  color: #fff;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: .3s var(--bt-ease);
}
.a52-berth-crate:hover .a52-berth-crate-peek {
  opacity: 1;
  transform: none;
}

.a52-berth-crate-body { padding: 1rem 1.05rem 1.15rem; }
.a52-berth-crate-cat {
  display: block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bt-sea);
  margin-bottom: .35rem;
}
.a52-berth-crate-body h3 {
  margin: 0 0 .35rem;
  font-family: var(--a52-font-sans);
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
.a52-berth-crate-body h3 a:hover { color: var(--bt-copper); }
.a52-berth-crate-variant {
  margin: 0 0 .65rem;
  font-size: .8rem;
  color: var(--bt-muted);
}
.a52-berth-crate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}
.a52-berth-crate-price {
  display: flex; align-items: baseline; gap: .45rem;
}
.a52-berth-crate-price strong {
  font-size: 1.08rem;
  color: var(--bt-harbor);
}
.a52-berth-crate-price s {
  font-size: .82rem;
  color: var(--bt-muted);
}
.a52-berth-crate-cta {
  padding: .55rem .9rem;
  background: var(--bt-harbor);
  color: #fff;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s, transform .2s var(--bt-snap);
}
.a52-berth-crate-cta:hover {
  background: var(--bt-copper);
  transform: translateY(-1px);
}

/* Ledger view */
.a52-berth-deck[data-view="ledger"] .a52-berth-crate {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-column: auto;
}
.a52-berth-deck[data-view="ledger"] .a52-berth-crate--featured {
  grid-template-columns: 180px 1fr;
}
.a52-berth-deck[data-view="ledger"] .a52-berth-crate-media {
  aspect-ratio: 1;
  clip-path: none;
  min-height: 0;
}
.a52-berth-deck[data-view="ledger"] .a52-berth-crate-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.15rem;
}
.a52-berth-deck[data-view="ledger"] .a52-berth-crate-peek { display: none; }

/* Empty */
.a52-berth-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: #fff;
  border: 1px dashed var(--bt-line);
}
.a52-berth-empty-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 1rem;
  border: 2px solid var(--bt-copper);
  color: var(--bt-copper);
  font-size: 1.4rem;
  animation: a52BtPulse 2.8s ease infinite;
}
.a52-berth-empty h2 {
  margin: 0 0 .5rem;
  color: var(--bt-harbor);
}
.a52-berth-empty p {
  margin: 0 0 1.25rem;
  color: var(--bt-muted);
}

/* ——— Right berth rail ——— */
.a52-berth-rail-sticky {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.a52-berth-rail-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bt-copper);
}
.a52-berth-berths {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.a52-berth-berth {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .65rem;
  align-items: center;
  padding: .7rem .7rem;
  background: #fff;
  border: 1px solid var(--bt-line);
  transition: transform .22s var(--bt-snap), border-color .22s, background .22s, box-shadow .22s;
  animation: a52BtCrateIn .45s var(--bt-ease) both;
  animation-delay: calc(var(--berth-i, 0) * 0.04s);
}
.a52-berth-berth:hover {
  transform: translateX(-3px);
  border-color: rgba(196, 92, 38, .45);
  box-shadow: 0 10px 24px rgba(20, 36, 51, .08);
}
.a52-berth-berth.is-active {
  background: var(--bt-harbor);
  border-color: var(--bt-harbor);
  color: #fff;
  box-shadow: 0 12px 28px rgba(20, 36, 51, .18);
}
.a52-berth-berth-mark {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .04em;
  background: rgba(196, 92, 38, .12);
  color: var(--bt-copper);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.a52-berth-berth.is-active .a52-berth-berth-mark {
  background: var(--bt-copper);
  color: #fff;
}
.a52-berth-berth-copy {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
}
.a52-berth-berth-copy strong {
  font-size: .86rem;
  line-height: 1.2;
}
.a52-berth-berth-copy small {
  font-size: .7rem;
  color: var(--bt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a52-berth-berth.is-active .a52-berth-berth-copy small {
  color: rgba(255,255,255,.65);
}

.a52-berth-rail-note {
  padding: 1.05rem;
  background: linear-gradient(160deg, var(--bt-harbor), var(--bt-deep));
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.a52-berth-rail-note strong {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bt-brass);
  margin-bottom: .45rem;
}
.a52-berth-rail-note p {
  margin: 0 0 .75rem;
  font-size: .84rem;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}
.a52-berth-rail-note a {
  font-weight: 800;
  font-size: .82rem;
  color: var(--bt-copper);
}
.a52-berth-rail-note a:hover { color: var(--bt-brass); }

/* Pagination restyle on shop */
.page-shop-berth .catalog-pagination {
  margin-top: 2rem;
}
.page-shop-berth .pagination-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.page-shop-berth .pagination-btn,
.page-shop-berth .pagination-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .85rem;
  background: #fff;
  border: 1px solid var(--bt-line);
  color: var(--bt-ink);
  font-weight: 700;
  font-size: .85rem;
  transition: background .2s, color .2s, border-color .2s;
}
.page-shop-berth .pagination-btn:hover,
.page-shop-berth .pagination-num:hover {
  border-color: var(--bt-copper);
  color: var(--bt-copper);
}
.page-shop-berth .pagination-num.is-active {
  background: var(--bt-harbor);
  border-color: var(--bt-harbor);
  color: #fff;
}
.page-shop-berth .pagination-btn.is-disabled {
  opacity: .4;
  pointer-events: none;
}
.page-shop-berth .pagination-pages {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}
.page-shop-berth .pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  color: var(--bt-muted);
  padding: 0 .25rem;
}

@media (max-width: 1100px) {
  .a52-berth-deck { grid-template-columns: repeat(2, 1fr); }
  .a52-berth-crate--featured { grid-column: span 2; }
}
@media (max-width: 980px) {
  .a52-berth-hero-inner { grid-template-columns: 1fr; }
  .a52-berth-floor { grid-template-columns: 1fr; }
  .a52-berth-rail { order: -1; }
  .a52-berth-rail-sticky { position: relative; top: 0; }
  .a52-berth-berths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
  }
  .a52-berth-toolbar { top: 72px; }
}
@media (max-width: 640px) {
  .a52-berth-deck,
  .a52-berth-deck[data-view="deck"] { grid-template-columns: 1fr; }
  .a52-berth-crate--featured {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .a52-berth-crate--featured .a52-berth-crate-media {
    aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  }
  .a52-berth-berths { grid-template-columns: 1fr; }
  .a52-berth-deck[data-view="ledger"] .a52-berth-crate {
    grid-template-columns: 100px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a52-berth-orb,
  .a52-berth-empty-mark,
  .a52-berth-crate.is-visible,
  .a52-berth-berth {
    animation: none !important;
  }
  .a52-berth-reveal,
  .a52-berth-crate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}