/**
 * Phantom Marine — Yacht Product Page Styles (v2)
 * All selectors prefixed with .py- to avoid theme conflicts
 */

:root {
  --py-teal:    #1DADA8;
  --py-teal-l:  #EAF8F7;
  --py-teal-d:  #158480;
  --py-navy:    #0C1322;
  --py-ink:     #1A2332;
  --py-body:    #F6F8FA;
  --py-white:   #ffffff;
  --py-muted:   #6B7A90;
  --py-border:  #E1E6EE;
  --py-green:   #1a9255;
  --py-green-l: #e8f8f0;
  --py-radius:  8px;
  --py-shadow:  0 4px 24px rgba(0,0,0,0.10);
}

/* ═══ RESET for product page ═══ */
.phantom-yacht-page,
.phantom-yacht-page * { box-sizing: border-box; }
.phantom-yacht-page {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: var(--py-ink);
  font-size: 14px;
  line-height: 1.6;
  background: var(--py-body);
  margin: 0; padding: 0;
}

/* Hide default Woo elements */
.phantom-yacht-page .woocommerce-breadcrumb,
.phantom-yacht-page .product_meta,
.phantom-yacht-page .woocommerce-tabs,
.phantom-yacht-page .related.products,
.phantom-yacht-page .up-sells,
.phantom-yacht-page .woocommerce-product-gallery,
.phantom-yacht-page .summary.entry-summary,
.phantom-yacht-page .price,
.phantom-yacht-page .cart,
.phantom-yacht-page .quantity { display: none !important; }

/* ═══ HERO ═══ */
.py-hero { position: relative; height: 500px; overflow: hidden; }
.py-hero-bg { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.48); display: block; }
.py-hero-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(12,19,34,0.15) 0%, rgba(12,19,34,0.75) 100%); }
.py-hero-top { position: absolute; top: 20px; left: 40px; right: 40px; display: flex; justify-content: space-between; }
.py-hero-pill {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px; padding: 6px 14px; font-size: 12px; color: #fff;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background 0.2s; backdrop-filter: blur(6px); text-decoration: none;
}
.py-hero-pill:hover { background: rgba(255,255,255,0.2); }
.py-hero-bottom { position: absolute; bottom: 44px; left: 44px; right: 44px; }
.py-hero-available {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(29,173,168,0.15); border: 1px solid rgba(29,173,168,0.35);
  border-radius: 20px; padding: 5px 14px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--py-teal); margin-bottom: 16px;
}
.py-hero-available span { width: 6px; height: 6px; border-radius: 50%; background: var(--py-teal); box-shadow: 0 0 0 3px rgba(29,173,168,0.25); display: inline-block; }
.py-hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(34px, 5vw, 54px); font-weight: 300; color: #fff; line-height: 1.06; margin: 0 0 8px; }
.py-hero-meta { display: flex; gap: 20px; flex-wrap: wrap; }
.py-hero-meta span { font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }

/* ═══ SPECS BAR ═══ */
.py-specs-bar { background: var(--py-white); border-bottom: 1px solid var(--py-border); }
.py-specs-inner { max-width: 1120px; margin: 0 auto; padding: 0 44px; display: flex; }
.py-spec { display: flex; flex-direction: column; align-items: center; padding: 16px 32px; gap: 3px; border-right: 1px solid var(--py-border); }
.py-spec:first-child { padding-left: 0; }
.py-spec:last-child { border-right: none; }
.py-spec-val { font-size: 15px; font-weight: 600; color: var(--py-ink); white-space: nowrap; }
.py-spec-lbl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--py-muted); }

/* ═══ PAGE LAYOUT ═══ */
.py-page { max-width: 1120px; margin: 0 auto; padding: 36px 44px 80px; display: grid; grid-template-columns: 1fr 370px; gap: 44px; align-items: start; }

/* ═══ GALLERY ═══ */
.py-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 190px 190px; gap: 5px; border-radius: 10px; overflow: hidden; margin-bottom: 38px; }
.py-g-cell { overflow: hidden; cursor: pointer; position: relative; }
.py-g-main { grid-row: 1 / 3; }
.py-g-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s, filter 0.3s; filter: brightness(0.85); display: block; }
.py-g-cell:hover img { transform: scale(1.04); filter: brightness(1); }
.py-g-more { position: absolute; inset: 0; background: rgba(12,19,34,0.55); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #fff; }

/* ═══ LIGHTBOX ═══ */
.py-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
.py-lightbox.open { opacity: 1; visibility: visible; }
.py-lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; z-index: 10; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; opacity: 0.7; }
.py-lb-close:hover { opacity: 1; }
.py-lb-stage { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.py-lb-stage img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 4px; user-select: none; }
.py-lb-prev, .py-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; z-index: 10; }
.py-lb-prev { left: 20px; }
.py-lb-next { right: 20px; }
.py-lb-prev:hover, .py-lb-next:hover { background: rgba(255,255,255,0.18); }
.py-lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; }

@media (max-width: 820px) {
  .py-lb-prev, .py-lb-next { width: 38px; height: 38px; }
  .py-lb-prev { left: 10px; }
  .py-lb-next { right: 10px; }
}

/* ═══ SECTION TITLES ═══ */
.py-section-title { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--py-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.py-section-title::after { content: ''; flex: 1; height: 1px; background: var(--py-border); }

/* ═══ DURATION — FEATURED ═══ */
.py-dur-hero { border: 2px solid var(--py-teal); border-radius: var(--py-radius); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; background: var(--py-teal-l); margin-bottom: 10px; cursor: pointer; }
.py-dur-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--py-teal); border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.py-dur-hero-title { font-size: 18px; font-weight: 600; color: var(--py-ink); }
.py-dur-hero-sub { font-size: 12px; color: var(--py-muted); margin-top: 3px; }
.py-dur-hero-right { text-align: right; }
.py-dur-from { font-size: 10px; color: var(--py-muted); margin-bottom: 2px; }
.py-dur-big-price { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 400; color: var(--py-ink); }
.py-dur-cta { font-size: 11px; font-weight: 600; color: var(--py-teal); margin-top: 4px; letter-spacing: 0.06em; }

/* ═══ DURATION — GRID ═══ */
.py-dur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 34px; }
.py-dur-card { border: 1px solid var(--py-border); border-radius: var(--py-radius); padding: 15px 16px; cursor: pointer; background: var(--py-white); transition: border-color 0.16s, background 0.16s; }
.py-dur-card:hover, .py-dur-card.active { border-color: var(--py-teal); background: var(--py-teal-l); }
.py-dur-hrs { font-size: 15px; font-weight: 600; color: var(--py-ink); }
.py-dur-sub { font-size: 11px; color: var(--py-muted); margin: 3px 0 8px; }
.py-dur-price { font-size: 16px; font-weight: 600; color: var(--py-teal); }

/* ═══ INCLUDED ═══ */
.py-included { background: var(--py-white); border: 1px solid var(--py-border); border-radius: var(--py-radius); padding: 22px; margin-bottom: 34px; }
.py-inc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.py-inc-title { font-size: 15px; font-weight: 600; color: var(--py-ink); }
.py-badge-green { display: inline-flex; align-items: center; gap: 5px; background: var(--py-green-l); border: 1px solid #b0dfc4; border-radius: 20px; padding: 3px 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--py-green); }
.py-inc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.py-inc-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--py-ink); }
.py-inc-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--py-border); font-size: 12px; color: var(--py-muted); display: flex; align-items: center; gap: 7px; }

/* ═══ ADD-ONS ═══ */
.py-addon-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.py-addon-pill { background: #F0F2F5; border-radius: 20px; padding: 3px 12px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--py-muted); }
.py-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.py-addon { border: 1px solid var(--py-border); border-radius: var(--py-radius); padding: 14px 16px; background: var(--py-white); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color 0.16s, background 0.16s; }
.py-addon:hover { border-color: var(--py-teal); }
.py-addon.on { border-color: var(--py-teal); background: var(--py-teal-l); }
.py-addon-l { display: flex; align-items: center; gap: 10px; }
.py-addon-emoji { font-size: 20px; line-height: 1; }
.py-addon-name { font-size: 13px; font-weight: 500; color: var(--py-ink); }
.py-addon-unit { font-size: 11px; color: var(--py-muted); }
.py-addon-r { display: flex; align-items: center; gap: 10px; }
.py-addon-cost { font-size: 13px; font-weight: 600; color: var(--py-ink); }
.py-chk { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--py-border); display: flex; align-items: center; justify-content: center; transition: all 0.16s; flex-shrink: 0; }
.py-addon.on .py-chk { background: var(--py-teal); border-color: var(--py-teal); }
.py-chk svg { display: none; }
.py-addon.on .py-chk svg { display: block; }

/* ═══ DESCRIPTION ═══ */
.py-description { font-size: 14px; color: var(--py-ink); line-height: 1.8; }
.py-description p { margin: 0 0 14px; }

/* ═══ BOOKING WIDGET ═══ */
.py-widget { background: var(--py-white); border: 1px solid var(--py-border); border-radius: 12px; box-shadow: var(--py-shadow); position: sticky; top: 78px; overflow: hidden; }
.py-w-head { background: var(--py-navy); padding: 22px 24px 20px; }
.py-w-from { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 3px; }
.py-w-price { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: #fff; line-height: 1; }
.py-w-price sub { font-size: 14px; color: rgba(255,255,255,0.45); font-weight: 300; vertical-align: baseline; margin-left: 6px; }
.py-w-note { font-size: 11px; color: rgba(255,255,255,0.38); margin-top: 5px; }
.py-w-steps { display: flex; border-bottom: 1px solid var(--py-border); }
.py-w-step { flex: 1; padding: 11px 6px; text-align: center; border-right: 1px solid var(--py-border); }
.py-w-step:last-child { border-right: none; }
.py-w-snum { font-size: 15px; font-weight: 700; color: var(--py-teal); }
.py-w-slbl { font-size: 10px; color: var(--py-muted); line-height: 1.3; margin-top: 1px; }
.py-w-body { padding: 20px 22px; }
.py-w-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--py-muted); display: block; margin-bottom: 6px; }

/* Mini duration — dynamic grid */
.py-w-dur-row { display: grid; gap: 5px; margin-bottom: 16px; }
.py-w-dur { border: 1px solid var(--py-border); border-radius: 6px; padding: 8px 4px; text-align: center; cursor: pointer; transition: all 0.15s; background: var(--py-white); }
.py-w-dur:hover, .py-w-dur.active { border-color: var(--py-teal); background: var(--py-teal-l); }
.py-w-dh { font-size: 12px; font-weight: 600; color: var(--py-ink); }
.py-w-dp { font-size: 10px; color: var(--py-teal); margin-top: 1px; }

/* Form fields */
.py-wf { margin-bottom: 10px; }
.py-wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.py-wf label { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--py-muted); margin-bottom: 5px; }
.py-wf input, .py-wf textarea, .py-wf select { width: 100%; border: 1px solid var(--py-border); border-radius: 6px; padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--py-ink); background: var(--py-white); outline: none; transition: border-color 0.16s; }
.py-wf input:focus, .py-wf textarea:focus { border-color: var(--py-teal); }
.py-wf input::placeholder, .py-wf textarea::placeholder { color: #B8C2CF; }
.py-wf textarea { resize: vertical; min-height: 72px; }

/* Time of day */
.py-tod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.py-tod { border: 1px solid var(--py-border); border-radius: 6px; padding: 10px 12px; cursor: pointer; transition: all 0.15s; background: var(--py-white); }
.py-tod:hover, .py-tod.active { border-color: var(--py-teal); background: var(--py-teal-l); }
.py-tod-name { font-size: 12px; font-weight: 500; color: var(--py-ink); }
.py-tod-range { font-size: 10px; color: var(--py-muted); margin-top: 1px; }
.py-tod-custom { width: 100%; border: 1px solid var(--py-border); border-radius: 6px; padding: 10px 12px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--py-ink); background: var(--py-white); outline: none; transition: border-color 0.16s; }
.py-tod-custom:focus { border-color: var(--py-teal); }
.py-tod-custom::placeholder { color: #B8C2CF; }

/* Submit */
.py-w-submit { width: 100%; margin-top: 14px; background: var(--py-teal); border: none; border-radius: var(--py-radius); padding: 14px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, transform 0.1s; }
.py-w-submit:hover { background: var(--py-teal-d); }
.py-w-submit:active { transform: scale(0.99); }
.py-w-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.py-w-disclaimer { font-size: 11px; color: var(--py-muted); text-align: center; margin-top: 10px; line-height: 1.5; display: flex; align-items: flex-start; gap: 5px; justify-content: center; }

/* Success */
.py-w-success { display: none; padding: 40px 24px; text-align: center; }
.py-success-ring { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--py-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.py-success-h { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 300; color: var(--py-ink); margin-bottom: 8px; }
.py-success-p { font-size: 12px; color: var(--py-muted); line-height: 1.8; }

/* Concierge */
.py-concierge { border-top: 1px solid var(--py-border); padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; }
.py-conc-info { display: flex; align-items: center; gap: 10px; }
.py-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,0.18); flex-shrink: 0; }
.py-conc-lbl { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--py-muted); }
.py-conc-num { font-size: 14px; font-weight: 600; color: var(--py-ink); }
.py-conc-btns { display: flex; gap: 6px; }
.py-conc-btn { border: 1px solid var(--py-border); border-radius: 6px; padding: 8px 12px; font-size: 12px; font-weight: 500; cursor: pointer; background: var(--py-white); color: var(--py-ink); display: flex; align-items: center; gap: 5px; transition: all 0.16s; text-decoration: none; }
.py-conc-btn:hover { border-color: var(--py-teal); color: var(--py-teal); }
.py-conc-btn.py-wa:hover { border-color: #25D366; color: #25D366; }

/* Toast */
.py-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--py-ink); color: #fff; padding: 12px 22px; border-radius: 6px; font-size: 13px; opacity: 0; transition: all 0.25s; z-index: 999; }
.py-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 820px) {
  .py-page { grid-template-columns: 1fr; padding: 24px 20px 60px; gap: 32px; }
  .py-widget { position: static; }
  .py-specs-inner { flex-wrap: wrap; padding: 0 20px; }
  .py-spec { padding: 12px 16px; }
  .py-hero { height: 380px; }
  .py-hero-bottom { left: 20px; right: 20px; bottom: 28px; }
  .py-hero-top { left: 16px; right: 16px; }
  .py-hero-title { font-size: 28px; }
  .py-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .py-g-main { grid-column: 1 / -1; grid-row: auto; height: 220px; }
  .py-g-cell { height: 140px; }
  .py-dur-grid { grid-template-columns: 1fr 1fr; }
  .py-dur-hero { flex-direction: column; gap: 14px; text-align: center; }
  .py-dur-hero-right { text-align: center; }
  .py-addon-grid { grid-template-columns: 1fr; }
  .py-addon-subhead { flex-direction: column; gap: 8px; align-items: flex-start; }
  .py-inc-grid { grid-template-columns: 1fr; }
  .py-w-dur-row { grid-template-columns: repeat(3, 1fr) !important; }
  .py-conc-btns { flex-direction: column; gap: 4px; }
}