/* Scoped campaign layout for PrestaShop category 23 only. */
.vancouver-coffee-content-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
.vancouver-coffee-page { --vc-ink:#202622; --vc-muted:#66706b; --vc-cream:#f4efe6; --vc-paper:#fbfaf6; --vc-cedar:#9d5e3d; --vc-cedar-dark:#553629; --vc-sea:#a6d0cd; --vc-sun:#d98c4e; color:var(--vc-ink); background:var(--vc-paper); line-height:1.6; margin:0 -15px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif; }
.vancouver-coffee-page * { box-sizing:border-box; }
.vancouver-coffee-page a { color:inherit; }
.vancouver-coffee-page h1,.vancouver-coffee-page h2,.vancouver-coffee-page h3,.vancouver-coffee-page p { margin-top:0; }
.vc-hero { position:relative; overflow:hidden; background:linear-gradient(110deg,rgba(223,233,228,.94),rgba(242,232,213,.86) 53%,rgba(201,217,209,.82)),url('../img/vancouver-coffee/seattle-rainy-cafe.png') center/cover; }
.vc-hero:before,.vc-hero:after { content:""; position:absolute; border-radius:50%; filter:blur(2px); opacity:.35; }
.vc-hero:before { width:420px; height:420px; right:-100px; top:-160px; background:var(--vc-sea); }
.vc-hero:after { width:300px; height:300px; left:-130px; bottom:-190px; background:var(--vc-sun); }
.vc-hero-inner { position:relative; z-index:1; max-width:1180px; margin:auto; padding:88px 5vw 76px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:64px; }
.vc-eyebrow { color:var(--vc-cedar); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:800; }
.vc-hero h1 { max-width:650px; margin-bottom:20px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(46px,7vw,86px); line-height:1.04; letter-spacing:-.055em; }
.vc-hero-copy { max-width:550px; color:#4d5b53; font-size:17px; }
.vc-hero-note { max-width:550px; margin:16px 0 0; color:#8c4b2d; font-size:13px; font-weight:700; }
.vc-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.vc-button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:0 19px; border:1px solid var(--vc-ink); border-radius:999px; text-decoration:none; font-size:13px; font-weight:800; }
.vc-button-primary { background:var(--vc-ink); color:#fffaf0 !important; }
.vc-button-light { background:rgba(255,255,255,.45); border-color:rgba(32,38,34,.25); }
.vc-hero-card { min-height:360px; padding:28px; border:1px solid rgba(32,38,34,.16); background:rgba(255,255,255,.4); box-shadow:0 20px 55px rgba(45,42,33,.12); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:space-between; }
.vc-stamp { width:76px; height:76px; border:1px solid var(--vc-ink); border-radius:50%; display:grid; place-items:center; text-align:center; font-size:10px; line-height:1.2; letter-spacing:.08em; }
.vc-hero-card h2 { max-width:310px; margin-bottom:0; font-family:Georgia,serif; font-size:36px; line-height:1.08; }
.vc-route { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); max-width:1180px; margin:auto; padding:24px 5vw 26px; gap:10px; border-top:1px solid rgba(32,38,34,.12); }
.vc-route-item { position:relative; color:var(--vc-muted); font-size:12px; }
.vc-route-item:not(:last-child):after { content:"→"; position:absolute; right:10px; color:var(--vc-cedar); }
.vc-route-item strong { display:block; color:var(--vc-ink); font-size:14px; }
.vc-section { max-width:1180px; margin:auto; padding:84px 5vw; }
.vc-section-heading { max-width:650px; margin-bottom:34px; }
.vc-section-heading h2 { margin-bottom:14px; font-family:Georgia,"Noto Serif TC",serif; font-size:clamp(32px,4vw,52px); line-height:1.12; letter-spacing:-.04em; }
.vc-section-heading p { color:var(--vc-muted); margin-bottom:0; }
.vc-west-map { position:relative; margin:28px 0 18px; padding:25px 24px 19px; overflow:hidden; border:1px solid rgba(32,38,34,.14); background:#e9e3d8; box-shadow:0 20px 55px rgba(45,42,33,.12); }
.vc-west-map:before { content:""; position:absolute; inset:0; background:linear-gradient(105deg,rgba(241,239,231,.96),rgba(231,222,209,.72)); pointer-events:none; }
.vc-map-kicker,.vc-map-caption { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--vc-muted); font-size:12px; }
.vc-map-kicker { margin-bottom:19px; color:var(--vc-cedar-dark); font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.vc-map-kicker span:last-child { letter-spacing:.03em; text-transform:none; font-weight:600; }
.vc-route-map { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.vc-route-map:before { content:""; position:absolute; left:7%; right:7%; top:50%; border-top:1px dashed rgba(157,94,61,.68); z-index:0; }
.vc-route-stop { position:relative; z-index:1; min-height:205px; padding:15px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fffaf0; border:1px solid rgba(255,255,255,.55); background-position:center; background-size:cover; box-shadow:0 10px 26px rgba(45,42,33,.16); }
.vc-route-stop:after { content:""; position:absolute; width:9px; height:9px; left:50%; top:calc(50% - 5px); transform:translateX(-50%); border:3px solid #fffaf0; border-radius:50%; background:var(--vc-sun); box-shadow:0 0 0 4px rgba(217,140,78,.22); }
.vc-seattle { background-image:linear-gradient(180deg,rgba(19,29,25,.08) 20%,rgba(19,29,25,.88)),url('../img/vancouver-coffee/seattle-rainy-cafe.png'); }
.vc-vancouver { background-image:linear-gradient(180deg,rgba(19,29,25,.08) 20%,rgba(19,29,25,.88)),url('../img/vancouver-coffee/vancouver-city-cafe.png'); }
.vc-island { background-image:linear-gradient(180deg,rgba(19,29,25,.08) 20%,rgba(19,29,25,.88)),url('../img/vancouver-coffee/vancouver-island-coast.png'); }
.vc-hong-kong { background-image:linear-gradient(180deg,rgba(19,29,25,.08) 20%,rgba(19,29,25,.88)),url('../img/vancouver-coffee/hong-kong-morning-coffee.png'); }
.vc-route-overlay { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; overflow:visible; }
.vc-route-stroke { fill:none; stroke:#f6c18a; stroke-width:4; stroke-linecap:round; stroke-dasharray:9 10; opacity:.92; filter:drop-shadow(0 2px 3px rgba(31,25,20,.55)); }
.vc-route-halo { fill:none; stroke:rgba(255,250,240,.55); stroke-width:10; stroke-linecap:round; opacity:.36; }
.vc-route-pin { fill:var(--vc-sun); stroke:#fffaf0; stroke-width:5; filter:drop-shadow(0 2px 3px rgba(31,25,20,.5)); }
.vc-stop-head,.vc-route-stop p { position:relative; z-index:1; }
.vc-stop-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.vc-stop-number { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.7); border-radius:50%; font-size:10px; font-weight:900; letter-spacing:.05em; }
.vc-route-stop strong { display:block; font-family:Georgia,serif; font-size:20px; line-height:1.05; }
.vc-route-stop small { display:block; margin-top:4px; color:rgba(255,250,240,.8); font-size:10px; line-height:1.35; }
.vc-route-stop p { max-width:170px; margin:0; color:rgba(255,250,240,.9); font-size:11px; line-height:1.45; }
.vc-map-caption { margin-top:17px; }
.vc-map-caption strong { color:var(--vc-ink); }
.vc-stop-note { display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:var(--vc-cedar-dark); font-size:11px; font-weight:800; }
.vc-stop-note:before { content:""; width:7px; height:7px; border-radius:50%; background:var(--vc-sun); }
.vc-tracks { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.vc-track { min-height:235px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid rgba(32,38,34,.14); }
.vc-city { background:#e8e1d5; }
.vc-island-track { background:#dbe9df; }
.vc-track h3 { margin-bottom:8px; font-family:Georgia,serif; font-size:29px; }
.vc-track p { max-width:400px; margin-bottom:0; color:#56625b; }
.vc-track-label { color:var(--vc-cedar-dark); font-size:11px; font-weight:900; letter-spacing:.14em; }
.vc-taste { background:var(--vc-cedar-dark); color:#f8f1e4; }
.vc-taste .vc-section-heading p { color:#d7c8b6; }
.vc-taste .vc-eyebrow { color:#e4a16b; }
.vc-taste-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.vc-taste-item { min-height:120px; padding:18px; border:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; justify-content:space-between; }
.vc-taste-item strong { font-family:Georgia,serif; font-size:22px; }
.vc-taste-item span { color:#d7c8b6; font-size:12px; }
.vc-products { background:var(--vc-cream); }
.vc-product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vc-product-card { background:var(--vc-paper); border:1px solid rgba(32,38,34,.14); box-shadow:0 12px 28px rgba(45,42,33,.07); display:flex; flex-direction:column; overflow:hidden; }
.vc-product-image { display:block; aspect-ratio:1/1; background:#e8e1d5; }
.vc-product-image img { width:100%; height:100%; display:block; object-fit:cover; }
.vc-product-body { padding:21px; display:flex; flex-direction:column; flex:1; }
.vc-brand { color:var(--vc-cedar); text-transform:uppercase; letter-spacing:.1em; font-size:10px; font-weight:900; }
.vc-product-body h3 { margin:8px 0 9px; font-family:Georgia,serif; font-size:24px; line-height:1.13; }
.vc-product-body h3 a { text-decoration:none; }
.vc-product-body p { color:var(--vc-muted); font-size:13px; margin-bottom:16px; }
.vc-product-persona { margin-bottom:15px; padding-left:10px; border-left:2px solid var(--vc-sea); color:var(--vc-cedar-dark); font-size:12px; font-weight:800; }
.vc-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; margin-bottom:18px; }
.vc-tags span { padding:4px 8px; border:1px solid rgba(32,38,34,.14); border-radius:999px; color:var(--vc-muted); font-size:10px; }
.vc-product-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid rgba(32,38,34,.14); padding-top:14px; font-size:12px; }
.vc-price { font-weight:900; }
.vc-product-footer a { font-weight:800; text-decoration:none; }
.vc-product-footer a:hover,.vc-product-body h3 a:hover { text-decoration:underline; }
.vc-story-band { max-width:1180px; margin:auto; padding:0 5vw 84px; }
.vc-story-box { background:linear-gradient(90deg,rgba(37,45,41,.98),rgba(37,45,41,.92) 53%,rgba(37,45,41,.58)),url('../img/vancouver-coffee/vancouver-island-coast.png') center/cover; color:#fffaf0; padding:44px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:stretch; }
.vc-story-box h2 { margin-bottom:14px; font-family:Georgia,serif; font-size:clamp(30px,4vw,48px); line-height:1.1; }
.vc-story-box p { max-width:550px; margin-bottom:0; color:#d7e1d9; }
.vc-story-ritual { align-self:center; padding-left:27px; border-left:1px solid rgba(255,255,255,.3); }
.vc-story-ritual-label { margin-bottom:14px; color:#e4a16b; font-size:11px; font-weight:900; letter-spacing:.12em; }
.vc-ritual-choice { display:grid; grid-template-columns:34px 1fr; gap:12px; align-items:start; padding:13px 0; border-top:1px solid rgba(255,255,255,.2); }
.vc-ritual-choice:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.vc-ritual-choice > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#f6c18a; font-size:10px; font-weight:900; }
.vc-ritual-choice strong { display:block; color:#fffaf0; font-family:Georgia,serif; font-size:20px; line-height:1.15; }
.vc-ritual-choice div span { display:block; margin-top:4px; color:#d7e1d9; font-size:12px; line-height:1.45; }
@media (max-width:860px) {
  .vc-hero-inner,.vc-story-box { grid-template-columns:1fr; }
  .vc-hero-inner { padding-top:58px; gap:35px; }
  .vc-product-grid { grid-template-columns:repeat(2,1fr); }
  .vc-taste-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px) {
  .vc-route { grid-template-columns:repeat(2,1fr); row-gap:17px; }
  .vc-route-item:nth-child(2):after { display:none; }
  .vc-route-map { grid-template-columns:1fr; }
  .vc-route-map:before,.vc-route-overlay { display:none; }
  .vc-tracks,.vc-product-grid { grid-template-columns:1fr; }
  .vc-taste-grid { grid-template-columns:repeat(2,1fr); }
  .vc-section { padding-top:60px; padding-bottom:60px; }
  .vc-story-band { padding-bottom:60px; }
  .vc-story-box { padding:28px; }
  .vc-map-kicker,.vc-map-caption { align-items:flex-start; flex-direction:column; gap:6px; }
  .vc-route-stop { min-height:180px; }
}