:root {

  /* Structure */
  --header-height: 160px;
  --header-offset: 160px;
  --header-height-condensed: 90px;
  --logo-width: 304px;
  --logo-height: 76px;
  --logo-aspect-ratio: 304/76;
  --menu-height:90px;
  --menu-spacing:24px;
  --margin: 60px;
  --margin-small: 0.5lh;
  --container: 1440px;
  --narrow: 560px;
  --container-padding:40px;
  --container-padding-inset:100px;
  --container-padding-inset-large:8.18%;
  --grid-gap: 60px;
  --grid-gap-small: 40px;
  --grid-gap-x-small: 20px;
  --icon-size: 24px;
  --padding: 80px;
  --padding-small: 40px;
  --padding-large:160px;
  --caption-padding: 36px;
  --roundel-height:40px;

  /* Layout : Hero */
  --hero-aspect-ratio: 1440/450;
  --hero-single-aspect-ratio: 720/540;
  --hero-single-padding:80px;
  --hero-caption-width: 640px;

  /* Layout : Card */
  --card-aspect-ratio: 414/310;
  --card-padding:20px;
  --card-badge-height:40px;
  --card-badge-padding: 0 calc(var(--card-padding) / 2);

  /* LayoutBanner : Slideshow */
  --banner-slideshow-aspect-ratio: 1440/640;
  --banner-slideshow-caption-width: 460px;
  --banner-slideshow-caption-padding: var(--caption-padding); 

  /* Layout : Banners */
  --banner-aspect-ratio: 640/480;

  /* Layout : Text & Image */
  --text-image-media-aspect-ratio: 680/510;

  /* Layout : Instagram Feed */
  --instagram-feed-aspect-ratio: 295/529;

  /* Footer */
  --footer-logo-width: 156px;
  --footer-logo-aspect-ratio: 156/127;
  --footer-newsletter-width:475px;

  /* Button */
  --button-icon-aspect-ratio: 34/12;

  /* Font Sizes */
  --font-small: 14px;
  --font-regular: 16px;
  --font-regular-large: 18px;
  --font-medium: 24px;
  --font-medium-large: 30px;
  --font-large: 40px;

  /* Fonts */
  --font-serif: "CanelaTextTrial", sans-serif;

  /* Colours */
  --black: #000;
  --white: #FFFFFF;
  --light-grey: #EFEFEF;
  --grey: #999999;
  --tint: rgba(0,0,0,0.6);
  --color-shop: #147759;
  --color-dine: #00A3EF;
  --color-culture: #60529A;
  --color-whats-on: #C0325F;
  --color-visit:#FF6F93;
  --color-about: #E9864A;

  /* Transitions */
  --transition-height: 1s ease-out max-height;
  --transition-transform: 0.3s ease-out transform, 0.3s ease-out visibility;
  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-border: 0.3s ease-out border-color;
  --transition-color: 0.3s ease-out color;
  --transition-background: 0.3s ease-out background-color;
  --transition-header: 0.3s ease-out box-shadow, 0.3s ease-out background-color;
  --transition-roundel: 0.3s ease-out background-color, 0.3s ease-out color, 0.3s ease-out border-radius;
  --transition-button:0.3s ease-out background-color, 0.3s ease-out color;
  --transition-input:0.3s ease-out box-shadow, 0.3s ease-out color;

  /* Swiper */
  --swiper-theme-color: var(--black);

  /* Cookie Banner */
  --cc-btn-primary-bg: var(--black);
  --cc-btn-secondary-hover-bg: var(--black);

}

/* Fonts */
@font-face {
    font-family: 'CanelaTextTrial';
    src: url('../fonts/CanelaText-Bold-Trial.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CanelaTextTrial';
    src: url('../fonts/CanelaText-Regular-Trial.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CanelaTextTrial';
    src: url('../fonts/CanelaText-Medium-Trial.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* Font sizes */
.font-small { font-size: var(--font-small); }
.font-regular { font-size: var(--font-regular); }
.font-regular-large { font-size: var(--font-regular-large); }
.font-medium { font-size: var(--font-medium); }
.font-medium-large { font-size: var(--font-medium-large); }
.font-large { font-size: var(--font-large); }

/* Colours */
.white { color: var(--white); }
.black { color: var(--black); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }
.bg-light-grey { background-color: var(--light-grey); }
.bg-tint { background-color: var(--tint); padding: var(--caption-padding); }
.bg-gradient-top { background: linear-gradient(-180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 25%); }
.bg-gradient-bottom { background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 25%); }
.bg-tint-white { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(5px);}

/* Accents */
.section-shop { --accent: var(--color-shop); }
.section-dine { --accent: var(--color-dine); }
.section-culture { --accent: var(--color-culture); }
.section-whats-on { --accent: var(--color-whats-on); }
.section-visit { --accent: var(--color-visit); }
.section-about { --accent: var(--color-about); }

/* --------------------------------------------------------------------------
   Structure
   -------------------------------------------------------------------------- */
body { padding-top: var(--header-height); font-family: 'CanelaTextTrial'; color: var(--black); background:var(--white); font-size: var(--font-regular-large); }
.container { max-width: var(--container); padding-left: var(--container-padding); padding-right: var(--container-padding); margin-left: auto; margin-right: auto; width: 100%; position: relative; z-index: 0; }
.container.inset { padding-left: var(--container-padding-inset); padding-right: var(--container-padding-inset); }
.icon { width: var(--icon-size); height: var(--icon-size); }
.narrow { max-width: var(--narrow); }
.grid-gap-small { grid-gap:var(--grid-gap-small); }
.margin-top-small { margin-top:var(--margin-small); }
.margin-bottom-small { margin-bottom:var(--margin-small); }
.image video { object-fit: cover; height: 100%; width: 100%; }
.medium { font-weight: 600; }
svg { width: 100%; height: auto; vertical-align: top; }
p { margin-bottom: 1lh; }
p:last-of-type { margin-bottom: 0; }
li { list-style-type: none; }

/* Button */
.button { display: flex; flex-direction: row; font-weight: bold; transition: var(--transition-color); line-height: 1.2; }
.button svg { aspect-ratio: var(--button-icon-aspect-ratio); stroke: currentColor; transition: var(--transition-transform), var(--transition-color); }
.button.bg-tint { padding: 10px 32px; }
.button:hover,
.banner:hover .button { color:var(--accent); }
:is(.button:hover, .banner:hover .button) .button-arrow-left svg, 
:is(.button:hover, .banner:hover .button) .button-arrow-right svg, 
.button-swiper:not(.swiper-button-disabled):hover svg { transform: translateX(0); }
.button-arrow-left, .button-arrow-right { width: 1.15lh; aspect-ratio: var(--button-icon-aspect-ratio); overflow: hidden; transform: translateY(10%); }
.button-arrow-right { margin: auto 0 auto calc(1lh / 2); }
.button-arrow-left { margin: auto calc(1lh / 2) auto 0; }
.button-arrow-left svg, .button-arrow-right svg { will-change: transform; transition: var(--transition-transform), var(--transition-color); }
.button-arrow-left svg { transform: translateX(33%); }
.button-arrow-right svg { transform: translateX(-33%); }

/* Button : Rounded */
.button-rounded { padding: 10px 20px 8px; border: 0.5px solid currentColor; border-radius: 6px; transition: var(--transition-color); }
.button-rounded:hover { color: var(--accent);}

/* Button : Back */
.button-back { gap:10px; transition: var(--transition-color); }
.button-back:hover { color: var(--accent); }

/* Button : Arrow Right */
.has-button-animation .button-arrow-right { margin-left: 0; opacity: 0; transition: var(--transition-fade); }
.has-button-animation.is-hovering .button-arrow-right { opacity: 1; color:currentColor; }
.has-button-animation.is-hovering .button-arrow-right svg { transform: translateX(0); }

/* Strikethrough */
.strikethrough { position: relative; }
.strikethrough:before { content:''; height: 1px; background-color: var(--black); top:0; bottom: 0; left:0; right:0; margin: auto; z-index: -1; position: absolute; } 
.strikethrough span { background-color: var(--white); padding: 0 20px; margin: 0 auto; }

/* Swiper */
.swiper { z-index: 0; width: 100%; }
.swiper-buttons { gap:12px; top:0; right:var(--container-padding); }
.button-swiper { width: 44px; height: 44px; cursor: pointer; transition: var(--transition-fade); }
.button-swiper .button-arrow-right, .button-swiper .button-arrow-left { margin: auto; width: 100%; }
.button-swiper:hover:not(.swiper-button-disabled) svg { color: var(--accent); }
.swiper-button-disabled { opacity: 0.3; cursor: default; }
.swiper-button-lock { display: none; }

/* Roundels */
.roundel { background-color: var(--white); border:1px solid var(--black); border-radius: calc(var(--roundel-height) / 2); line-height: calc(var(--roundel-height) - 2px); height: var(--roundel-height); padding: 0 20px; transition: var(--transition-color), var(--transition-background), var(--transition-border); white-space: nowrap; text-overflow: ellipsis; margin-bottom: 0; }
.roundel.is-active, .roundel:not(input):hover { background-color: var(--accent); border-color: var(--accent); color: var(--white); }
.roundel.label { background-color: var(--black); color: var(--white); }

/* Icons */
.icon-back { fill:none; stroke:currentColor; width: 20px; height: 12px; }
.icon-search { stroke:none; }
.icon-arrow-large-left, .icon-arrow-large-right { aspect-ratio: var(--button-icon-aspect-ratio); }

/* Focus */
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

/* Skip link — visible only on focus */
.skip-link { position: fixed; top: 16px; left: 16px; z-index: 9999; background: var(--white); padding: 8px 16px; }
.skip-link:not(:focus) { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* Form */
input { padding: 0 16px; border-bottom: 0.5px solid var(--black); height: 40px; line-height: 40px; background: transparent; color: inherit; width: 100%; box-shadow: 0 0 0 0 var(--black); transition: var(--transition-input); }
input:focus { outline: none; border-bottom-color: var(--black); box-shadow: 0 2px 0 0 var(--black); }
::placeholder { color: var(--grey); }

/* Trailing Margin */
main > .layout-events:last-child { margin-bottom:0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header { top:0; left: 0; right:0; height: var(--header-height); z-index: 2; will-change: transform; }
.header-container { height: 100%; }
.header-logo { aspect-ratio: var(--logo-aspect-ratio); max-width: var(--logo-width); left:0; right:0; bottom:30px; margin-left:auto; margin-right:auto; will-change: transform; transform-origin: center bottom; }
.header-menu-container { width: 100%; }
.header-menu { gap: var(--menu-spacing); height: var(--menu-height); line-height: var(--menu-height); margin-top: auto; }
.header-menu-left { margin-right: auto; }
.header-menu-right { margin-left: auto; }
.header-menu-link:hover,
.header-menu-link.is-active { color:var(--color); }
.header-social { gap:16px; top:var(--container-padding); right: var(--container-padding); }
.header-search { top: var(--container-padding); left: var(--container-padding); }
.header-search:hover .header-search-input { opacity: 1; visibility: visible; transition: var(--transition-fade); }
.header-search-button { position: absolute; top: 0; left: -11px; width: 40px; height: 40px; padding: 11px; stroke: none; }
.header-search-input { padding-left: 30px; opacity: 0; visibility: hidden; }

/* Menu Colours */
.header-menu-link-shop { --color: var(--color-shop); }
.header-menu-link-dine { --color: var(--color-dine); }
.header-menu-link-culture { --color: var(--color-culture); }
.header-menu-link-what-s-on { --color: var(--color-whats-on); }
.header-menu-link-visit { --color: var(--color-visit); }
.header-menu-link-about { --color: var(--color-about); }

/* Search results */
.header-search-results { left:0; right:0; top:var(--header-height); padding-bottom:var(--container-padding); z-index: 3; }
body::before { content: ''; position: fixed; inset: 0; background-color: var(--tint); z-index: 1; opacity: 0; pointer-events: none; transition: var(--transition-fade); }
body.has-search-results::before { opacity: 1; pointer-events: auto; }

/* Mobile Speific */
.header-search-toggle, .header-menu-toggle, .header-search-close { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero__image { aspect-ratio: var(--hero-aspect-ratio);  }
.hero__text { margin-left:0; }
.hero__title { margin-bottom: 0.25lh; }

/* Text Below */
.layout-hero.has-text-below figure { margin-bottom: var(--margin); }

/* Title Bottom Center */
.layout-hero.has-title-bottom-center .hero__text { max-width: var(--hero-caption-width); margin-top: 1lh; }
.layout-hero.has-title-bottom-center .hero__title { bottom:-16px; left:0; right:0; margin: 0 auto 0 auto; text-align: center; }
.layout-hero.has-title-bottom-center .hero__title span { padding: 7px 30px; }
.layout-hero.has-title-bottom-center .hero__image { overflow: visible; }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.card.image, .card-image  { aspect-ratio: var(--card-aspect-ratio); background-color: var(--black); }
.card-gap { gap:15px; }
.card-overlay-gradient { top:0; bottom:0; left:0; right:0; padding:var(--card-padding); background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 60%); }
.card-overlay { top:0; bottom:0; left:0; right:0; padding:var(--card-padding); z-index: 1; }
.card-tags { bottom:16px; right:16px; gap:10px; }
.card img, .card video { transition: opacity 1s, transform 1s ease-in-out; }
.card:hover img, .card:hover video { transform: scale(1.05); }

/* News : Spotlight */
.layout-news .swiper-buttons { top:9px; }
.layout-news-spotlight .news-header { position: absolute; top:0; left:0; right:0; margin: 0 auto; z-index: 1; display: flex; justify-content: center; }
.layout-news-spotlight .news-title { background: var(--white); display: inline-flex; line-height: 2; padding: 0 60px; }
.news-title.font-medium + .swiper-buttons { top: -6px; }
.card-news-spotlight .card-overlay { left:80px; top: auto; transition: var(--transition-background);min-height: 200px; }

/* News & Events : News */
.card-news-slide { aspect-ratio: var(--card-aspect-ratio); }

/* News */
.card-news h3, .card-news p { transition: var(--transition-color); }
.card-news.is-hovering { color: var(--accent); }

/* Badge */
.card__badge { height: var(--card-badge-height); line-height: var(--card-badge-height); border-radius: calc(var(--card-badge-height) / 2); background-color: rgba(255,255,255,0.6); padding: var(--card-badge-padding); bottom: var(--card-padding); left:var(--card-padding); text-transform: capitalize; display: inline-flex; }

/* Brand */
.card-brand h3 { transform: translateY(23px); transition: var(--transition-transform); }
.card-brand .button-arrow-right { margin: 10px 0 0 0; }
.card-brand:hover h3 { transform: translateY(0); }
.card-brand:hover h3 .button-arrow-right { opacity:1; }

/* Fade Animation */
.fade-cards .card { transition: var(--transition-fade); will-change:opacity; }
.fade-cards.is-hovering .card { opacity: 0.6; }
.fade-cards.is-hovering .card.is-hovering { opacity: 1; }

/* --------------------------------------------------------------------------
   Banner Slideshow
   -------------------------------------------------------------------------- */
.banner-slideshow-slide { aspect-ratio: var(--banner-slideshow-aspect-ratio); }
.banner-slideshow__caption { top:var(--container-padding); bottom: 0; right:var(--container-padding); max-width: var(--banner-slideshow-caption-width); }
.banner-slideshow__caption-inner { margin: auto 0; padding: var(--banner-slideshow-caption-padding); }

/* --------------------------------------------------------------------------
   Banners
   -------------------------------------------------------------------------- */
.layout-banners .has-keyline { padding-top:var(--margin); border-top:1px solid var(--black); }
.banner { gap:15px; }
.banner-image { aspect-ratio: var(--banner-aspect-ratio); }


/* --------------------------------------------------------------------------
   Featured
   -------------------------------------------------------------------------- */
.layout-featured .swiper-slide { z-index: 0; height: auto; min-height: calc(50vw * (540 / 720)); }
.layout-featured .swiper-buttons {  bottom: 0; right:var(--container-padding); top:auto; z-index: 2; }
.layout-featured .hero-single__image { position: relative; top: auto; height: 100%; aspect-ratio: auto; }
.layout-featured .hero-single__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Text & Image
   -------------------------------------------------------------------------- */
.text-image-media { aspect-ratio: var(--text-image-media-aspect-ratio); }
.text-image-text-inner { max-width: 576px; margin: auto; padding: var(--container-padding); }
.has-text-right .text-image-text  { order: 2; }

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.text__body { line-height: 1.5; column-gap: 40px; }
.richtext h4:first-child { margin-top:0; }
.richtext h4 { margin-bottom: 1lh; margin-top: 2lh; }
.richtext a:not(.button) { text-decoration: underline; }

/* Two & Three Columns */
.layout-text__two-columns, .layout-text__three-columns { --container-padding: var(--container-padding-inset-large); }
.layout-text__three-columns .text__body { column-count: 3;  }
.layout-text__two-columns .text__body { column-count: 2; }
.layout-text__two-columns p,
.layout-text__three-columns p { break-inside: avoid; }

/* Title Left */
.layout-text__title-left .text__inner { border-bottom: 0.5px solid var(--black); padding-bottom: var(--container-padding); }

/* Article */
.layout-text.is-article .text__inner { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Event */
.layout-text.is-event .text__inner { max-width: 800px; margin-left: auto; margin-right: auto; }
.event-meta { gap:24px; }

/* --------------------------------------------------------------------------
   Category
   -------------------------------------------------------------------------- */
.listing-header { top:var(--header-height-offset); padding-bottom: var(--grid-gap-x-small); gap:var(--grid-gap-x-small); z-index: 1; }
.listing-header h1 { margin-right: auto; line-height: var(--roundel-height); }
.listing-header.has-filters .brand-location-filters { margin-left: auto; }
.listing-filters { gap:var(--grid-gap-x-small); margin: 0 auto; }
.listing-search { max-width: calc(calc(100% - calc(var(--grid-gap) * 2)) / 3); width: 100%; margin: 0 auto; }
.listing-search-input { padding-left: 1lh; }
.listing-search-button { left: 0; top: 0; bottom: 0; width: var(--roundel-height); height: var(--roundel-height); padding: 12px; }
.listing-search-button svg { transition: var(--transition-color); }
.listing-search:hover svg,
.listing-search:focus-within svg { color: var(--accent); fill: currentcolor; }
.listing-search:hover input,
.listing-search-input:focus { border-color: var(--accent); box-shadow:none; }

/* Events */
.listing-header__events { gap:var(--grid-gap-x-small); }
.listing-header__events .listing-search { margin:0; }
.listing-header__events .listing-filters { margin:0; }

/* --------------------------------------------------------------------------
   Hero : Single ( Event / Brand / News )
   -------------------------------------------------------------------------- */
.hero-single__image { aspect-ratio: var(--hero-single-aspect-ratio); top: var(--header-height-offset); width: 100%; position: sticky; }
.hero-single__title { line-height: 1.1875; text-wrap: balance; }
.hero-single__caption { padding: var(--hero-single-padding);  }
.hero-single__caption div { margin:auto 0; max-width: 490px; margin-right: auto; }
.hero-single__caption .card__badge { margin-bottom: 0.5lh; }
.hero-single__labels { gap:10px; }

/* Brand Meta */
.brand-meta__socials { gap:var(--grid-gap-x-small); --icon-size:32px; margin-top:1lh; }

/* Brand Opening Times */
.meta__opening { max-width: 310px; line-height: 1.5; }
.meta__opening-times { max-width: 270px; }
.meta__opening-times-time { margin-left: auto; }


/* --------------------------------------------------------------------------
   Layout : Events
   -------------------------------------------------------------------------- */
.events__title { line-height: 2.5; writing-mode: vertical-rl; transform: rotateZ(180deg); transition: var(--transition-background); }
.events__title:hover { background-color: var(--accent); }

.card-event { aspect-ratio: var(--card-aspect-ratio); }
.card-event .card-tags { right: auto; left: 16px; }

.button-events { bottom:0; right:var(--container-padding); transition: var(--transition-background), var(--transition-color); }
.button-events:hover { background-color: var(--accent); color: #FFF; }

.layout-events .swiper-slide { opacity: 0.5; transition: var(--transition-fade); }
.layout-events .swiper-slide-active,
.layout-events .swiper-slide-next,
.layout-events .swiper-slide:hover { opacity: 1; }
.swiper-buttons-dark { background-color: var(--black); color: var(--white); padding: 10px; }
.swiper-buttons-dark .button-swiper:hover:not(.swiper-button-disabled) svg { color: var(--white); opacity: 0.6; }

/* --------------------------------------------------------------------------
   Layout : FAQs
   -------------------------------------------------------------------------- */
.faqs__header { margin-left: auto; margin-right: auto; }
.faq-filter { gap:var(--grid-gap-x-small); }
.faq-category__title { line-height: 2; }
.faq-category__title, .faq-item  { border-bottom: 0.5px solid var(--black); }
.faq-item { padding: 22px 0px; }
.faq-item__question { cursor: pointer; }
.faq-item__question img { width: 60px; height: 60px; position: absolute; right: 0; top:-10px; }
.faq-item__answer { padding-top:20px; max-width: 820px; }

/* --------------------------------------------------------------------------
   Layout : Instagram Feed
   -------------------------------------------------------------------------- */
.card-instagram-feed.image { aspect-ratio: var(--instagram-feed-aspect-ratio); }

/* --------------------------------------------------------------------------
   Layout : Brands Listing
   -------------------------------------------------------------------------- */
.brands-header { max-width: 50%; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Layout : Gallery
   -------------------------------------------------------------------------- */
.gallery__grid { grid-gap:10px; }
.gallery-item.landscape { aspect-ratio: 1/1; }
.gallery-item.portrait { aspect-ratio: 446/903; grid-row: span 2; }

/* --------------------------------------------------------------------------
   Layout : Image : Interactive
   -------------------------------------------------------------------------- */
.layout-image.is-interactive { position: relative; max-height: calc(80dvh - var(--header-height-offset)); width: 100%; overflow: hidden; }
.image-interactive { position: absolute; inset: 0; overflow: hidden; cursor: grab; display: flex; align-items: center; justify-content: center; -webkit-user-select: none; user-select: none; }
.image-interactive:active { cursor: grabbing; }
.image-interactive img { height: 100%; width: auto; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; transform-origin: center center; }
.image-interactive-controls { gap: 10px; right: var(--container-padding); top:var(--container-padding); user-select: none;  }
.image-interactive-controls button { width: 44px; height: 44px; border: 1px solid var(--black); background: var(--white); color: var(--black); line-height: 1; cursor: pointer; justify-content: center; align-items: center; transition: var(--transition-background), var(--transition-color); }
.image-interactive-controls button:hover { background: var(--black); color: var(--white); }
.image-interactive-controls button.is-disabled { opacity: 0.35; pointer-events: none; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination { gap: var(--grid-gap-x-small); }
.pagination a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--black); display: flex; line-height: 40px; justify-content: center; transition: var(--transition-color), var(--transition-background), var(--transition-border); }
.pagination .active a { border-color: var(--accent); background-color: var(--accent); color:var(--white); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { padding-top: var(--container-padding); padding-bottom: var(--container-padding); }
.footer-logo { aspect-ratio: var(--footer-logo-aspect-ratio); max-width: var(--footer-logo-width); bottom:0; right: var(--container-padding); width: 100%; }
.footer-logo svg { aspect-ratio: var(--footer-logo-aspect-ratio); }
.footer-menu-secondary { gap:12px; }
.footer-menu { line-height: 2; }
.footer-menu .is-active { font-weight: bold; }
.footer-menu a { transition: var(--transition-fade); }
.footer-menu.is-hovering a { opacity: 0.5; }
.footer-menu.is-hovering a.is-hovering { opacity: 1; }
.footer-newsletter { max-width: var(--footer-newsletter-width); margin-left: auto; }
.footer-newsletter-title { margin-bottom: 1lh; }
.footer-newsletter-form .icon {  top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.footer-newsletter-form .icon-loading { visibility: hidden; }
.footer-newsletter-form.is-loading .icon-right { visibility: hidden; }
.footer-newsletter-form.is-loading .icon-loading { visibility: visible; animation: loading 2s linear infinite; }
.footer-newsletter-feedback { margin-top: var(--margin-small); }
.footer-newsletter-feedback.is-error { color:var(--color-whats-on); }
.footer-newsletter-feedback.is-success { color:var(--black); }
.button-newsletter { width: 40px; height: 40px; right:10px; top:0; } 

@keyframes loading {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* --------------------------------------------------------------------------
   Media Queries
   -------------------------------------------------------------------------- */

@media (max-width: 1240px) {
   
   :root {
      /* Structure */
      --header-height: 90px;
      --header-offset: 90px;
      --header-height-offset: 90px !important;
   }

   /* Convert Menu to Hamburger */
   .header-menu-container { position: fixed; top:var(--header-height); left:0; bottom:0; max-width: 375px; width: 100%; flex-direction: column; background-color: var(--white); height: calc(100dvh - var(--header-height-condensed)); transform: translateX(-100%); transition: var(--transition-transform); visibility: visible; }  
   .header-menu-container.is-open { transform: translateX(0); visibility: visible; }
   .header-menu { flex-direction: column; gap:0; line-height: 2; padding: var(--container-padding); height: auto; width: 100%; margin: 0; }

   /* Header : Toggle Buttons */
   .header-menu-toggle, .header-search-toggle { width: 44px; height: 44px; bottom: 0; top:0; margin: auto 0; display: flex; }
   .header-menu-toggle { padding: 12px 10px; left:calc( var(--container-padding) - 10px); }
   .header-menu-toggle-bar { height: 2px; background:var(--black); }
   .header-search-toggle { padding:12px; right:calc( var(--container-padding) - 10px); }

   /* Header : Search */
   .header-search { position: absolute; top: var(--header-height); left: 0; right: 0; background-color: var(--white); padding-left: var(--container-padding); padding-right: var(--container-padding); padding-bottom: 16px; visibility: hidden; opacity: 0; transition: var(--transition-fade); }
   .header-search-input { border:0; padding-left:44px; }
   .header-search-input:focus { box-shadow: none; outline: 2px solid var(--black); }
   .header-search.is-open { visibility: visible; opacity: 1; }
   .header-search.is-open .header-search-input { opacity: 1; visibility: visible; }
   .header-search-form { position: relative; }
   .header-search-close { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 40px; height: 40px; padding: 6px; display: flex; }
   .header-search-input { padding-right: 44px; }
   .header-search-button { left:0; }
   .search-result-item--empty { text-align:center; grid-column: 1/-1; font-weight: bold; }

   /* Header : Search Results */
   .header-search-results { top:146px; }

   /* Header : Social */
   .header-social { bottom: var(--container-padding); top: auto; left: var(--container-padding); }

   /* Category : Filters */
   .listing-header.has-filters .brand-location-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: var(--grid-gap); grid-row-gap: var(--grid-gap-x-small); width: 100%; }

}

@media (max-width: 768px) {
   :root {
      /* Font Sizes : 80% reduction */
      --font-small: 11px;
      --font-regular: 13px;
      --font-regular-large: 14px;
      --font-medium: 19px;
      --font-medium-large: 24px;
      --font-large: 32px;

      --logo-width: 152px;
      --container-padding:32px;
      --container-padding-inset:32px;
      --container-padding-inset-large:32px;
      --footer-logo-width:95px;
      --grid-gap: 30px;
      --grid-gap-small: 20px;
      --grid-gap-x-small: 10px;
      --margin: 32px;
      --card-badge-height:30px;
      --roundel-height: 30px;

      /* Layout : Hero */
      --hero-aspect-ratio: 1/1;
      --hero-single-padding: var(--container-padding);

      /* Layout : Banner Slideshow */
      --banner-slideshow-aspect-ratio: 1/1;
   }

   /* Hero : Single */
   .hero-single__image { height: auto; position: relative; top:auto; }

   /* Banner : Slideshow */
   .banner-slideshow__caption { position: static; }
   .banner-slideshow__caption-inner { padding-left: 0; padding-right: 0; padding-bottom: 0; }
   .swiper-banner-slideshow { margin-left: calc( var(--container-padding) * -1); width: 100vw; }

   /* Cards */
   .card-news-spotlight .card-link { gap:0; }
   .card-news-spotlight .card-overlay { background-color: var(--black); position: static; }

   /* Featured */
   .layout-featured .hero-single__image { aspect-ratio: var(--hero-single-aspect-ratio); }
   .layout-featured .swiper-buttons { right:0; }

   /* Text */
   .layout-text__two-columns .text__body { column-count: 1; }
   .layout-text__title-left .text__inner { grid-gap:0; }

   /* Text & Image */
   .text-image-container { padding:0; }
   .text-image-media { grid-row:1; }
   .text-image-text { grid-row:2; }

   /* Map */
   .layout-image.is-interactive { aspect-ratio: 1/1 !important; max-height: none; }

   /* Brands */
   .brands-header { max-width: 100%; }

   /* Listing */
   .listing-search { max-width: none; margin: var(--grid-gap-x-small) 0; --roundel-height:40px; }
   .listing-header.has-filters .brand-location-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: var(--grid-gap-x-small); }

   /* News & Events */
   .layout-news-events h2 { line-height: normal; min-height: 44px; padding: 10px 100px 0 0; }
   .news-title.font-medium + .swiper-buttons { top: -9px; }

   /* News */
   .layout-news .swiper-buttons { top:0; }

   /* Events / What's On */
   .layout-events { --container-padding: 0; }
   .layout-events .swiper-buttons { top:auto; bottom:0; }
   .swiper-buttons-dark { padding: 0; }
   .swiper-buttons-dark .button-swiper { padding: 6px; }
   .button-events { display: none; }

   /* FAQs */
   .faq-categories { grid-gap:0; }
   .faq-item__question img { top: -12px; }

   /* Footer */
   .footer-menu-secondary { flex-direction: column; }
   .footer-menu-secondary span:not(.footer-copyright) { display: none; }
}

@media (max-width: 480px) {
   /* Header : Search */
   .header-search-results { --font-medium: var(--font-regular-large); --card-padding: 10px; }
}