/* =====================================================================
   Product detail page — mockup "attraction detail" layout and theme.
   Loaded after product.css; selectors are prefixed with body to win.
   ===================================================================== */

body #product { background: var(--ot-bg); }
body #product .page-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 28px 80px; }

/* Breadcrumb as in the mockup */
body #product nav[aria-label="Breadcrumb navigation"] { padding: 0; margin: 0 0 18px; max-width: none; }
body #product .breadcrumb { font-size: 13px; color: var(--ot-muted); gap: 4px; }
body #product .breadcrumb a { color: var(--ot-brand); font-weight: 600; text-decoration: none; }
body #product .breadcrumb a:hover { text-decoration: underline; }
body #product .breadcrumb .active { color: var(--ot-muted); }

/* ---------- Two-column layout ---------- */
body #product .detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
body #product .detail-main { min-width: 0; }
body #product .detail-side { min-width: 0; position: sticky; top: 84px; }
@media (max-width: 991.98px) {
    body #product .detail { grid-template-columns: 1fr; }
    body #product .detail-side { position: static; }
}

/* ---------- Hero card (gallery + title + meta) ---------- */
body #product .hero {
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow); overflow: hidden; padding: 0; margin: 0 0 18px;
}
body #product .hero-grid { gap: 8px; padding: 10px; }
body #product .hero-main, body #product .hero-thumb { border-radius: 8px; overflow: hidden; background: var(--ot-bg); }
body #product .hero-main img, body #product .hero-thumb img { object-fit: cover; }
body #product .hero-thumb { border: 2px solid transparent; transition: border-color .15s, transform .15s; }
body #product .hero-thumb:hover { border-color: var(--ot-brand); }
body #product .see-all-overlay { border-radius: 6px; font-weight: 600; }

/* Mockup "detail-hero": banner, thumbnail strip, body */
/* Not clipped, so the "Opening hours" list can drop below the card; the banner rounds its own top corners */
body #product .detail-hero { overflow: visible; }
body #product .detail-hero .detail-banner { height: 260px; background: var(--ot-bg); cursor: zoom-in; overflow: hidden; border-radius: var(--ot-radius) var(--ot-radius) 0 0; }
body #product .detail-hero .detail-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
body #product .detail-hero .gallery-thumbs {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--ot-card); border-bottom: 1px solid var(--ot-line);
}
body #product .detail-hero .gthumb {
    width: 78px; height: 54px; border-radius: 8px; padding: 0; overflow: hidden; flex-shrink: 0; cursor: pointer;
    border: 2px solid transparent; background: var(--ot-bg); transition: border-color .15s, transform .15s;
}
body #product .detail-hero .gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body #product .detail-hero .gthumb:hover { transform: scale(1.05); }
body #product .detail-hero .gthumb.active { border-color: var(--ot-brand); }
body #product .detail-hero .gallery-hint { font-size: 11.5px; color: var(--ot-muted); margin-left: auto; cursor: pointer; }
body #product .detail-hero .gallery-hint:hover { color: var(--ot-brand); text-decoration: underline; }
body #product .detail-body { padding: 22px; }
body #product .detail-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
body #product .detail-body .hero-product-title { margin: 0 0 6px; }
body #product .detail-where { font-size: 13.5px; color: var(--ot-muted); margin-bottom: 10px; }
body #product .detail-desc { font-size: 14.5px; line-height: 1.6; color: #3a3e52; margin: 12px 0 0; }
body #product .feature-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
body #product .feature {
    background: var(--ot-bg); border: 1px solid var(--ot-line); border-radius: 10px; padding: 8px 12px;
    font-size: 12.5px; font-weight: 600; color: var(--ot-ink); text-decoration: none;
}
body #product .feature-link:hover { border-color: var(--ot-brand); color: var(--ot-brand); }
body #product .detail-body .info-rows { margin-top: 14px; }
body #product .detail-also { margin-top: 22px; }
body #product .detail-also-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ot-muted); margin-bottom: 10px;
}
body #product .detail-also-list { display: flex; gap: 8px; flex-wrap: wrap; }
body #product .detail-also-btn {
    background: #fff; color: var(--ot-brand); border: 1.5px solid #f3c2c4; border-radius: 12px;
    padding: 8px 16px; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .15s, background .15s;
}
body #product .detail-also-btn:hover { background: var(--ot-brand-light); border-color: var(--ot-brand); color: var(--ot-brand); }
@media (max-width: 640px) { body #product .detail-hero .detail-banner { height: 200px; } body #product .detail-body { padding: 18px; } }

body #product .hero-product-title {
    font-size: 24px; font-weight: 600; color: var(--ot-ink); margin: 16px 22px 6px; letter-spacing: -.01em;
}
body #product .detail-body .hero-meta { margin: 0; padding: 0; }
body #product .hero-meta { margin: 0 22px 0; padding: 0 0 16px; font-size: 13.5px; color: var(--ot-muted); border-bottom: none; }
body #product .rating-badge { background: #fdf0da; color: #b36d05; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12px; }
body #product .hero-meta-action { color: var(--ot-muted); font-size: 13px; }
body #product .hero-meta-action:hover { color: var(--ot-brand); }

/* Location / intro list below the title */
body #product .hero .info-list, body #product .hero .hero-info { margin: 0 22px 18px; padding: 14px 0 0; border-top: 1px dashed var(--ot-line); }

/* ---------- Content cards (Highlights, About, Reviews, FAQ, T&C, also like) ---------- */
body #product .section-block,
body #product #customerReviews {
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow); padding: 22px; margin: 0 0 18px; max-width: none;
}
body #product .section-block > h2,
body #product #customerReviews h2,
body #product h2 { color: var(--ot-ink) !important; font-size: 19px; font-weight: 600; margin-bottom: 12px; }
body #product .section-block p, body #product .desc-preview { font-size: 14.5px; line-height: 1.6; color: #3a3e52; }
body #product .highlight-row { font-size: 14px; color: #3a3e52; padding: 6px 0; }
body #product .highlight-row i { color: var(--ot-teal); }
body #product .btn-link { color: var(--ot-brand); font-weight: 600; font-size: 13px; }
body #product .faq-q { font-weight: 600; font-size: 14.5px; color: var(--ot-ink); }
body #product .faq-a { font-size: 14px; color: #3a3e52; }
body #product .tnc-toggle { color: var(--ot-brand); font-weight: 600; }
body #product .yml-heading { font-size: 19px; margin-top: 0; }
/* Reviews header: same size as the other section titles (Bootstrap fs-3/fs-2/fw-bold use !important) */
body #product #customerReviews > h2 { font-size: 19px !important; font-weight: 600 !important; margin-bottom: 12px !important; }
body #product #ratingAggregateSection { gap: 10px !important; margin-bottom: 16px !important; }
body #product #avgRatingValue { font-size: 20px !important; font-weight: 700 !important; line-height: 1; }
body #product #avgStars svg { width: 16px; height: 16px; }
body #product #totalReviewsText { font-size: 13px; }
/* Review cards (preview list + All reviews drawer) in the mockup type scale; !important beats the inline styles set in product.js */
body .review-card, body .all-review-card { border: 1px solid var(--ot-line) !important; border-radius: 12px !important; padding: 16px !important; background: #fff; }
body .review-card:hover, body .all-review-card:hover { border-color: #f3c2c4 !important; }
body .review-card .rounded-circle, body .all-review-card .rounded-circle { width: 36px !important; height: 36px !important; font-size: 14px !important; }
body .review-card .fw-semibold, body .all-review-card .fw-semibold { font-size: 14px !important; font-weight: 600 !important; color: var(--ot-ink) !important; }
body .review-card small.text-muted, body .all-review-card small.text-muted { font-size: 12px !important; color: var(--ot-muted) !important; }
body .review-card .text-secondary, body .all-review-card .text-secondary { font-size: 13.5px !important; line-height: 1.6 !important; color: #3a3e52 !important; }
/* Rating chip: amber star + score, like the mockup rating line */
body .review-card .rounded:not(.rounded-circle):not(.review-card), body .all-review-card > div > span.rounded {
    background: #fef3c7 !important; color: #b45309 !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px !important; padding: 3px 8px !important;
}
body .review-card .rounded:not(.rounded-circle):not(.review-card)::before, body .all-review-card > div > span.rounded::before { content: "\2605"; margin-right: 4px; color: var(--ot-amber); }

/* ---------- Ticket picker (main column, under About) ---------- */
body #product .packages-section {
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow); padding: 22px; margin: 0 0 18px;
}
body #product .packages-section > h2 { font-size: 19px; margin-bottom: 14px; }
/* 2026-10-28: the ticket picker stands out from the other cards: brand-coloured title and border */
body #product #packages-section { border: 2px solid var(--ot-brand, #e31e24) !important; box-shadow: 0 6px 22px rgba(227,30,36,.10); }
body #product #packages-section > h2#ticket-selection { color: var(--ot-brand, #e31e24) !important; }
/* Coming soon (no price): no ticket list, "from" price or buttons, just the note */
body #product #packages-section.is-coming-soon { border: 1px solid var(--ot-line) !important; box-shadow: var(--ot-shadow); }
body #product .packages-section.is-coming-soon #fromPriceBlock,
body #product .packages-section.is-coming-soon #priceAndIcon > form,
body #product .packages-section.is-coming-soon > *:not(h2):not(#priceAndIcon):not(.pkg-soon) { display: none !important; }
/* Other outlets as chips at the top of the ticket picker (2026-10-29) */
body #product .pkg-outlets { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ot-line); }
/* Phones: one row of chips that swipes sideways instead of a tall stack */
@media (max-width: 575.98px) {
    body #product .pkg-outlets .detail-also-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    body #product .pkg-outlets .detail-also-list::-webkit-scrollbar { display: none; }
    body #product .pkg-outlets .detail-also-btn { flex: 0 0 auto; white-space: nowrap; }
}
body #product .pkg-soon { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #fef3c7; color: #92400e; font-size: 13.5px; line-height: 1.5; }
body #product .pkg-soon i { font-size: 16px; }

/* ---------- Summary card (right column) ---------- */
body #product .side-cta {
    background: var(--ot-card); border: 1px solid var(--ot-line); border-radius: var(--ot-radius);
    box-shadow: var(--ot-shadow); padding: 20px;
}
body #product .side-cta-head { display: flex; gap: 12px; align-items: center; }
body #product .side-cta-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--ot-bg); }
body #product .side-cta-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body #product .side-cta-info { min-width: 0; }
body #product .side-cta-title { font-size: 15px; font-weight: 600; color: var(--ot-ink); line-height: 1.3; }
body #product .side-cta-where { font-size: 12.5px; color: var(--ot-muted); margin-top: 3px; }
body #product .side-cta-price { margin: 16px 0 12px; display: flex; align-items: baseline; gap: 6px; }
body #product .side-cta-price .from { font-size: 13px; color: var(--ot-muted); }
body #product .side-cta-price b { font-size: 24px; font-weight: 600; color: var(--ot-brand); }
body #product .side-cta-btn {
    width: 100%; background: var(--ot-grad); color: #fff; border: none; border-radius: 12px; padding: 13px;
    font-size: 15px; font-weight: 600; box-shadow: 0 5px 14px rgba(227,30,36,.25); cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
body #product .side-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(227,30,36,.32); }
body #product .side-cta-points { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px dashed var(--ot-line); }
body #product .side-cta-points li { font-size: 12.5px; color: var(--ot-muted); padding: 3px 0; display: flex; gap: 8px; align-items: center; }
body #product .side-cta-points i { color: var(--ot-teal); }

/* The side card replaces the bottom sticky bar on desktop; phones keep the bar */
@media (min-width: 992px) { body #product .sticky-cta { display: none !important; } }
@media (max-width: 991.98px) { body #product .detail-side { display: none; } }
/* The bar is always on screen on phones: leave room so the end of the page can scroll above it */
@media (max-width: 991.98px) { body:has(#sticky-cta) { padding-bottom: 72px; } }
body #product .packages-section .pricing-box { background: transparent; border: none; padding: 0 !important; margin: 0; box-shadow: none; }
body #product .pricing-box h5 { font-size: 14.5px; font-weight: 600; color: var(--ot-ink); }
body #product .pricing-box .price-detail { font-size: 12.5px; color: var(--ot-muted); }
body #product .pkg-price { font-size: 18px; font-weight: 600; color: var(--ot-brand); }
body #product .pkg-price-from { font-size: 11px; color: var(--ot-muted); text-transform: uppercase; letter-spacing: .05em; }
body #product .pkg-price-original { font-size: 12px; color: #b6bac8; text-decoration: line-through; }
body #product .packages-section .container { padding: 0; margin: 14px 0 !important; max-width: none; }
body #product .packages-section h5.fw-bold,
body #product .packages-section .fs-5 { font-size: 12px !important; font-weight: 600 !important; color: var(--ot-muted); text-transform: uppercase; letter-spacing: .05em; }

/* Combo cards and ticket rows inside the panel */
body #product .combo-card { border: 1.5px solid var(--ot-line); border-radius: 12px; }
body #product .combo-card-header { padding: 10px 12px; }
body #product .combo-product-name { font-weight: 600; font-size: 13.5px; }

/* Subtotal + buttons */
body #product #ctaBar { border-top: 1px solid var(--ot-line); margin-top: 14px; padding-top: 14px; }
body #product #ctaBar > .d-flex { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
/* Wide main column: subtotal on the left, buttons side by side on the right */
@media (min-width: 768px) {
    body #product #ctaBar > .d-flex { flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; }
    body #product .tt-subtotal { margin-right: auto !important; gap: 16px; }
    body #product #add-to-cart { flex-direction: row !important; }
    body #product #add-to-cart .customBtnPrimary,
    body #product #add-to-cart .customBtn-primary { width: auto; min-width: 170px; order: 2; }
    body #product #add-to-cart .customBtn-cart { width: auto; min-width: 150px; order: 1; }
}
body #product .tt-subtotal { display: flex; justify-content: space-between; align-items: center; margin: 0 !important; }
body #product .tt-subtotal-label { font-size: 14px; color: var(--ot-ink); }
body #product .tt-subtotal-pax { font-size: 12px; color: var(--ot-muted); margin-left: 6px; }
body #product .tt-subtotal-amount { font-size: 18px; font-weight: 600; color: var(--ot-brand); }
body #product #add-to-cart { display: flex; flex-direction: column !important; gap: 8px !important; }
body #product #add-to-cart .customBtnPrimary,
body #product #add-to-cart .customBtn-primary {
    width: 100%; order: 1; margin: 0; background: var(--ot-grad); color: #fff; border: none; border-radius: 12px;
    padding: 13px; font-size: 15px; font-weight: 600; box-shadow: 0 5px 14px rgba(227,30,36,.25);
    transition: transform .15s, box-shadow .15s;
}
body #product #add-to-cart .customBtnPrimary:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(227,30,36,.32); }
body #product #add-to-cart .customBtn-cart {
    width: 100%; order: 2; margin: 0; height: auto; background: #fff; color: var(--ot-brand); border: 1.5px solid #f3c2c4;
    border-radius: 12px; padding: 11px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body #product #add-to-cart .customBtn-cart::after { content: "Add to cart"; }
body #product #add-to-cart .customBtn-cart:hover { background: var(--ot-brand-light); border-color: var(--ot-brand); }

/* 2026-10-28: one row at every width: subtotal on the left, buttons on the right. "Add to cart" keeps its
   text when the ticket box has room, otherwise it becomes a square cart icon (container query on #ctaBar). */
body #product #ctaBar { container-type: inline-size; }
body #product #ctaBar > .d-flex { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
body #product #ctaBar .tt-subtotal { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; margin-right: auto !important; min-width: 0; padding: 0 !important; }
body #product .tt-subtotal-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
body #product .tt-subtotal-pax { margin-left: 0; white-space: nowrap; }
body #product .tt-subtotal-amount { font-size: 19px; line-height: 1.2; white-space: nowrap; }
body #product #add-to-cart { flex-direction: row !important; align-items: stretch; flex: 0 0 auto; margin-left: auto; gap: 8px !important; }
body #product #add-to-cart .customBtnPrimary,
body #product #add-to-cart .customBtn-primary { width: auto; min-width: 0; padding: 12px 22px; order: 2; white-space: nowrap; }
body #product #add-to-cart .customBtn-cart { width: 48px; min-width: 48px; padding: 0; order: 1; font-size: 20px; }
body #product #add-to-cart .customBtn-cart::after { content: none; }
@container (min-width: 560px) {
    body #product #add-to-cart .customBtn-cart { width: auto; min-width: 150px; padding: 11px 16px; font-size: 14px; }
    body #product #add-to-cart .customBtn-cart::after { content: "Add to cart"; }
    body #product #add-to-cart .customBtnPrimary,
    body #product #add-to-cart .customBtn-primary { min-width: 170px; }
}
@container (max-width: 340px) {
    body #product #add-to-cart .customBtnPrimary,
    body #product #add-to-cart .customBtn-primary { padding: 12px 16px; }
    body #product .tt-subtotal-amount { font-size: 17px; }
}

/* ---------- Sticky bottom bar on mobile ---------- */
/* 2026-11-06: where the bottom bar shows, it is the Buy Now (js/product.js); the box keeps the subtotal and Add to Cart */
@media (max-width: 991.98px) {
    body:has(#sticky-cta-btn) #product #add-to-cart .tt-buy-now { display: none; }
    body:has(#sticky-cta-btn) #product #add-to-cart .customBtn-cart { flex: none; width: auto; min-width: 0; height: 46px; padding: 0 14px; gap: 6px; font-size: 14px; white-space: nowrap; }
    body:has(#sticky-cta-btn) #product #add-to-cart .customBtn-cart::after { content: "Add to cart"; }
}
body #product .sticky-cta { border-top: 1px solid var(--ot-line); box-shadow: 0 -8px 26px rgba(30,33,48,.1); }
body #product .sticky-cta-title { font-weight: 600; color: var(--ot-ink); }
body #product .sticky-cta-price { color: var(--ot-brand); font-weight: 600; }
body #product .sticky-cta-btn { background: var(--ot-grad); border: none; border-radius: 12px; font-weight: 600; box-shadow: 0 4px 12px rgba(227,30,36,.22); }

/* ---------- Gallery lightbox ---------- */
body #product .modal-card { border-radius: 18px; }

/* ---------- Side drawer modal (e.g. "See More" description) ----------
   Desktop/tablet: full-height panel sliding in from the right.
   Phones: bottom sheet sliding up from the bottom. */
html body .modal.ot-drawer { padding: 0 !important; }
html body .modal.ot-drawer .modal-dialog {
    position: fixed; top: 0; right: 0; bottom: 0; margin: 0;
    width: min(520px, 100%); max-width: none; height: 100%; max-height: none;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
}
html body .modal.ot-drawer.show .modal-dialog { transform: none; }
html body .modal.ot-drawer .modal-content {
    height: 100%; max-height: none; border: 0; border-radius: 18px 0 0 18px;
    box-shadow: -12px 0 32px rgba(30,33,48,.18);
}
html body .modal.ot-drawer .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--ot-line); align-items: flex-start; gap: 12px; }
html body .modal.ot-drawer .modal-title { font-size: 18px !important; line-height: 1.35; margin: 0; }
html body .modal.ot-drawer .modal-body { padding: 20px 22px 28px; font-size: 14.5px; line-height: 1.7; color: var(--ot-ink); overflow-y: auto; }
html body .modal.ot-drawer .modal-body p:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    html body .modal.ot-drawer .modal-dialog {
        top: auto; left: 0; width: 100%; height: auto; max-height: 85vh;
        transform: translateY(100%);
    }
    html body .modal.ot-drawer.show .modal-dialog { transform: none; }
    html body .modal.ot-drawer .modal-content {
        height: auto; max-height: 85vh; border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 32px rgba(30,33,48,.18);
    }
    /* grab handle */
    html body .modal.ot-drawer .modal-header { position: relative; padding-top: 24px; }
    html body .modal.ot-drawer .modal-header::before {
        content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 4px; background: #d5d8e2;
    }
    html body .modal.ot-drawer .modal-body { padding: 16px 18px 24px; }
}
/* Coming soon product: note instead of the Select options button */
body #product .side-cta-soon { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: #fef3c7; color: #92400e; font-size: 13.5px; line-height: 1.5; }
body #product .side-cta-soon i { font-size: 16px; }