/* ===================================================== Product Catalog – Frontend Styles v1.14.21 Tone: Modern / Friendly Tech — soft rounded UI with a blue → orange brand duotone used for gradients Palette: Navy #0A3A5C · Blue #0085D8 · Sky #33B1FF · Orange #FF8C36 · Gray #8B919C Fonts: Plus Jakarta Sans (UI) + JetBrains Mono (technical accents) ===================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ─── TOKENS ─────────────────────────────────────── */ :root { --pc-navy: #0A3A5C; --pc-blue: #0085D8; --pc-sky: #33B1FF; --pc-copper: #FF8C36; --pc-gray: #8B919C; --pc-red: #B23A2E; --pc-text: var(--pc-navy); --pc-text-2: rgba(10,58,92,.68); --pc-text-3: var(--pc-gray); --pc-border: rgba(139,145,156,.32); --pc-border-strong: rgba(139,145,156,.55); --pc-white: #ffffff; --pc-bg: #F6F8FA; --pc-bg-2: #ECEFF3; --pc-tint: rgba(0,133,216,.06); --pc-tint-strong: rgba(0,133,216,.10); --pc-copper-tint: rgba(255,140,54,.10); --pc-red-tint: rgba(178,58,46,.08); /* Brand gradients — blue → sky for most UI accents, blue → orange duotone reserved for standout CTAs/badges */ --pc-gradient-primary: linear-gradient(135deg, var(--pc-blue) 0%, var(--pc-sky) 100%); --pc-gradient-primary-hover: linear-gradient(135deg, var(--pc-navy) 0%, var(--pc-blue) 100%); --pc-gradient-accent: linear-gradient(135deg, var(--pc-blue) 0%, var(--pc-copper) 100%); --pc-gradient-warm: linear-gradient(135deg, var(--pc-copper) 0%, #FFB067 100%); --pc-radius-sm: 5px; --pc-radius: 5px; --pc-radius-lg: 5px; --pc-shadow-sm: 0 1px 2px rgba(10,58,92,.05); --pc-shadow: 0 14px 36px rgba(10,58,92,.09); --pc-shadow-lg: 0 26px 56px rgba(10,58,92,.16); --pc-trans: .22s ease; --pc-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --pc-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; } /* ─── GLOBAL BUTTON RESET — prevents any "stuck" visual state after a click/tap: kills native focus rings, Firefox's ::-moz-focus-inner dotted border, and forces :hover styling to be mouse-only (touch devices trigger :hover on tap and it stays "stuck" until tapping elsewhere — this is the actual bug reported). ── */ .pc-btn-primary, .pc-btn-ghost, .pc-swiper-btn, .pc-related-nav, .pc-booking-step, .pc-booking-submit, .pc-acc-trigger { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .pc-btn-primary::-moz-focus-inner, .pc-btn-ghost::-moz-focus-inner, .pc-swiper-btn::-moz-focus-inner, .pc-related-nav::-moz-focus-inner, .pc-booking-step::-moz-focus-inner, .pc-booking-submit::-moz-focus-inner, .pc-acc-trigger::-moz-focus-inner { border: 0; padding: 0; } .pc-btn-primary:focus, .pc-btn-primary:focus-visible, .pc-btn-ghost:focus, .pc-btn-ghost:focus-visible, .pc-swiper-btn:focus, .pc-swiper-btn:focus-visible, .pc-related-nav:focus, .pc-related-nav:focus-visible, .pc-booking-step:focus, .pc-booking-step:focus-visible, .pc-booking-submit:focus, .pc-booking-submit:focus-visible, .pc-acc-trigger:focus, .pc-acc-trigger:focus-visible { outline: none !important; box-shadow: none !important; } /* ─── ICONS (Lucide renders inline level instead of on .pc-page-wrap itself — overflow-x on .pc-page-wrap (or any ancestor between .pc-gallery-col and the viewport) creates a clipping context that silently breaks `position: sticky` on the gallery column. */ body.pc-has-page-wrap { overflow-x: hidden; } .pc-page-wrap .inside-article, .pc-page-wrap .entry-content { max-width: none; padding: 0; margin: 0; } .pc-container { max-width: 1340px; margin: 0 auto; padding: 32px 24px 64px; } /* ─── BREADCRUMB ─────────────────────────────────── */ .pc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--pc-text-3); margin-bottom: 32px; font-family: var(--pc-font); } .pc-breadcrumb a { display: inline-flex; align-items: center; color: var(--pc-blue); text-decoration: none; font-weight: 500; transition: color var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-breadcrumb a:hover { color: var(--pc-navy); text-decoration: underline; } } .pc-bc-sep { font-size: 10px; width: .7em; height: .7em; color: var(--pc-border-strong); flex-shrink: 0; } .pc-breadcrumb span { color: var(--pc-text-2); font-weight: 500; } /* ─── ARCHIVE HERO (the one deliberate dark moment) ── */ .pc-archive-hero { background: linear-gradient(150deg, var(--pc-navy) 0%, var(--pc-blue) 65%, var(--pc-sky) 130%); border-radius: var(--pc-radius-lg); padding: 64px 40px; margin-bottom: 40px; text-align: center; position: relative; overflow: hidden; border: 1px solid rgba(255,140,54,.30); } /* Circuit-trace overlay pattern */ .pc-archive-hero__circuit { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(90deg, rgba(51,177,255,.12) 1px, transparent 1px), linear-gradient(0deg, rgba(51,177,255,.12) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%); } .pc-archive-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--pc-copper) 50%, transparent); } /* Corner brackets — engraved-plate signature */ .pc-archive-hero__inner { position: relative; z-index: 1; padding: 28px 34px; border-top: 1px solid rgba(255,140,54,.45); border-bottom: 1px solid rgba(255,140,54,.45); } .pc-archive-hero__icon { width: 58px; height: 58px; background: rgba(51,177,255,.12); border: 1px solid rgba(255,140,54,.5); border-radius: var(--pc-radius); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 22px; color: var(--pc-sky); } .pc-archive-hero__title { font-family: var(--pc-font); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; font-style: normal; color: #fff; margin: 0 0 10px; letter-spacing: -.02em; } .pc-archive-hero__desc { color: rgba(255,255,255,.68); margin: 0; font-size: 15px; font-family: var(--pc-font); letter-spacing: .01em; } /* ─── FULL-BLEED IMAGE HERO (category cover image) ── */ /* Compound selector (.pc-archive-hero.pc-archive-hero--image) so this always wins over the plain .pc-archive-hero responsive rules further down the file, regardless of source order / media queries. */ .pc-archive-hero.pc-archive-hero--image { padding: 0; border-radius: 0; border: none; margin: 0 0 40px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 380px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-repeat: no-repeat; } .pc-archive-hero.pc-archive-hero--image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,30,.05) 0%, rgba(6,16,30,.25) 45%, rgba(6,16,30,.78) 100%); } .pc-archive-hero.pc-archive-hero--image::after { display: block; content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--pc-gradient-primary); } .pc-archive-hero.pc-archive-hero--image .pc-archive-hero__inner { border: none; padding: 40px clamp(24px, 6vw, 64px) 44px; width: 100%; text-align: left; max-width: 1340px; margin: 0 auto; box-sizing: border-box; } .pc-archive-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 10px; border-radius: 100px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-family: var(--pc-font); margin-bottom: 16px; } .pc-archive-hero__eyebrow i, .pc-archive-hero__eyebrow svg.lucide { width: 13px; height: 13px; color: var(--pc-sky); } .pc-archive-hero.pc-archive-hero--image .pc-archive-hero__title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .pc-archive-hero.pc-archive-hero--image .pc-archive-hero__desc { max-width: 640px; text-shadow: 0 1px 10px rgba(0,0,0,.3); } /* Flush the image hero right up against the theme header — GeneratePress. Scoped to body.pc-hero-flush (only added when a cover image is set), so pages using the default gradient hero are unaffected. */ body.pc-hero-flush #content, body.pc-hero-flush .site-content, body.pc-hero-flush .container, body.pc-hero-flush .inside-article, body.pc-hero-flush .entry-content { padding-top: 0 !important; margin-top: 0 !important; } body.pc-hero-flush .pc-page-wrap { margin-top: 0; } /* Trim only the few px of overflow caused by the vertical scrollbar's width being included in 100vw — done at the level (not on .pc-page-wrap or any inner wrapper) so the hero can still visually escape the theme's centered container and reach the real viewport edges before anything clips it. */ body.pc-hero-flush { overflow-x: hidden; } /* ─── PRODUCT GRID ───────────────────────────────── */ .pc-grid { display: grid; gap: 30px; } .pc-grid--2 { grid-template-columns: repeat(2, 1fr); } .pc-grid--3 { grid-template-columns: repeat(3, 1fr); } .pc-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ─── PRODUCT CARD ───────────────────────────────── */ .pc-card { position: relative; background: var(--pc-white); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(10,58,92,.07), 0 1px 2px rgba(10,58,92,.05); border: 1px solid rgba(139,145,156,.16); display: flex; flex-direction: column; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; font-family: var(--pc-font); } .pc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pc-gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 2; } @media (hover: hover) and (pointer: fine) { .pc-card:hover::before { transform: scaleX(1); } } @media (hover: hover) and (pointer: fine) { .pc-card:hover { box-shadow: 0 20px 40px rgba(10,58,92,.16), 0 6px 14px rgba(10,58,92,.08); transform: translateY(-6px); border-color: rgba(0,133,216,.3); } } .pc-card__img-wrap { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--pc-tint); position: relative; } .pc-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.25,.8,.25,1); } @media (hover: hover) and (pointer: fine) { .pc-card:hover .pc-card__img-wrap img { transform: scale(1.08); } } .pc-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,58,92,0) 40%, rgba(10,58,92,.5) 100%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--pc-trans); font-size: 22px; color: #fff; } .pc-card__overlay i, .pc-card__overlay svg.lucide { width: 38px; height: 38px; padding: 10px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); transform: scale(.85); transition: transform var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-card:hover .pc-card__overlay { opacity: 1; } .pc-card:hover .pc-card__overlay i, .pc-card:hover .pc-card__overlay svg.lucide { transform: scale(1); } } .pc-card__no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pc-tint) 0%, var(--pc-tint-strong) 100%); } .pc-card__no-img i, .pc-card__no-img svg.lucide { width: 46px; height: 46px; padding: 12px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--pc-blue); opacity: .55; } .pc-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 12px; } .pc-card__name { font-size: 16px; font-weight: 700; margin: 0; line-height: 1.4; color: var(--pc-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc-card__name a { color: inherit; text-decoration: none; transition: color var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-card__name a:hover { color: var(--pc-blue); } } .pc-card__excerpt { font-size: 13px; color: var(--pc-text-3); margin: 0; line-height: 1.55; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pc-card__meta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .pc-card__duration, .pc-card__location { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px 4px 6px; border-radius: 100px; font-size: 11.5px; font-weight: 700; font-family: var(--pc-font); letter-spacing: .01em; min-width: 0; } .pc-card__duration { background: var(--pc-tint-strong); color: var(--pc-blue); } .pc-card__location { background: var(--pc-copper-tint); color: #C06A1F; } .pc-card__duration i, .pc-card__location i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; font-size: 10px; line-height: 1; } .pc-card__duration i { color: var(--pc-white); background: var(--pc-blue); } .pc-card__location i { color: var(--pc-white); background: #C06A1F; } .pc-card__location span, .pc-card__location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .pc-card__duration, .pc-card__location { transition: transform var(--pc-trans), box-shadow var(--pc-trans); } .pc-card:hover .pc-card__duration, .pc-card:hover .pc-card__location { box-shadow: var(--pc-shadow-sm); } } .pc-card__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: auto; padding: 11px 18px; background: var(--pc-gradient-primary); color: #fff; font-size: 13.5px; font-weight: 700; font-family: var(--pc-font); letter-spacing: .01em; text-decoration: none; border-radius: 5px; box-shadow: 0 4px 16px rgba(0,133,216,.28); transition: box-shadow var(--pc-trans), transform var(--pc-trans), gap var(--pc-trans), background var(--pc-trans); -webkit-tap-highlight-color: transparent; } .pc-card__btn [data-lucide], .pc-card__btn svg.lucide { width: 15px; height: 15px; } @media (hover: hover) and (pointer: fine) { .pc-card__btn:hover { background: var(--pc-gradient-primary-hover); box-shadow: 0 8px 22px rgba(0,133,216,.4); transform: translateY(-2px); gap: 11px; color: #fff; } } .pc-card__btn:active { transform: translateY(0); } /* ─── PAGINATION ─────────────────────────────────── */ .pc-pagination { margin-top: 44px; text-align: center; } .pc-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pc-radius-sm); border: 1.5px solid var(--pc-border); color: var(--pc-text-2); text-decoration: none; font-size: 14px; font-weight: 600; margin: 0 3px; transition: var(--pc-trans); font-family: var(--pc-font-mono); } .pc-pagination .page-numbers.current { background: var(--pc-blue); border-color: var(--pc-blue); color: #fff; box-shadow: 0 2px 10px rgba(0,133,216,.32); } @media (hover: hover) and (pointer: fine) { .pc-pagination .page-numbers:hover { background: var(--pc-blue); border-color: var(--pc-blue); color: #fff; box-shadow: 0 2px 10px rgba(0,133,216,.32); } } /* ─── EMPTY ──────────────────────────────────────── */ .pc-empty { text-align: center; padding: 80px 40px; color: var(--pc-text-3); } .pc-empty [data-lucide], .pc-empty svg.lucide { font-size: 48px; display: block; margin: 0 auto 16px; color: var(--pc-blue); opacity: .3; } .pc-empty p { margin: 0; font-size: 16px; font-family: var(--pc-font); } /* ─── BOOKING PAGE (CF7 form + booking detail) ────── .pc-booking-page-wrap reuses the existing .pc-page-wrap / .pc-container (full-width, no sidebar) to stay consistent with the plugin's other pages. Radius tokens are set locally here too (same 5px as the base site) so this block stays self-contained if the global radius ever changes again. ─────────────────────────────────────────────────── */ .pc-booking-page-wrap { --pc-radius-sm: 5px; --pc-radius: 5px; --pc-radius-lg: 5px; } .pc-booking-page { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; } .pc-booking-page__heading { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; color: var(--pc-text); letter-spacing: -.01em; margin: 0 0 24px; font-family: var(--pc-font); } .pc-booking-page__heading [data-lucide], .pc-booking-page__heading svg.lucide { width: 24px; height: 24px; color: var(--pc-blue); flex-shrink: 0; } /* Card wrapping the entire CF7 form, styled to match the summary card on the right */ .pc-booking-page__form { background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); box-shadow: var(--pc-shadow-sm); padding: 28px 28px 24px; } @media (max-width: 480px) { .pc-booking-page__form { padding: 20px; } } .pc-booking-notice { background: var(--pc-copper-tint); border: 1px solid rgba(255,140,54,.35); color: var(--pc-navy); border-radius: var(--pc-radius); padding: 14px 16px; font-size: 13px; font-family: var(--pc-font); } /* ── CF7 form styling ── */ .pc-booking-cf7 .wpcf7-form { font-family: var(--pc-font); } .pc-booking-cf7 .wpcf7-form .pc-field { margin: 0 0 18px; } .pc-booking-cf7 .wpcf7-form label { display: block; font-size: 12px; font-weight: 700; color: var(--pc-text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .pc-booking-cf7 .wpcf7-form input[type="text"], .pc-booking-cf7 .wpcf7-form input[type="tel"], .pc-booking-cf7 .wpcf7-form input[type="email"], .pc-booking-cf7 .wpcf7-form input[type="date"], .pc-booking-cf7 .wpcf7-form select, .pc-booking-cf7 .wpcf7-form textarea { width: 100%; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--pc-text); background: var(--pc-white); box-sizing: border-box; font-family: var(--pc-font); transition: border-color var(--pc-trans), box-shadow var(--pc-trans); } .pc-booking-cf7 .wpcf7-form select { height: 46px; cursor: pointer; } .pc-booking-cf7 .wpcf7-form textarea { height: 70px; resize: vertical; } .pc-booking-cf7 .wpcf7-form input:focus, .pc-booking-cf7 .wpcf7-form select:focus, .pc-booking-cf7 .wpcf7-form textarea:focus { outline: none; border-color: var(--pc-blue); box-shadow: 0 0 0 3px rgba(0,133,216,.12); } .pc-booking-cf7 .wpcf7-form .wpcf7-not-valid-tip { font-size: 12px; color: #C0392B; margin-top: 4px; font-weight: 600; } /* Lucide icon on the left of each field (Full name / Phone / Email / Tour date / Note) */ .pc-booking-cf7 .wpcf7-form-control-wrap { position: relative; display: block; } /* The icon lives inside its own inner wrapper that contains ONLY the icon + control (not the .wpcf7-not-valid-tip error message, which CF7 renders as a sibling of the control). Positioning against this inner wrapper — instead of the outer .wpcf7-form-control-wrap — keeps the icon vertically centered on the input itself, so it no longer drifts downward when a validation error message appears below the field. */ .pc-field-icon-inner { position: relative; display: block; } .pc-field-icon-wrap .pc-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--pc-text-3); pointer-events: none; } .pc-field-icon-wrap .pc-field-icon svg, .pc-field-icon-wrap .pc-field-icon.lucide { width: 16px; height: 16px; } .pc-field-icon-wrap--top .pc-field-icon { top: 16px; transform: none; } .pc-booking-cf7 .wpcf7-form input.pc-has-icon, .pc-booking-cf7 .wpcf7-form textarea.pc-has-icon { padding-left: 42px; } .pc-field-icon-wrap:focus-within .pc-field-icon { color: var(--pc-blue); } .pc-booking-cf7 .wpcf7-form input[type="submit"] { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; background: var(--pc-gradient-primary); color: #fff; font-size: 14px; font-weight: 700; border-radius: var(--pc-radius); border: 1.5px solid transparent; cursor: pointer; width: 100%; transition: background var(--pc-trans), border-color var(--pc-trans); font-family: var(--pc-font); } @media (hover: hover) and (pointer: fine) { .pc-booking-cf7 .wpcf7-form input[type="submit"]:hover { background: var(--pc-gradient-primary-hover); border-color: transparent; } } .pc-booking-cf7 .wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; } .pc-booking-cf7 .wpcf7-response-output { border-radius: var(--pc-radius) !important; font-size: 13px !important; font-family: var(--pc-font); margin: 16px 0 0 !important; } .pc-booking-cf7 .wpcf7-spinner { margin-left: 10px; } /* ── Right: booking detail summary card ── */ .pc-booking-page__summary { position: sticky; top: 80px; } .pc-booking-summary-card { background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: 22px; box-shadow: var(--pc-shadow-sm); } .pc-booking-summary-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--pc-border); } .pc-booking-summary-card__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--pc-radius-sm); background: var(--pc-gradient-primary); color: #fff; font-size: 15px; flex-shrink: 0; } .pc-booking-summary-card__header h3 { font-size: 15px; font-weight: 800; color: var(--pc-text); margin: 0; letter-spacing: -.01em; font-family: var(--pc-font); } .pc-booking-summary-tour { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .pc-booking-summary-tour img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--pc-radius-sm); flex-shrink: 0; } .pc-booking-summary-tour__name { font-size: 14px; font-weight: 700; color: var(--pc-text); line-height: 1.35; } .pc-booking-summary-tour__type { font-size: 12px; color: var(--pc-blue); font-weight: 600; margin-top: 3px; } .pc-booking-summary-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pc-booking-summary-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-family: var(--pc-font); } .pc-booking-summary-list__label { color: var(--pc-text-2); font-weight: 600; } .pc-booking-summary-list__value { color: var(--pc-text); font-weight: 700; } .pc-booking-summary-guests { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pc-text-3); font-weight: 600; margin-bottom: 14px; } .pc-booking-summary-guests [data-lucide], .pc-booking-summary-guests svg.lucide { width: 14px; height: 14px; } .pc-booking-summary-total { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-bottom: 18px; border-top: 1px dashed var(--pc-border); font-family: var(--pc-font); } .pc-booking-summary-total span { font-size: 13px; font-weight: 700; color: var(--pc-text-2); text-transform: uppercase; letter-spacing: .04em; } .pc-booking-summary-total strong { font-size: 22px; font-weight: 800; color: var(--pc-copper); } .pc-booking-summary-empty { font-size: 13px; color: var(--pc-text-3); line-height: 1.6; margin: 0 0 16px; font-family: var(--pc-font); } .pc-booking-summary-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--pc-blue); text-decoration: none; } .pc-booking-summary-back [data-lucide], .pc-booking-summary-back svg.lucide { width: 14px; height: 14px; } @media (hover: hover) and (pointer: fine) { .pc-booking-summary-back:hover { text-decoration: underline; } } @media (max-width: 900px) { .pc-booking-page { grid-template-columns: 1fr; gap: 32px; } .pc-booking-page__summary { position: static; } } /* ═══════════════════════════════════════════════════ FILTER BLOCK — [product_catalog_filter] ═══════════════════════════════════════════════════ */ .pc-filter-block { --pc-filter-blue: #0A5393; --pc-filter-orange: #EE5E0F; margin-bottom: 48px; font-family: 'Plus Jakarta Sans', var(--pc-font); } .pc-filter-heading { font-family: 'Plus Jakarta Sans', var(--pc-font); font-size: 28px; font-weight: 800; color: var(--pc-filter-blue); margin: 0 0 22px; letter-spacing: -0.01em; } .pc-filter-bar { display: flex; align-items: center; gap: 16px; background: var(--pc-filter-blue); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 20px; box-shadow: 0 16px 40px rgba(10,83,147,.22); } .pc-filter-field { display: flex; align-items: center; gap: 12px; background: var(--pc-white); border: 1.5px solid rgba(10,83,147,.14); border-radius: 10px; padding: 0 18px; height: 54px; flex: 1 1 0; min-width: 0; position: relative; transition: border-color var(--pc-trans), box-shadow var(--pc-trans); } .pc-filter-field:focus-within { border-color: var(--pc-filter-orange); box-shadow: 0 0 0 3px rgba(238,94,15,.16); } .pc-filter-field--search { flex: 1.6 1 0; } .pc-filter-field__icon { color: var(--pc-filter-orange); flex-shrink: 0; width: 18px; height: 18px; } /* Reset with !important + box-sizing: the theme's own `input[type="text"]` rule (element+attribute selector) otherwise out-specifies a single class like .pc-filter-field__input and leaves its default border/outline visible inside our field. */ .pc-filter-bar .pc-filter-field__input, .pc-filter-bar .pc-filter-field__select { box-sizing: border-box; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent; font-family: 'Plus Jakarta Sans', var(--pc-font); font-size: 15px; color: var(--pc-text); width: 100%; height: 100%; } .pc-filter-field__input::placeholder { color: var(--pc-text-3); } .pc-filter-field__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 24px; cursor: pointer; } .pc-filter-field__select:invalid { color: var(--pc-text-3); } .pc-filter-field__caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--pc-text-3); pointer-events: none; } .pc-filter-btn { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 34px; border: 1.5px solid transparent; border-radius: 10px; background: var(--pc-filter-orange); color: var(--pc-white); font-family: 'Plus Jakarta Sans', var(--pc-font); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background var(--pc-trans), transform var(--pc-trans), box-shadow var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-filter-btn:hover { background: #FF7530; box-shadow: 0 6px 18px rgba(238,94,15,.35); } } .pc-filter-btn:active { transform: translateY(1px); } .pc-filter-results { margin-top: 36px; } @media (max-width: 780px) { .pc-filter-bar { flex-wrap: wrap; padding: 16px; border-radius: 10px; } .pc-filter-field, .pc-filter-field--search { flex: 1 1 100%; } .pc-filter-btn { flex: 1 1 100%; } } /* ─── SINGLE HERO ────────────────────────────────── */ .pc-single-hero { display: grid; grid-template-columns: 52% 1fr; gap: 48px; align-items: start; margin-bottom: 56px; } /* ─── GALLERY COLUMN ─────────────────────────────── */ .pc-gallery-col { position: sticky; top: 80px; min-width: 0; } .pc-gallery-stage { border-radius: var(--pc-radius-lg); overflow: hidden; background: var(--pc-white); box-shadow: var(--pc-shadow); border: 1px solid var(--pc-border); } .pc-swiper-main { width: 100%; aspect-ratio: 1 / 1; max-height: 520px; background: var(--pc-white); } .pc-swiper-main .swiper-slide { display: flex; align-items: center; justify-content: center; background: var(--pc-white); } .pc-swiper-main .swiper-slide img { width: 100%; height: 100%; max-height: 520px; object-fit: contain; padding: 20px; display: block; } .pc-swiper-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border-radius: var(--pc-radius); background: var(--pc-white); border: 1.5px solid var(--pc-border); color: var(--pc-blue); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--pc-shadow-sm); transition: background var(--pc-trans), color var(--pc-trans), box-shadow var(--pc-trans); opacity: 0; } @media (hover: hover) and (pointer: fine) { .pc-gallery-stage:hover .pc-swiper-btn { opacity: 1; } } @media (hover: hover) and (pointer: fine) { .pc-swiper-btn:hover { background: var(--pc-blue); color: #fff; box-shadow: var(--pc-shadow); } } .pc-swiper-btn--next { right: 14px; } .pc-swiper-btn--prev { left: 14px; } .pc-swiper-dots { bottom: 14px !important; } .pc-swiper-dots .swiper-pagination-bullet { background: var(--pc-text-3); opacity: .4; border-radius: var(--pc-radius-sm); } .pc-swiper-dots .swiper-pagination-bullet-active { background: var(--pc-blue); opacity: 1; } .pc-swiper-thumbs { padding: 12px 16px; background: var(--pc-tint); border-top: 1px solid var(--pc-border); } .pc-swiper-thumbs .swiper-slide { width: 66px !important; height: 66px; border-radius: var(--pc-radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; opacity: .55; transition: var(--pc-trans); background: var(--pc-white); } .pc-swiper-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .pc-swiper-thumbs .swiper-slide-thumb-active { border-color: var(--pc-blue); opacity: 1; box-shadow: 0 0 0 2px rgba(0,133,216,.22); } .pc-feat-img img { width: 100%; display: block; max-height: 520px; object-fit: contain; padding: 20px; } .pc-no-img { aspect-ratio: 1; max-height: 320px; display: flex; align-items: center; justify-content: center; background: var(--pc-tint); color: var(--pc-blue); font-size: 72px; opacity: .25; } /* ─── INFO COLUMN ────────────────────────────────── */ .pc-info-col { min-width: 0; font-family: var(--pc-font); } .pc-cats-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .pc-cat-pill { background: var(--pc-tint); color: var(--pc-blue); font-size: 11px; font-weight: 700; text-decoration: none; padding: 4px 12px; border-radius: var(--pc-radius-sm); text-transform: uppercase; letter-spacing: .07em; font-family: var(--pc-font-mono); border: 1px solid rgba(0,133,216,.22); transition: background var(--pc-trans), color var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-cat-pill:hover { background: var(--pc-blue); color: #fff; border-color: var(--pc-blue); } } .pc-product-title { font-family: var(--pc-font); font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; color: var(--pc-text); margin: 0 0 10px; line-height: 1.25; letter-spacing: -.025em; } /* ─── Single product "from" price — shown right under the title. Muted brick-red so it reads as a price cue without being a glaring, alarm-style red. ─────────────────────────────── */ .pc-single-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 18px; font-family: var(--pc-font); } .pc-single-price__label { font-size: 13px; font-weight: 600; color: var(--pc-text-3); text-transform: uppercase; letter-spacing: .05em; } .pc-single-price__value { font-size: 24px; font-weight: 800; color: var(--pc-red); letter-spacing: -.01em; } .pc-single-price__contact { display: inline-flex; align-items: center; gap: 6px; background: var(--pc-red-tint); color: var(--pc-red); font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(178,58,46,.22); } .pc-single-price__contact i, .pc-single-price__contact svg.lucide { width: 14px; height: 14px; } .pc-duration-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .pc-duration-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--pc-tint); color: var(--pc-blue); font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(0,133,216,.22); font-family: var(--pc-font); } .pc-duration-badge i { width: 13px; height: 13px; } /* ═══════════════════════════════════════════════════ CONNECT HUB — replaces the old excerpt/info block ═══════════════════════════════════════════════════ */ .pc-hub { background: var(--pc-white); border-radius: var(--pc-radius-lg); overflow: hidden; margin-bottom: 0; position: relative; border: 1px solid var(--pc-border); } .pc-hub::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(0,133,216,.045) 1px, transparent 1px), linear-gradient(0deg, rgba(0,133,216,.045) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); } .pc-hub__header { display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: var(--pc-navy); border-bottom: 1px solid rgba(255,140,54,.35); position: relative; z-index: 1; } .pc-hub__header-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: rgba(51,177,255,.18); border: 1px solid rgba(51,177,255,.5); border-radius: var(--pc-radius-sm); flex-shrink: 0; color: var(--pc-sky); font-size: 13px; } .pc-hub__title { font-family: var(--pc-font-mono); font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .1em; text-transform: uppercase; margin: 0; line-height: 1; } .pc-hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; padding: 18px; position: relative; z-index: 1; } .pc-hub__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); text-decoration: none; transition: border-color var(--pc-trans), background var(--pc-trans), transform var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-hub__item:hover { border-color: var(--pc-copper); background: var(--pc-copper-tint); transform: translateY(-2px); text-decoration: none; } } .pc-hub__item-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--pc-tint); border: 1px solid rgba(0,133,216,.30); border-radius: var(--pc-radius-sm); color: var(--pc-blue); font-size: 15px; } @media (hover: hover) and (pointer: fine) { .pc-hub__item:hover .pc-hub__item-icon { color: var(--pc-copper); border-color: var(--pc-copper); background: var(--pc-copper-tint); } } .pc-hub__item-icon img { width: 18px; height: 18px; object-fit: contain; display: block; } .pc-hub__item-label { font-size: 11px; font-weight: 600; color: var(--pc-text-2); text-align: center; line-height: 1.3; letter-spacing: .01em; font-family: var(--pc-font); } .pc-divider { height: 1px; background: var(--pc-border); margin: 24px 0; } /* Short description — shown where Contact Us / Print used to be */ .pc-short-desc { font-size: 14.5px; line-height: 1.6; color: var(--pc-text-2); margin-bottom: 20px; font-family: var(--pc-font); } .pc-short-desc p { margin: 0 0 10px; } .pc-short-desc p:last-child { margin-bottom: 0; } .pc-short-desc ul, .pc-short-desc ol { margin: 0 0 10px; padding-left: 22px; } .pc-short-desc li { margin-bottom: 4px; } .pc-short-desc a { color: var(--pc-blue); text-decoration: underline; } .pc-short-desc strong { font-weight: 700; } .pc-btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; background: var(--pc-gradient-primary); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: var(--pc-radius); border: 1.5px solid transparent; cursor: pointer; transition: background var(--pc-trans), border-color var(--pc-trans), box-shadow var(--pc-trans), transform var(--pc-trans); font-family: var(--pc-font); letter-spacing: .01em; box-shadow: 0 2px 14px rgba(0,133,216,.34); } @media (hover: hover) and (pointer: fine) { .pc-btn-primary:hover { background: var(--pc-gradient-primary-hover); border-color: transparent; color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(10,58,92,.36); } } .pc-btn-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; background: transparent; color: var(--pc-blue); font-size: 14px; font-weight: 700; border-radius: var(--pc-radius); border: 1.5px solid var(--pc-border); cursor: pointer; transition: background var(--pc-trans), border-color var(--pc-trans), color var(--pc-trans); font-family: var(--pc-font); } @media (hover: hover) and (pointer: fine) { .pc-btn-ghost:hover { background: var(--pc-tint); border-color: var(--pc-blue); } } /* ═══════════════════════════════════════════════════ BOOKING FORM — under the CTA buttons ═══════════════════════════════════════════════════ */ .pc-booking-form { background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: 20px; margin-bottom: 20px; box-shadow: var(--pc-shadow-sm); } .pc-booking-form__header { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } .pc-booking-form__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--pc-radius-sm); background: var(--pc-navy); color: var(--pc-sky); font-size: 14px; flex-shrink: 0; } .pc-booking-form__title { font-size: 15px; font-weight: 800; color: var(--pc-text); margin: 0; letter-spacing: -.01em; } .pc-booking-field { margin-bottom: 16px; } /* Shown instead of the booking form when no price is set */ .pc-contact-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--pc-shadow-sm); } .pc-contact-price__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--pc-radius-sm); background: var(--pc-navy); color: var(--pc-sky); font-size: 17px; flex-shrink: 0; } .pc-contact-price__body { flex: 1; min-width: 180px; } .pc-contact-price__title { font-size: 15px; font-weight: 800; color: var(--pc-text); margin: 0 0 4px; letter-spacing: -.01em; } .pc-contact-price__desc { font-size: 13px; color: var(--pc-text-2); margin: 0; line-height: 1.5; } .pc-contact-price__btn { padding: 11px 20px; font-size: 13px; flex-shrink: 0; } .pc-booking-label { display: block; font-size: 12px; font-weight: 700; color: var(--pc-text-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; font-family: var(--pc-font); } .pc-booking-label--tiers { margin-bottom: 10px; } .pc-booking-select { width: 100%; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--pc-text); background: var(--pc-white); box-sizing: border-box; height: 46px; cursor: pointer; font-family: var(--pc-font); transition: border-color var(--pc-trans), box-shadow var(--pc-trans); } .pc-booking-select:focus { outline: none; border-color: var(--pc-blue); box-shadow: 0 0 0 3px rgba(0,133,216,.12); } .pc-booking-guests { display: flex; flex-direction: column; gap: 10px; } .pc-booking-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius); } .pc-booking-tier-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pc-booking-tier-label { font-size: 13px; font-weight: 700; color: var(--pc-text); } .pc-booking-tier-price { font-size: 12px; color: var(--pc-blue); font-weight: 600; font-family: var(--pc-font); } .pc-booking-stepper { display: flex; align-items: center; gap: 0; flex-shrink: 0; border: 1px solid var(--pc-border); border-radius: var(--pc-radius); background: var(--pc-white); overflow: hidden; } .pc-booking-step { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: var(--pc-white); color: var(--pc-blue); font-size: 16px; font-weight: 700; cursor: pointer; transition: background var(--pc-trans), color var(--pc-trans); line-height: 1; } @media (hover: hover) and (pointer: fine) { .pc-booking-step:hover { background: var(--pc-tint); } } .pc-booking-step:active { background: var(--pc-tint-strong); } .pc-booking-qty { width: 40px; height: 32px; border: none; border-left: 1px solid var(--pc-border); border-right: 1px solid var(--pc-border); text-align: center; font-size: 13px; font-weight: 700; color: var(--pc-text); -moz-appearance: textfield; } .pc-booking-qty::-webkit-outer-spin-button, .pc-booking-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pc-booking-qty:focus { outline: none; background: var(--pc-tint); } .pc-booking-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; margin: 4px 0 16px; border-top: 1px dashed var(--pc-border); } .pc-booking-total__label { font-size: 13px; font-weight: 700; color: var(--pc-text-2); text-transform: uppercase; letter-spacing: .04em; font-family: var(--pc-font); } .pc-booking-total__value { font-size: 22px; font-weight: 800; color: var(--pc-copper); } .pc-booking-submit { width: 100%; justify-content: center; } .pc-booking-submit:disabled { background: var(--pc-gray) !important; border-color: var(--pc-gray) !important; color: #fff !important; cursor: not-allowed; box-shadow: none !important; opacity: .7; } .pc-booking-hint { text-align: center; font-size: 12px; color: var(--pc-text-3); margin: 10px 0 0; } /* Share row */ .pc-share-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--pc-text-3); font-family: var(--pc-font); } .pc-share-label { font-weight: 600; display: flex; align-items: center; gap: 6px; } .pc-share-fb, .pc-share-zalo { width: 34px; height: 34px; border-radius: var(--pc-radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; transition: transform var(--pc-trans), box-shadow var(--pc-trans); } .pc-share-fb { background: #1877f2; color: #fff; } .pc-share-zalo { background: var(--pc-blue); color: #fff; } @media (hover: hover) and (pointer: fine) { .pc-share-fb:hover, .pc-share-zalo:hover { transform: scale(1.1); box-shadow: 0 4px 14px rgba(10,58,92,.24); color: #fff; text-decoration: none; } } /* ─── SECTION HEADINGS ───────────────────────────── */ .pc-section-heading { display: flex; align-items: center; gap: 0; margin: 0 0 20px; position: relative; } .pc-section-heading__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--pc-border) 0%, var(--pc-gray) 50%, var(--pc-border) 100%); display: block; } .pc-section-heading__inner { display: flex; align-items: center; gap: 10px; background: var(--pc-bg); padding: 0 18px; position: relative; z-index: 1; } .pc-section-heading__icon { width: 30px; height: 30px; border-radius: var(--pc-radius-sm); background: var(--pc-gradient-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex-shrink: 0; } .pc-section-heading__text { font-family: var(--pc-font-mono); font-size: 13px; font-weight: 600; color: var(--pc-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } /* ─── PRICING TABLE ──────────────────────────────── */ .pc-pricing-section { margin-bottom: 56px; } .pc-pricing-type-note { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 13px; color: var(--pc-text-2); margin: 0 0 22px; font-family: var(--pc-font); } .pc-pricing-type-note [data-lucide] { color: var(--pc-copper); font-size: 15px; } .pc-pricing-type-note strong { color: var(--pc-navy); font-weight: 700; } .pc-price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .pc-price-cards--1 { grid-template-columns: minmax(0, 420px); justify-content: center; } .pc-price-card { background: var(--pc-white); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); overflow: hidden; box-shadow: 0 4px 28px rgba(10,58,92,.09), 0 1px 4px rgba(10,58,92,.04); transition: transform var(--pc-trans), box-shadow var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-price-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-lg); } } .pc-price-card__header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; background: var(--pc-gradient-primary-hover); } .pc-price-card__name { font-family: var(--pc-font); font-size: 12px; font-weight: 600; color: #fff; letter-spacing: .07em; text-transform: uppercase; } .pc-price-card__base { font-family: var(--pc-font); font-size: 19px; font-weight: 800; color: var(--pc-sky); } .pc-price-card__tiers { list-style: none; margin: 0; padding: 6px 20px 16px; } .pc-price-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--pc-border); font-size: 14px; } .pc-price-tier:last-child { border-bottom: none; } .pc-price-tier__label { color: var(--pc-text-2); } .pc-price-tier__value { font-weight: 700; color: var(--pc-blue); white-space: nowrap; } @media (max-width: 720px) { .pc-price-cards { grid-template-columns: 1fr; } } /* Price badge on catalog / related cards */ .pc-card__price { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; color: var(--pc-text-3); font-family: var(--pc-font); padding-top: 10px; margin-top: 2px; border-top: 1px solid rgba(139,145,156,.18); } .pc-card__price strong { font-size: 18px; font-weight: 800; color: var(--pc-red); font-family: var(--pc-font); } .pc-card__price--contact { align-items: center; color: var(--pc-red); font-weight: 700; font-size: 14px; padding-top: 10px; margin-top: 2px; border-top: 1px solid rgba(139,145,156,.18); } .pc-card__price--contact i { width: 15px; height: 15px; } /* ─── ACCORDION ──────────────────────────────────── */ .pc-detail-section { margin-bottom: 56px; } .pc-accordion { display: flex; flex-direction: column; gap: 0; border-radius: var(--pc-radius-lg); overflow: hidden; box-shadow: 0 4px 28px rgba(10,58,92,.09), 0 1px 4px rgba(10,58,92,.04); border: 1px solid var(--pc-border); } .pc-acc-item { background: var(--pc-white); font-family: var(--pc-font); border-bottom: 1px solid var(--pc-border); } .pc-acc-item:last-child { border-bottom: none; } .pc-acc-trigger { width: 100%; display: flex; align-items: stretch; padding: 0; background: var(--pc-bg); border: none; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; outline: none; -webkit-tap-highlight-color: transparent; transition: background var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-acc-trigger:hover { background: var(--pc-tint); } } .pc-acc-trigger:active, .pc-acc-trigger:focus:not(:focus-visible) { background: var(--pc-tint); outline: none; } .pc-acc-trigger:focus-visible { outline: 2px solid var(--pc-blue); outline-offset: -3px; } .pc-acc-item.is-open .pc-acc-trigger { background: var(--pc-tint-strong); box-shadow: inset 3px 0 0 var(--pc-copper); } @media (hover: hover) and (pointer: fine) { .pc-acc-item.is-open .pc-acc-trigger:hover { background: var(--pc-tint-strong); } } .pc-acc-trigger__inner { display: flex; align-items: center; width: 100%; gap: 14px; padding: 18px 22px; -webkit-tap-highlight-color: transparent; user-select: none; } .pc-acc-num { flex-shrink: 0; display: flex; align-items: center; } .pc-acc-num__badge { width: 28px; height: 28px; border-radius: var(--pc-radius-sm); background: var(--pc-tint-strong); color: var(--pc-blue); font-size: 11px; font-weight: 700; font-family: var(--pc-font-mono); display: flex; align-items: center; justify-content: center; letter-spacing: .02em; transition: background var(--pc-trans), color var(--pc-trans); flex-shrink: 0; border: 1px solid rgba(0,133,216,.25); } .pc-acc-item.is-open .pc-acc-num__badge { background: var(--pc-gradient-accent); color: #fff; border-color: transparent; } .pc-acc-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--pc-text); line-height: 1.45; letter-spacing: -.01em; transition: color var(--pc-trans); } .pc-acc-item.is-open .pc-acc-title { color: var(--pc-blue); font-weight: 700; } .pc-acc-chevron { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--pc-radius-sm); border: 1.5px solid rgba(0,133,216,.25); display: flex; align-items: center; justify-content: center; color: var(--pc-blue); font-size: 12px; transition: border-color var(--pc-trans), background var(--pc-trans), color var(--pc-trans), transform var(--pc-trans); background: var(--pc-tint); } @media (hover: hover) and (pointer: fine) { .pc-acc-trigger:hover .pc-acc-chevron { border-color: var(--pc-blue); background: var(--pc-tint-strong); } } .pc-acc-item.is-open .pc-acc-chevron { background: var(--pc-gradient-accent); border-color: transparent; color: #fff; transform: rotate(180deg); } .pc-acc-panel { overflow: hidden; max-height: 0; transition: max-height .35s cubic-bezier(.4, 0, .2, 1); } .pc-acc-body { padding: 4px 24px 26px 68px; background: transparent; color: var(--pc-text-2); font-size: 14px; line-height: 1.9; } .pc-acc-body p:first-child { margin-top: 0; } .pc-acc-body p:last-child { margin-bottom: 0; } .pc-acc-body p { margin: 0 0 10px; } .pc-acc-body img { max-width: 100%; height: auto; border-radius: var(--pc-radius-sm); margin: 8px 0; } .pc-acc-body ul, .pc-acc-body ol { padding-left: 20px; margin: 0 0 10px; } .pc-acc-body li { margin-bottom: 5px; } .pc-acc-body strong { color: var(--pc-text); font-weight: 700; } .pc-acc-body table { width: 100%; border-collapse: collapse; margin: 12px 0; } .pc-acc-body table th, .pc-acc-body table td { padding: 10px 14px; border: 1px solid var(--pc-border); font-size: 14px; } .pc-acc-body table th { background: var(--pc-tint); color: var(--pc-navy); font-weight: 700; } .pc-acc-body table tr:nth-child(even) td { background: var(--pc-tint); } .pc-acc-item.is-open + .pc-acc-item { border-top: 2px solid var(--pc-border); } /* ─── RELATED PRODUCTS SECTION ───────────────────── */ .pc-related-section { margin-bottom: 48px; } .pc-related-wrap { position: relative; } .pc-related-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: var(--pc-radius); background: rgba(255,255,255,.94); backdrop-filter: blur(2px); border: 1.5px solid var(--pc-border); color: var(--pc-blue); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--pc-shadow-sm); transition: background var(--pc-trans), color var(--pc-trans), box-shadow var(--pc-trans), opacity var(--pc-trans); } @media (hover: hover) and (pointer: fine) { .pc-related-nav:hover { background: var(--pc-blue); color: #fff; box-shadow: var(--pc-shadow); } } .pc-related-nav--prev { left: 6px; } .pc-related-nav--next { right: 6px; } .pc-related-nav.is-disabled { opacity: 0; visibility: hidden; pointer-events: none; } .pc-related-wrap--no-overflow .pc-related-nav { display: none; } .pc-related-scroll { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--pc-blue) var(--pc-tint); padding-bottom: 8px; margin: 0 -4px; } .pc-related-scroll::-webkit-scrollbar { height: 7px; } .pc-related-scroll::-webkit-scrollbar-track { background: var(--pc-tint); border-radius: var(--pc-radius); } .pc-related-scroll::-webkit-scrollbar-thumb { background: var(--pc-sky); border-radius: var(--pc-radius); } @media (hover: hover) and (pointer: fine) { .pc-related-scroll::-webkit-scrollbar-thumb:hover { background: var(--pc-blue); } } .pc-related-track { display: flex; gap: 24px; padding: 0 4px; } .pc-related-card { flex: 0 0 calc((100% - 24px * 3) / 4); min-width: 0; scroll-snap-align: start; } .pc-related-section .pc-section-heading__icon { background: var(--pc-gradient-primary-hover); } /* ─── RESPONSIVE ─────────────────────────────────── */ @media (max-width: 1100px) { .pc-single-hero { grid-template-columns: 1fr 1fr; gap: 36px; } .pc-grid--4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .pc-grid--4 { grid-template-columns: repeat(2, 1fr); } } /* Shortcode grids: horizontal scroll with a peek of the next card on mobile/tablet */ @media (max-width: 1024px) { .pc-shortcode-grid.pc-grid--2, .pc-shortcode-grid.pc-grid--3, .pc-shortcode-grid.pc-grid--4 { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; gap: 16px; scroll-snap-type: x mandatory; scroll-padding-left: 4px; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; } .pc-shortcode-grid.pc-grid--2 > .pc-card, .pc-shortcode-grid.pc-grid--3 > .pc-card, .pc-shortcode-grid.pc-grid--4 > .pc-card { flex: 0 0 auto; width: 78%; scroll-snap-align: start; } .pc-shortcode-grid::-webkit-scrollbar { height: 0; } .pc-shortcode-grid { scrollbar-width: none; -ms-overflow-style: none; } } @media (max-width: 640px) { .pc-shortcode-grid.pc-grid--2 > .pc-card, .pc-shortcode-grid.pc-grid--3 > .pc-card, .pc-shortcode-grid.pc-grid--4 > .pc-card { width: 84%; } .pc-card__body { padding: 16px 18px 18px; gap: 10px; } .pc-card__name { font-size: 14.5px; } .pc-card__excerpt { font-size: 12px; } .pc-card__duration, .pc-card__location { font-size: 11px; padding: 3px 9px 3px 5px; } .pc-card__duration i, .pc-card__location i { width: 18px; height: 18px; } .pc-card__price { font-size: 12px; } .pc-card__price strong { font-size: 16px; } .pc-card__price--contact { font-size: 13px; } .pc-card__price--contact i { width: 14px; height: 14px; } .pc-card__btn { font-size: 13px; padding: 10px 16px; } .pc-card__btn [data-lucide], .pc-card__btn svg.lucide { width: 14px; height: 14px; } } @media (max-width: 768px) { .pc-container { padding: 24px 16px 48px; } .pc-single-hero { grid-template-columns: 1fr; gap: 28px; } .pc-gallery-col { position: static; } .pc-swiper-main { max-height: 360px; } .pc-archive-hero { padding: 40px 24px; } .pc-archive-hero.pc-archive-hero--image { min-height: 260px; } .pc-archive-hero.pc-archive-hero--image .pc-archive-hero__inner { padding: 28px 20px 32px; } .pc-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .pc-grid--2, .pc-grid--3, .pc-grid--4 { grid-template-columns: 1fr; } .pc-cta-block { flex-direction: column; } .pc-btn-primary, .pc-btn-ghost { justify-content: center; } .pc-swiper-main { max-height: 280px; } .pc-section-heading__text { font-size: 11px; } .pc-section-heading__inner { padding: 0 10px; } .pc-archive-hero { border-radius: var(--pc-radius); } .pc-hub__grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .pc-related-track { gap: 14px; } .pc-related-card { flex-basis: calc((100% - 14px) / 2); } .pc-related-card .pc-card__body { padding: 14px 14px 16px; } .pc-related-card .pc-card__name { font-size: 13px; } .pc-related-card .pc-card__btn { font-size: 12px; padding: 9px 14px; } .pc-related-card .pc-card__duration, .pc-related-card .pc-card__location { font-size: 10.5px; padding: 3px 8px 3px 5px; } .pc-related-card .pc-card__duration i, .pc-related-card .pc-card__location i { width: 17px; height: 17px; } .pc-related-nav { width: 32px; height: 32px; font-size: 12px; } .pc-related-nav--prev { left: 2px; } .pc-related-nav--next { right: 2px; } } /* ─── PRINT ──────────────────────────────────────── */ @media print { .pc-gallery-col { position: static; } .pc-swiper-main, .pc-swiper-thumbs, .pc-swiper-btn { display: none; } .pc-feat-img { display: block; } .pc-single-hero { grid-template-columns: 1fr; } .pc-share-row, .pc-cta-block, .pc-booking-form { display: none; } .pc-page-wrap { background: #fff; } } /* ═══════════════════════════════════════════════════ SHORTCODE GRID — [product_catalog] Reuses the same .pc-grid / .pc-card design as the archive template — no extra rules needed here. ═══════════════════════════════════════════════════ */