/* ------------------------------------------------------------
   Airport Marine – Single Boat UI (matches inventory style)
   File: /assets/ps-boat-single.css
   ------------------------------------------------------------ */

:root{
  --ps-red:#b31217;
  --ps-red2:#d01c22;
  --ps-border:rgba(0,0,0,.12);
  --ps-border2:rgba(0,0,0,.18);
  --ps-bg:#f6f6f6;
  --ps-panel:#ffffff;
  --ps-muted:rgba(0,0,0,.68);
}

.ps-boat-single{
  padding: 18px 0 28px;
}

.ps-boat-single__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Hero */
.ps-boat-hero{
  margin-bottom: 14px;
}

.ps-boat-hero__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.ps-boat-title{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.1;
}

.ps-boat-price{
  font-size: 22px;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: #fff;
  white-space: nowrap;
}

.ps-boat-chips{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.ps-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ps-border);
  background: #fafafa;
  font-size: 12px;
  color: rgba(0,0,0,.72);
  font-weight: 700;
}

/* Layout */
.ps-boat-layout{
  display:grid;
  /* Use minmax(0,1fr) so the left column can shrink.
     Prevents horizontal overflow that can push the sidecard off-canvas
     when the thumbnail strip has a large intrinsic width. */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

/* Allow grid children to actually shrink (fixes overflow issues in many themes) */
.ps-boat-layout > div,
.ps-boat-media,
.ps-media-grid{
  min-width: 0;
}

@media (max-width: 980px){
  .ps-boat-layout{ grid-template-columns: 1fr; }
}

/* Media */

/* Define sizing variables on the page wrapper so they always exist (prevents theme overrides). */
.ps-boat-single{
  --ps-thumb-size: 86px;
  --ps-main-h: 420px;
}

@media (max-width: 720px){
  .ps-boat-single{ --ps-main-h: 280px; }
}

.ps-boat-media{
  border: 1px solid var(--ps-border);
  background: #fff;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.ps-media-grid{
  display:grid;
  grid-template-columns: 1fr !important;
  gap: 10px;
  padding: 12px;
  align-items: start;
}

@media (max-width: 980px){
  .ps-media-grid{ grid-template-columns: 1fr; }
}

.ps-media-main{
  position:relative;
  border-radius: 10px;
  overflow:hidden;
  background:#eee;
}

.ps-media-main--single img{
  width:100%;
  height: var(--ps-main-h);
  object-fit: cover;
  display:block;
  border-radius: 0;
  margin:0;
  padding:0;
}

.ps-media-placeholder{
  height: var(--ps-main-h);
  display:grid;
  place-items:center;
  opacity:.65;
}

.ps-photo-count{
  position:absolute;
  left: 12px;
  top: 12px;
  background: rgba(0,0,0,.72);
  color:#fff;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
}

/* Thumb strip wrapper (below main image) */
.ps-media-thumbs-wrap{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Horizontal thumb arrows (replaces the native scrollbar UX) */
.ps-thumbs-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--ps-border);
  background: rgba(255,255,255,.94);
  color: rgba(0,0,0,.72);
  font-weight: 900;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
.ps-thumbs-nav:hover{ background: #fff; color: rgba(0,0,0,.88); }
.ps-thumbs-nav:disabled{ opacity: .35; cursor: default; }
.ps-thumbs-nav--prev{ left: 6px; }
.ps-thumbs-nav--next{ right: 6px; }

/* Horizontal thumb strip */
.ps-media-thumbs{
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  height: var(--ps-thumb-size);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 46px;
  cursor: grab;
  user-select: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ps-media-thumbs::-webkit-scrollbar{ height: 0; }


.ps-media-thumbs.is-dragging{ cursor: grabbing; }
.ps-media-thumbs > *{ flex: 0 0 auto; }

/* Main image nav */

.ps-main-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
}
.ps-main-nav--prev{ left: 10px; }
.ps-main-nav--next{ right: 10px; }
.ps-main-nav:hover{ background: rgba(0,0,0,.70); }
.ps-thumb{
  box-sizing: border-box;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.12);
  background:#eee;
  width: var(--ps-thumb-size);
  height: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  display:block;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
}


.ps-thumb img{
  width:100%;
  height: 100%;
  object-fit: cover;
  display:block;
  border-radius: 0;
  margin:0;
  padding:0;
  display:block;
}

/* Strong overrides to beat theme builder image/button rules (Divi, etc.) */
.ps-boat-single .ps-media-thumbs-wrap{
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ps-boat-single .ps-media-thumbs{
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 10px !important;
  height: var(--ps-thumb-size) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-height: 0 !important;
  /* Keep space for the arrow buttons so thumbs don't sit underneath them */
  padding: 0 46px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.ps-boat-single .ps-thumb{
  box-sizing: border-box !important;
  width: var(--ps-thumb-size) !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
}

.ps-boat-single .ps-thumb img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Panels */
.ps-panel{
  margin-top: 14px;
  border: 1px solid var(--ps-border);
  background: var(--ps-panel);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.ps-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  background: #f2f2f2;
  border-bottom: 1px solid var(--ps-border);
}

.ps-panel__title{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing:.2px;
}

.ps-panel__body{
  padding: 14px;
  color: rgba(0,0,0,.78);
  line-height: 1.55;
}

/* WYSIWYG safety */
.ps-wysiwyg img{ max-width: 100%; height: auto; }
.ps-wysiwyg p{ margin: 0 0 12px; }
.ps-wysiwyg p:last-child{ margin-bottom: 0; }

/* Buttons (match inventory) */
.ps-btn{
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ps-border2);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
}

.ps-btn-ghost{
  opacity: .9;
}

.ps-btn-ghost:hover{ opacity: 1; }

/* Side card */
.ps-boat-side{
  position: relative;
}

.ps-sidecard{
  position: sticky;
  top: 18px;
  border: 1px solid var(--ps-border);
  background: #fbfbfb;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.ps-sidecard__price{
  font-size: 20px;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ps-border);
  text-align:center;
  margin-bottom: 12px;
}

.ps-quote{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px 12px;
  border-radius: 10px;
  background: var(--ps-red);
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.08);
  margin-bottom: 10px;
}

.ps-quote:hover{ background: var(--ps-red2); }

.ps-actions-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.ps-actionbtn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 11px 10px;
  border-radius: 10px;
  border: 1px solid var(--ps-border2);
  background: #fff;
  text-decoration:none;
  font-weight: 800;
  color: rgba(0,0,0,.78);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .25px;
}

.ps-actionbtn:hover{
  border-color: rgba(0,0,0,.28);
  background: #f7f7f7;
}

.ps-sidecard__meta{
  padding-top: 6px;
}

.ps-sidecard__meta-title{
  font-weight: 900;
  font-size: 13px;
  color: rgba(0,0,0,.72);
  letter-spacing:.25px;
  text-transform: uppercase;
  margin: 6px 0 10px;
}

.ps-specrow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 13px;
}

.ps-specrow:first-of-type{ border-top: none; }

.ps-specrow__k{
  color: rgba(0,0,0,.65);
  font-weight: 800;
}

.ps-specrow__v{
  color: rgba(0,0,0,.85);
  font-weight: 800;
  text-align:right;
}


/* Tabs */
.ps-tabs { margin-top: 20px; }
.ps-tabbar {
  display:flex; flex-wrap:wrap; gap:8px;
  border-bottom:1px solid rgba(0,0,0,.12);
  padding-bottom:10px; margin-bottom:16px;
}
.ps-tab {
  appearance:none; border:1px solid rgba(0,0,0,.15);
  background:#fff; padding:8px 12px; border-radius:999px;
  font-weight:700; cursor:pointer;
}
.ps-tab.is-active {
  border-color: rgba(0,0,0,.35);
  background: rgba(0,0,0,.04);
}
.ps-panel { display:none; }
.ps-panel.is-active { display:block; }

/* Photos grid */
.ps-photo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.ps-photo img { width:100%; height:auto; display:block; border-radius:10px; }

/* Specs table */
.ps-table { width:100%; border-collapse:collapse; }
.ps-table th, .ps-table td { padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.10); text-align:left; }
.ps-table th { width:220px; opacity:.75; }

/* Recommendations */
.ps-rec-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.ps-rec { display:block; border:1px solid rgba(0,0,0,.12); border-radius:14px; overflow:hidden; text-decoration:none; }
.ps-rec-title { padding:10px 12px; font-weight:800; color:#111; }
.ps-rec-img img { width:100%; height:auto; display:block; }

/* Payment */
.ps-payment { max-width:520px; }
.ps-payment label { display:block; font-weight:800; margin:12px 0 6px; }
.ps-payment input, .ps-payment select { width:100%; padding:10px 12px; border:1px solid rgba(0,0,0,.15); border-radius:10px; }
.ps-pay-actions { display:flex; gap:10px; margin-top:14px; }
.ps-pay-actions button { padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.15); background:#fff; font-weight:800; cursor:pointer; }
.ps-pay-result { margin-top:16px; padding:14px; border:1px dashed rgba(0,0,0,.25); border-radius:12px; }
.ps-pay-label { opacity:.75; font-weight:800; }
.ps-pay-value { font-size:28px; font-weight:900; }


/* Force square thumbs even if theme styles images globally */
.ps-boat-single .ps-thumb{
  width: var(--ps-thumb-size) !important;
  height: var(--ps-thumb-size) !important;
  aspect-ratio: auto !important;
}
.ps-boat-single .ps-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display:block !important;
}

/* Ensure scrollbar hidden in overrides */
.ps-boat-single .ps-media-thumbs::-webkit-scrollbar{ height:0 !important; }