/*
 Theme Name: GeneratePress Child - JW Portfolio
 Template: generatepress
 Version: 1.2.0
 Author: Jake Ward
 Description: Child theme for GeneratePress used across the Multisite (Director / DOP / Colourist / Camera Op).
 Text Domain: gp-jw-child
*/

/* ==========================================================================
   Navigation Position Fix - Float Right
   GeneratePress uses flex on .inside-header, so we use margin-left: auto
   to push the navigation to the right side
   ========================================================================== */

/* Ensure header uses horizontal flex layout on desktop - max specificity */
html body .site-header .inside-header,
html body.nav-float-right .site-header .inside-header,
html body.header-aligned-left .site-header .inside-header,
html body #page .site-header .inside-header,
body.nav-float-right.header-aligned-left .site-header .inside-header,
.site-header#masthead .inside-header,
header.site-header .inside-header,
header#masthead .inside-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  text-align: left !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 60px !important;
  position: relative !important;
}

/* White header background for Director site */
body.site-director .site-header,
body.site-director .main-navigation,
body.site-director .primary-navigation,
body.site-director .navigation-branding,
body.site-director .inside-header {
  background-color: #fff !important;
}

/* Center the logo absolutely in the header */
.site-header .inside-header .site-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Push navigation to the right - remove ALL right-side spacing */
.nav-float-right #site-navigation,
.nav-float-right #site-navigation.main-navigation,
body.nav-float-right #site-navigation {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  justify-content: flex-end !important;
}

/* Override the width and centering on navigation */
#site-navigation {
  width: auto !important;
  justify-content: flex-end !important;
}

/* Remove padding from inside-navigation and grid-container */
#site-navigation .inside-navigation,
#site-navigation .inside-navigation.grid-container,
.main-navigation .inside-navigation.grid-container,
.nav-float-right .main-navigation .inside-navigation.grid-container {
  padding-right: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

/* Remove right padding from the menu itself and align right */
#site-navigation .main-nav,
#site-navigation #primary-menu,
.main-navigation .main-nav,
.main-navigation .main-nav > ul {
  padding-right: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-end !important;
}

/* Hide the mobile menu control wrapper on desktop */
#mobile-menu-control-wrapper {
  display: none !important;
}

/* Mobile styles - restore mobile menu behavior */
@media (max-width: 768px) {
  .inside-header {
    flex-wrap: wrap !important;
  }

  #mobile-menu-control-wrapper {
    display: flex !important;
    margin-left: auto !important;
  }

  #site-navigation {
    display: none !important;
    flex-basis: 100% !important;
  }

  #site-navigation.toggled {
    display: block !important;
  }
}

/* End Navigation Position Fix */

.thumb-wrap {
  position: relative;
  overflow: hidden;
}

/* Video sits above the image */
.thumb-wrap .hover-trailer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Overlay text sits on top of everything */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.6em 1.2em;
  font-size: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.thumb-wrap:hover .overlay-text {
  opacity: 1;
}

/* Corner overlay text (bottom-right) */
.overlay-corner {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.4em 0.8em;
  font-size: 0.85rem;
  text-align: right;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.thumb-wrap:hover .overlay-corner {
  opacity: 1;
}

/* White background, dark text for Director site */
body.site-director,
body.site-director .site-content,
body.site-director .wp-block-group.has-background {
  background-color: #fff !important;
  color: #222 !important;
}

/* Black background, white text for DOP site */
body.site-dop,
body.site-dop .site-content,
body.site-dop .wp-block-group.has-background,
body.site-dop .inside-article,
body.site-dop .entry-content {
  background-color: #000 !important;
  color: #fff !important;
}

/* DOP site - add padding above gallery */
body.site-dop .site-content {
  padding-top: 60px !important;
}

/* Ensure links and headings are visible on DOP site, no underlines */
body.site-dop a {
  color: #fff;
  text-decoration: none !important;
}

body.site-dop a:hover {
  color: #fff;
  text-decoration: none !important;
}

/* Restore visible link colour inside page/post content on DOP site */
body.site-dop .entry-content a {
  color: #7eb8f7;
  text-decoration: underline !important;
}

body.site-dop .entry-content a:hover {
  color: #fff;
  text-decoration: underline !important;
}

body.site-dop h1,
body.site-dop h2,
body.site-dop h3,
body.site-dop h4,
body.site-dop h5,
body.site-dop h6 {
  color: #fff !important;
}

/* ==========================================================================
   DOP Site Header & Navigation - Black background, white text
   ========================================================================== */

/* Header background */
body.site-dop .site-header,
body.site-dop .main-navigation,
body.site-dop .primary-navigation,
body.site-dop .navigation-branding,
body.site-dop .inside-header {
  background-color: #000 !important;
}

/* DOP site - Navigation aligned right with gallery edge (1200px centered gallery) */
body.site-dop .site-header .inside-header,
body.site-dop .site-header .inside-header.grid-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 60px 0 20px 0 !important;
  position: relative !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.site-dop .site-header .inside-header .site-logo {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

body.site-dop #site-navigation {
  width: auto !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}

body.site-dop #site-navigation .inside-navigation,
body.site-dop .main-navigation .inside-navigation {
  justify-content: flex-end !important;
}

body.site-dop .main-navigation .main-nav,
body.site-dop .main-navigation .main-nav > ul {
  justify-content: flex-end !important;
}

body.site-dop #mobile-menu-control-wrapper {
  display: none !important;
}

@media (max-width: 768px) {
  body.site-dop #mobile-menu-control-wrapper {
    display: flex !important;
    margin-left: auto !important;
  }
  body.site-dop #site-navigation {
    display: none !important;
  }
}

/* Site title/logo */
body.site-dop .site-title a,
body.site-dop .site-branding a,
body.site-dop .main-title a {
  color: #fff !important;
}

body.site-dop .site-title a:hover,
body.site-dop .site-branding a:hover {
  color: #fff !important;
}

/* Main navigation menu items */
body.site-dop .main-navigation a,
body.site-dop .primary-navigation a,
body.site-dop .main-nav a,
body.site-dop .menu > li > a,
body.site-dop .main-navigation .menu > li > a {
  color: #fff !important;
}

body.site-dop .main-navigation a:hover,
body.site-dop .primary-navigation a:hover,
body.site-dop .main-nav a:hover,
body.site-dop .menu > li > a:hover {
  color: #fff !important;
  background-color: transparent !important;
}

body.site-dop .main-navigation .main-nav ul li:hover > a,
body.site-dop .main-navigation .main-nav ul li.sfHover > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent !important;
}

/* Dropdown menus */
body.site-dop .main-navigation ul ul,
body.site-dop .main-navigation .sub-menu {
  background-color: #000 !important;
}

body.site-dop .main-navigation ul ul a,
body.site-dop .main-navigation .sub-menu a {
  color: #fff !important;
}

/* Mobile menu toggle */
body.site-dop .menu-toggle,
body.site-dop .menu-toggle:hover,
body.site-dop .menu-toggle:focus {
  color: #fff !important;
  background-color: transparent !important;
}

body.site-dop .menu-toggle .mobile-menu,
body.site-dop .menu-toggle svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Director site dropdown menus - light theme */
body.site-director .main-navigation ul ul,
body.site-director .main-navigation .sub-menu {
  background-color: #fff !important;
}

body.site-director .main-navigation ul ul a,
body.site-director .main-navigation .sub-menu a {
  color: #222 !important;
}

/* Director site mobile menu toggle - light theme */
body.site-director .menu-toggle,
body.site-director .menu-toggle:hover,
body.site-director .menu-toggle:focus {
  color: #222 !important;
  background-color: transparent !important;
}

body.site-director .menu-toggle .mobile-menu,
body.site-director .menu-toggle svg {
  fill: #222 !important;
  color: #222 !important;
}

/* ==========================================================================
   Make gallery full-width edge-to-edge
   ========================================================================== */

/* Remove all max-width constraints on gallery containers */
.site-main .entry-content,
.site-main .inside-article,
.site-main article {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-query,
.wp-block-group:has(.wp-block-post-template),
.wp-block-group__inner-container,
.wp-block-post-template {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Reduce space above gallery */
.site-main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.site-main .inside-article {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.wp-block-query,
.wp-block-group:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-main .wp-block-group__inner-container {
  padding-top: 0 !important;
}

/* Remove page header spacing */
.page-header,
.entry-header {
  display: none !important;
}

/* Remove content container top padding */
.site-content .content-area,
.one-container .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   Single Project Page - Spacing
   ========================================================================== */

/* Fix column alignment on project pages - align to top */
.single-projects .wp-block-columns {
  align-items: flex-start !important;
}

.single-projects .wp-block-column {
  margin-top: 0 !important;
}

/* Consistent spacing above and below Vimeo/video embeds on project pages */
.single-projects .wp-block-embed,
.single-projects .wp-block-embed-vimeo,
.single-projects figure.wp-block-embed {
  margin-top: 0.5em !important;
  margin-bottom: 2em !important;
}

/* Limit content width on all project pages */
.single-projects .entry-content {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* Add spacing above and below credits paragraph */
.single-projects .entry-content > p:last-of-type {
  margin-top: 2em;
  margin-bottom: 0 !important;
}

/* Consistent spacing above the gallery on project pages */
.single-projects .wp-block-query,
.single-projects .wp-block-group:has(.wp-block-post-template) {
  margin-top: 2em !important;
}

/* Reduce spacing between headings on project pages */
.single-projects .entry-content h1,
.single-projects .entry-content h2,
.single-projects .entry-content h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.single-projects .entry-content h1 + h2,
.single-projects .entry-content h1 + h3,
.single-projects .entry-content h2 + h3 {
  margin-top: 0 !important;
}

/* Reduce spacing between video and heading */
.single-projects .jw-video-wrapper {
  margin-bottom: 0.25em !important;
}

.single-projects .jw-video-wrapper + h3,
.single-projects .jw-video-wrapper + .wp-block-heading {
  margin-top: 0.75em !important;
}

.single-projects .wp-block-embed,
.single-projects figure.wp-block-embed {
  margin-bottom: 0.75em !important;
}

/* Add space between embed and following heading */
.single-projects .wp-block-embed + h3,
.single-projects .wp-block-embed + .wp-block-heading,
.single-projects figure.wp-block-embed + h3,
.single-projects figure.wp-block-embed + .wp-block-heading {
  margin-top: 0.75em !important;
}

/* Reduce spacing between heading and paragraph */
.single-projects .entry-content h3 {
  margin-bottom: 0.75em !important;
  font-size: 2.25em !important;
}

.single-projects .entry-content h3 + p {
  margin-top: 0 !important;
}

/* Smaller text for second line of heading */
.single-projects .jw-heading-subtitle {
  font-size: 0.5em !important;
  font-weight: 700;
  display: block;
}

.single-projects .jw-heading-subtitle strong {
  font-size: inherit !important;
  font-weight: inherit;
}

/* ==========================================================================
   Project Credits Two-Column Layout
   ========================================================================== */

.jw-credits-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: 1.5rem 0;
  width: 100%;
}

.jw-credits-left,
.jw-credits-right {
  flex: 1;
}

.jw-credits-left {
  text-align: left;
}

.jw-credits-right {
  text-align: right;
}

.jw-credits-row p {
  margin: 0;
  line-height: 1.8;
}

.jw-credits-row strong {
  font-weight: 600;
}

/* Mobile: Stack columns */
@media (max-width: 600px) {
  .jw-credits-row {
    flex-direction: column;
    gap: 1rem;
  }

  .jw-credits-right {
    text-align: left;
  }
}

/* ==========================================================================
   Project Navigation (Next/Previous)
   ========================================================================== */

.jw-project-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.jw-project-nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.jw-project-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none !important;
  border-radius: 4px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  color: #fff !important;
}

.jw-project-nav-link:hover {
  background-color: transparent;
}

.jw-project-nav-disabled {
  opacity: 0;
  pointer-events: none;
}

.jw-project-nav-arrow {
  font-size: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Arrows move outward on hover */
.jw-project-nav-prev:hover .jw-project-nav-arrow {
  transform: translateX(-10px);
}

.jw-project-nav-next:hover .jw-project-nav-arrow {
  transform: translateX(10px);
}

/* Text brightens on hover */
.jw-project-nav-prev:hover .jw-project-nav-title,
.jw-project-nav-next:hover .jw-project-nav-title {
  opacity: 0.8;
}

.jw-project-nav-text {
  display: flex;
  flex-direction: column;
}

.jw-project-nav-prev .jw-project-nav-text {
  align-items: flex-start;
}

.jw-project-nav-next .jw-project-nav-text {
  align-items: flex-end;
}

.jw-project-nav-label {
  font-size: 1.1rem;
  font-weight: 600;
}

.jw-project-nav-title {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.jw-project-nav-home {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.jw-project-nav-home .jw-project-nav-label {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  position: relative;
}

/* Underline element */
.jw-project-nav-home .jw-project-nav-label::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.2s ease, left 0.2s ease;
}

/* Selected Works hover: brighten + underline */
.jw-project-nav-home:hover .jw-project-nav-label {
  opacity: 1;
}

.jw-project-nav-home:hover .jw-project-nav-label::after {
  width: 100%;
  left: 0;
}

/* DOP site (dark theme) */
body.site-dop .jw-project-nav {
  border-top-color: rgba(255, 255, 255, 0.2);
}

body.site-dop .jw-project-nav-link {
  color: #fff;
}

body.site-dop .jw-project-nav-link:hover {
  background-color: transparent;
}

/* Director site (light theme) */
body.site-director .jw-project-nav-link {
  color: #222;
}

body.site-director .jw-project-nav-link:hover {
  background-color: transparent;
}

/* Director site - no color change on hover */
body.site-director a:hover {
  color: inherit;
}

body.site-director .site-title a:hover,
body.site-director .site-branding a:hover {
  color: #222 !important;
}

body.site-director .main-navigation a:hover,
body.site-director .primary-navigation a:hover,
body.site-director .main-nav a:hover,
body.site-director .menu > li > a:hover {
  color: #222 !important;
  background-color: transparent !important;
}

body.site-director .main-navigation .main-nav ul li:hover > a,
body.site-director .main-navigation .main-nav ul li.sfHover > a,
body.site-director .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .jw-project-nav-inner {
    padding: 0 1rem;
  }

  .jw-project-nav-link {
    padding: 0.5rem 0.75rem;
  }

  .jw-project-nav-label {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Main Navigation - Animated Underline Hover
   ========================================================================== */

.main-navigation .main-nav ul li a {
  position: relative;
  color: #555 !important;
  opacity: 0.7;
  text-shadow: none;
  transform: translateY(0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Current/selected page - full black (when not hovering on nav) */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #222 !important;
  opacity: 1;
}

/* When hovering on nav, make all items grey including current page */
.main-navigation:hover .main-nav ul li a,
.main-navigation:hover .main-nav ul li.current-menu-item > a,
.main-navigation:hover .main-nav ul li.current_page_item > a,
.main-navigation:hover .main-nav ul li[class*="current-menu-"] > a,
.main-navigation:hover .main-nav ul li[class*="current_page_"] > a {
  color: #555 !important;
  opacity: 0.7;
}

/* Only the hovered item becomes black */
.main-navigation .main-nav ul li a:hover,
.main-navigation:hover .main-nav ul li a:hover,
.main-navigation:hover .main-nav ul li.current-menu-item > a:hover,
.main-navigation:hover .main-nav ul li.current_page_item > a:hover,
.main-navigation:hover .main-nav ul li[class*="current-menu-"] > a:hover,
.main-navigation:hover .main-nav ul li[class*="current_page_"] > a:hover {
  color: #222 !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* ==========================================================================
   DOP Site Navigation - Dark Theme Override
   ========================================================================== */

body.site-dop .main-navigation .main-nav ul li a {
  color: #aaa !important;
}

body.site-dop .main-navigation .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #fff !important;
}

body.site-dop .main-navigation:hover .main-nav ul li a,
body.site-dop .main-navigation:hover .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation:hover .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current_page_"] > a {
  color: #aaa !important;
}

body.site-dop .main-navigation .main-nav ul li a:hover,
body.site-dop .main-navigation:hover .main-nav ul li a:hover,
body.site-dop .main-navigation:hover .main-nav ul li.current-menu-item > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li.current_page_item > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current-menu-"] > a:hover,
body.site-dop .main-navigation:hover .main-nav ul li[class*="current_page_"] > a:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   Non-clickable Projects (disable_project_link)
   ========================================================================== */

.jw-no-link a,
article.jw-no-link a,
.wp-block-post.jw-no-link a {
  pointer-events: none;
  cursor: default;
}

.jw-no-link .thumb-wrap,
article.jw-no-link .thumb-wrap {
  cursor: default;
}

/* Remove default GeneratePress hover styles */
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li a:hover {
  background-color: transparent !important;
}

/* ==========================================================================
   Custom Video Thumbnail Overlay
   ========================================================================== */

.jw-video-wrapper {
  position: relative;
  width: 100%;
}

.jw-video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.jw-video-thumbnail.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.jw-video-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.jw-video-play-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
}

.jw-video-play-btn svg {
  width: 32px;
  height: 32px;
  color: #fff;
  margin-left: 4px;
}

.jw-video-wrapper .wp-block-embed {
  margin: 0 !important;
}

.jw-cf-wrap {
  position: relative;
}

.jw-cf-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jw-cf-wrap:hover .jw-cf-play-overlay {
  opacity: 1;
}

.jw-cf-play-overlay.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

.jw-cf-wrap .wp-block-embed {
  margin: 0 !important;
}

/* ==========================================================================
   DOP 3-Image Banner Layout
   ========================================================================== */

/* Force one project per row on DOP site */
body.site-dop .wp-block-post-template {
  display: block !important;
  gap: 0 !important;
}

body.site-dop .wp-block-post-template > li {
  width: 100% !important;
  max-width: 100% !important;
}

/* DOP project gallery container */
body.site-dop.home .dop-project-gallery {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

body.site-dop.home .dop-project-gallery > .project-banner-dop {
  margin: 0 0 40px 0;
  padding: 0;
}

/* Remove margin from last item */
body.site-dop.home .dop-project-gallery > .project-banner-dop:last-child {
  margin-bottom: 0;
}

body.site-dop .project-banner-dop,
body.site-dop .project-banner-dop > a {
  display: block;
  line-height: 0;
  font-size: 0;
}

body.site-dop .project-banner-dop .banner-row {
  display: flex;
  width: 100%;
  line-height: 0;
  font-size: 0;
  position: relative;
}

body.site-dop .project-banner-dop .banner-left,
body.site-dop .project-banner-dop .banner-center,
body.site-dop .project-banner-dop .banner-right {
  flex: 1;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
}

body.site-dop .project-banner-dop .banner-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hide page title on DOP homepage */
body.site-dop.home .entry-header {
  display: none !important;
}

/* Override Gutenberg block spacing variables on DOP homepage */
body.site-dop.home {
  --wp--preset--spacing--20: 0;
  --wp--preset--spacing--30: 0;
  --wp--preset--spacing--40: 0;
  --wp--preset--spacing--50: 0;
  --wp--preset--spacing--60: 0;
  --wp--preset--spacing--70: 0;
  --wp--preset--spacing--80: 0;
  --wp--style--block-gap: 0;
  --wp--style--root--padding-top: 0;
  --wp--style--root--padding-right: 0;
  --wp--style--root--padding-bottom: 0;
  --wp--style--root--padding-left: 0;
}

/* No gaps between banner items - reset wrapper elements only */
body.site-dop.home .wp-block-post-template,
body.site-dop.home .wp-block-post-template > li,
body.site-dop.home .wp-block-group,
body.site-dop.home .wp-block-group[style],
body.site-dop.home .wp-block-group__inner-container,
body.site-dop.home .wp-block-query,
body.site-dop.home .entry-content,
body.site-dop.home .inside-article,
body.site-dop.home .site-main,
body.site-dop.home .content-area,
body.site-dop.home article.page,
body.site-dop.home .is-layout-flow,
body.site-dop.home .is-layout-constrained,
body.site-dop.home .has-global-padding,
body.site-dop.home .alignfull {
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  border: 0 !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* Reset project card padding only - margin handled by gallery rules */
body.site-dop.home .project-card,
body.site-dop.home .project-banner-dop,
body.site-dop.home article.project-banner-dop {
  padding: 0 !important;
}

/* Reset Gutenberg flow layout spacing (uses margin-block-start on children) */
body.site-dop.home .is-layout-flow > *,
body.site-dop.home .is-layout-flow > * + *,
body.site-dop.home .is-layout-constrained > *,
body.site-dop.home .is-layout-constrained > * + *,
body.site-dop.home .wp-block-post-template > li,
body.site-dop.home .entry-content > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.site-dop .project-banner-dop a {
  display: block;
  line-height: 0;
  font-size: 0;
}

body.site-dop article.project-banner-dop {
  display: block;
  line-height: 0;
}

body.site-dop .project-banner-dop .banner-center.thumb-wrap {
  position: relative;
}

body.site-dop .project-banner-dop .hover-trailer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* DOP Banner hover - darken entire row */
body.site-dop .project-banner-dop .banner-row::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 2;
  pointer-events: none;
}

body.site-dop .project-banner-dop:hover .banner-row::after {
  opacity: 1;
}

/* Text overlay on hover - ensure it's above darken layer */
body.site-dop .project-banner-dop .overlay-text {
  z-index: 10;
  opacity: 1;
  background: none;
  padding: 0;
}

/* DOP overlay with name and client on separate lines */
body.site-dop .project-banner-dop .dop-overlay {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3em !important;
  width: auto !important;
  white-space: nowrap !important;
}

body.site-dop .project-banner-dop .dop-overlay .overlay-name {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0s;
}

body.site-dop .project-banner-dop:hover .dop-overlay .overlay-name {
  opacity: 1;
  transition-delay: 0s;
}

body.site-dop .project-banner-dop .dop-overlay .overlay-client {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0s;
}

body.site-dop .project-banner-dop:hover .dop-overlay .overlay-client {
  opacity: 0.8;
  transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 0.1s;
}

/* Mobile: Center image only */
@media (max-width: 768px) {
  body.site-dop .project-banner-dop .banner-left,
  body.site-dop .project-banner-dop .banner-right {
    display: none;
  }

  body.site-dop .project-banner-dop .banner-center {
    flex: 1;
  }
}

/* ==========================================================================
   Header Layout - Controlled by GeneratePress Customizer
   ========================================================================== */
/*
   Header position is now controlled via:
   Appearance > Customize > Layout > Header

   If you need CSS overrides, add them below.
*/

/* Keep current/selected page black (not blue) */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #222 !important;
}

/* DOP site - current page white */
body.site-dop .main-navigation .main-nav ul li.current-menu-item > a,
body.site-dop .main-navigation .main-nav ul li.current_page_item > a,
body.site-dop .main-navigation .main-nav ul li[class*="current-menu-"] > a,
body.site-dop .main-navigation .main-nav ul li[class*="current_page_"] > a {
  color: #fff !important;
}

/* ==========================================================================
   Custom Footer
   ========================================================================== */

/* Remove GeneratePress footer spacing */
.site-footer,
.footer-widgets,
.site-info {
  padding: 0 !important;
  margin: 0 !important;
}

.site-content,
.content-area,
.site-main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.jw-site-footer {
  padding: 1.5rem 0;
  text-align: center;
  margin-top: 1rem;
  background-color: #fff;
}

.jw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.jw-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.jw-footer-menu li {
  margin: 0;
  padding: 0;
}

.jw-footer-menu a {
  color: #555 !important;
  text-decoration: none !important;
  font-size: 0.9rem;
  position: relative;
  opacity: 0.7;
  text-shadow: none;
  transform: translateY(0);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.jw-footer-menu a:hover {
  color: #222 !important;
  text-decoration: none !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}


/* Social Icons */
.jw-social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.jw-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222 !important;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.jw-social-link:hover {
  opacity: 1;
}

.jw-social-link svg {
  width: 20px;
  height: 20px;
}

/* DOP site footer (black background) */
body.site-dop .jw-site-footer {
  background-color: #000;
}

body.site-dop .jw-footer-menu a {
  color: #fff !important;
}

/* DOP — hide GP default footer/site-info (replaced by jw-site-footer) */
body.site-dop .site-footer,
body.site-dop .site-info,
body.site-dop .footer-widgets {
  display: none !important;
}

/* DOP — page/body background black so no white gap shows */
body.site-dop,
body.site-dop #page {
  background-color: #000 !important;
}

/* DOP homepage - bottom padding before footer */
body.site-dop.home .inside-article,
body.site-dop.home .entry-content,
body.site-dop.home article.page {
  padding-bottom: 80px !important;
  margin-bottom: 0 !important;
}

/* Director homepage - remove bottom padding from gallery blocks */
body.site-director.home .entry-content > .wp-block-group,
body.site-director.home .entry-content > .wp-block-group > .wp-block-group__inner-container > .wp-block-group {
  padding-bottom: 20px !important;
}

body.site-director.home .inside-article,
body.site-director.home .entry-content,
body.site-director.home article.page {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* -----------------------------------------------------------------------------
   Glassfull Gallery - Two Column Layout
   ----------------------------------------------------------------------------- */
.glassfull-gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.glassfull-gallery-row {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 400px;
}

/* Alternate row direction - swap image/text sides */
.glassfull-gallery-row:nth-child(even) {
  grid-template-columns: 40% 60%;
}

.glassfull-gallery-row:nth-child(even) .glassfull-gallery-media {
  order: 2;
}

.glassfull-gallery-row:nth-child(even) .glassfull-gallery-content {
  order: 1;
}

/* Media column (thumbnail + video) */
.glassfull-gallery-media {
  position: relative;
  overflow: hidden;
  background: #000;
}

.glassfull-media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.glassfull-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.glassfull-hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.glassfull-gallery-row:hover .glassfull-hover-video {
  opacity: 1;
}

.glassfull-gallery-row.has-video:hover .glassfull-thumbnail {
  opacity: 0;
}

/* Hover overlay with "See More" and AFC text */
.glassfull-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
  pointer-events: none;
}

.glassfull-gallery-row:hover .glassfull-hover-overlay {
  opacity: 1;
}

.glassfull-overlay-text,
.glassfull-see-more {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: transform 0.4s ease;
  pointer-events: auto;
  cursor: pointer;
}

.glassfull-overlay-text:hover,
.glassfull-see-more:hover {
  transform: scale(1.1);
}

/* Content column */
.glassfull-gallery-content {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.glassfull-gallery-content.has-bg-image {
  background-size: cover;
  background-position: center;
}

.glassfull-gallery-content.bg-bw {
  filter: grayscale(100%);
}

.glassfull-gallery-content.bg-bw .glassfull-content-link {
  filter: grayscale(0%);
}

.glassfull-content-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.glassfull-content-link {
  text-decoration: none;
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 30px 50px;
  text-align: left;
}

/* Even rows - text on left, so align to right edge (closest to image) */
.glassfull-gallery-row:nth-child(even) .glassfull-content-link {
  justify-content: flex-end;
  text-align: right;
}

.glassfull-content-link .glassfull-description {
  transition: transform 0.3s ease;
}

.glassfull-gallery-content:hover .glassfull-description {
  transform: scale(1.05);
}

.glassfull-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5em 0;
  transition: color 0.3s ease;
}

.glassfull-content-link:hover .glassfull-title {
  color: #ccc;
}

.glassfull-description {
  font-size: 1.1rem;
  color: #fff;
  margin: 0;
  line-height: 1.6;
}

.glassfull-description p {
  margin: 0 0 0.5em 0;
}

.glassfull-description p:last-child {
  margin-bottom: 0;
}

.glassfull-description h1,
.glassfull-description h2,
.glassfull-description h3,
.glassfull-description h4 {
  color: #fff;
  margin: 0 0 0.3em 0;
}

.glassfull-description strong {
  font-weight: 700;
}

.glassfull-description em {
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .glassfull-gallery-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .glassfull-gallery-media {
    aspect-ratio: 16/9;
  }

  .glassfull-gallery-content {
    padding: 30px 20px;
  }

  .glassfull-title {
    font-size: 1.5rem;
  }
}

/* -----------------------------------------------------------------------------
   Glassfull - Hover Reveal (Service columns)
   ----------------------------------------------------------------------------- */
/* Smooth height transition for columns */
.hover-reveal-parent {
  min-height: 0;
  transition: min-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide the detail text by default */
.hover-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1), min-height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Individual lines - hidden by default */
.reveal-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Show when JS adds hover-active class */
.hover-reveal-parent.hover-active > .hover-reveal {
  min-height: var(--reveal-max-height, 500px);
  max-height: 1000px;
}

/* Animate lines one by one */
.hover-reveal-parent.hover-active .reveal-line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--delay, 0s);
}

/* -----------------------------------------------------------------------------
   Image Slider
   ----------------------------------------------------------------------------- */
.jw-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.jw-slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.jw-slider-image:first-child {
  position: relative;
}

.jw-slider-image.active {
  opacity: 1;
}

/* ==========================================================================
   Piccolo GLX Site Styles
   ========================================================================== */

/* Import Montserrat font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Base styles for Piccolo GLX site */
body.site-piccologlx {
  background-color: #fff !important;
  color: #0d141a !important;
  font-family: 'Montserrat', sans-serif !important;
}

body.site-piccologlx h1,
body.site-piccologlx h2,
body.site-piccologlx h3,
body.site-piccologlx h4,
body.site-piccologlx h5,
body.site-piccologlx h6 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  line-height: 1.3;
}

body.site-piccologlx h1 { font-size: 64px; }
body.site-piccologlx h2 { font-size: 56px; }
body.site-piccologlx h3 { font-size: 48px; }
body.site-piccologlx h4 { font-size: 40px; }

body.site-piccologlx .site-header,
body.site-piccologlx .inside-header {
  background-color: #fff !important;
  border-bottom: none;
  padding: 8px 20px !important;
}

body.site-piccologlx .main-navigation .main-nav ul li a {
  font-family: 'Montserrat', sans-serif !important;
  color: #0d141a !important;
  font-weight: 400;
  font-size: 16px;
}

/* Hide default page title on Piccolo homepage */
body.site-piccologlx.home .entry-header,
body.site-piccologlx.page .entry-header {
  display: none !important;
}

/* Remove content padding for full-width sections */
body.site-piccologlx .site-main .entry-content {
  padding: 0 !important;
  max-width: none !important;
}

body.site-piccologlx .inside-article {
  padding: 0 !important;
}

body.site-piccologlx .site-content,
body.site-piccologlx .content-area,
body.site-piccologlx .site-main,
body.site-piccologlx .inside-article,
body.site-piccologlx .entry-content,
body.site-piccologlx .piccolo-homepage,
body.site-piccologlx .site.grid-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.site-piccologlx .entry-header {
  display: none !important;
}

body.site-piccologlx .site-main > article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.site-piccologlx .one-container .container {
  padding-top: 0 !important;
}

/* Override general header styles for Piccolo GLX */
body.site-piccologlx.nav-float-right .site-header .inside-header,
body.site-piccologlx .site-header .inside-header,
body.site-piccologlx header#masthead .inside-header {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ==========================================================================
   Piccolo Homepage - Hero Section
   ========================================================================== */

body.site-piccologlx .piccolo-hero {
  background: #000 url('') center center / cover no-repeat !important;
  min-height: auto !important;
  aspect-ratio: 16 / 9 !important;
  display: flex !important;
  align-items: center !important;
  position: relative;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100vw !important;
  border-radius: 0 !important;
  overflow: hidden;
  margin-left: calc(-50vw + 50%) !important;
}

/* Placeholder gradient for hero until image is added */
body.site-piccologlx .piccolo-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #3d2a00 50%, #c97d00 100%);
  z-index: 0;
}

body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
  padding: 60px;
}

body.site-piccologlx .hero-content {
  max-width: 500px;
}

body.site-piccologlx .hero-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

body.site-piccologlx .hero-title {
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 1em;
}

body.site-piccologlx .hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

body.site-piccologlx .hero-buttons .wp-block-button__link {
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 999px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.site-piccologlx .btn-primary .wp-block-button__link {
  background-color: #fff !important;
  color: #1a1a1c !important;
  border: none !important;
}

body.site-piccologlx .btn-primary .wp-block-button__link:hover {
  background-color: #f0f0f0 !important;
}

body.site-piccologlx .btn-outline .wp-block-button__link {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #fff !important;
}

body.site-piccologlx .btn-outline .wp-block-button__link:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

/* ==========================================================================
   Piccolo Homepage - Category Cards
   ========================================================================== */

body.site-piccologlx .category-cards {
  padding: 100px 20px 60px;
  background: #f8f8f8;
}

body.site-piccologlx .category-cards .wp-block-columns {
  gap: 20px;
}

body.site-piccologlx .category-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  min-height: 200px;
  position: relative;
}

body.site-piccologlx .category-card .card-inner {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

body.site-piccologlx .category-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 1rem 0;
}

body.site-piccologlx .category-card .card-image {
  width: 50%;
  min-height: 180px;
  background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%);
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .btn-card .wp-block-button__link {
  background-color: #222 !important;
  color: #fff !important;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  border-radius: 50px;
}

body.site-piccologlx .btn-card .wp-block-button__link:hover {
  background-color: #444 !important;
}

/* ==========================================================================
   Piccolo Homepage - Featured Section
   ========================================================================== */

body.site-piccologlx .featured-section {
  padding: 60px 20px;
}

body.site-piccologlx .featured-section .wp-block-columns {
  gap: 20px;
  align-items: stretch;
}

body.site-piccologlx .featured-main {
  background: linear-gradient(135deg, #3a3a3a 0%, #5a5a5a 100%);
  border-radius: 12px;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}

body.site-piccologlx .featured-main-inner {
  position: absolute;
  bottom: 40px;
  left: 40px;
  right: 40px;
}

body.site-piccologlx .featured-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

body.site-piccologlx .featured-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1em;
}

body.site-piccologlx .featured-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.site-piccologlx .featured-card {
  flex: 1;
  border-radius: 12px;
  padding: 30px;
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .featured-lighting {
  background: linear-gradient(135deg, #c4b8a8 0%, #8a7a6a 100%);
}

body.site-piccologlx .featured-rentals {
  background: linear-gradient(135deg, #2a2015 0%, #3d3020 100%);
}

body.site-piccologlx .featured-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* ==========================================================================
   Piccolo Homepage - Products Section
   ========================================================================== */

body.site-piccologlx .products-section {
  padding: 60px 20px;
}

body.site-piccologlx .products-header {
  text-align: right;
  margin-bottom: 30px;
}

body.site-piccologlx .products-header p {
  color: #666;
  font-size: 0.9rem;
}

body.site-piccologlx .product-grid {
  gap: 30px;
}

body.site-piccologlx .product-item {
  text-align: left;
}

body.site-piccologlx .product-item .product-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
  border-radius: 8px;
  margin-bottom: 15px;
  background-size: cover;
  background-position: center;
}

body.site-piccologlx .product-item h4 {
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 5px 0;
}

body.site-piccologlx .product-price {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
}

/* ==========================================================================
   Piccolo Homepage - Newsletter Section
   ========================================================================== */

body.site-piccologlx .newsletter-section {
  background-color: #1A2233 !important;
  padding: 100px 20px;
  margin-top: 60px;
}

body.site-piccologlx .newsletter-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 0.5em;
}

body.site-piccologlx .newsletter-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  margin-bottom: 2em;
}

body.site-piccologlx .newsletter-form {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}

body.site-piccologlx .newsletter-input,
body.site-piccologlx .footer-email-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  background: #fff;
  font-size: 1rem;
  color: #222;
}

body.site-piccologlx .newsletter-input::placeholder,
body.site-piccologlx .footer-email-input::placeholder {
  color: #999;
}

body.site-piccologlx .btn-newsletter .wp-block-button__link {
  background-color: #3a4a64 !important;
  color: #fff !important;
  padding: 1rem 2rem;
  border-radius: 8px;
}

body.site-piccologlx .btn-newsletter .wp-block-button__link:hover {
  background-color: #4a5a74 !important;
}

/* ==========================================================================
   Piccolo Homepage - Footer
   ========================================================================== */

/* Shared footer, now rendered via wp_footer (functions.php) on all four
   Piccolo sites instead of living in GLX's homepage content — page-content
   copies of shared chrome have proven fragile (an editor save silently
   wiped the Shop banner's styling once already). Page background colour
   is deliberately NOT touched here for Film/Shop, which have their own
   white-background designs — the footer bar is self-contained black
   regardless of what's above it. */
body.site-piccologlx .piccolo-footer,
body.site-piccolocamera .piccolo-footer,
body.site-piccolofilm .piccolo-footer,
body.site-piccoloshop .piccolo-footer {
  background-color: #000 !important;
  padding: 60px 20px 30px;
  color: #fff;
}

body.site-piccologlx .piccolo-footer .wp-block-columns,
body.site-piccolocamera .piccolo-footer .wp-block-columns,
body.site-piccolofilm .piccolo-footer .wp-block-columns,
body.site-piccoloshop .piccolo-footer .wp-block-columns {
  max-width: 1200px;
  margin: 0 auto;
}

body.site-piccologlx .piccolo-footer h3,
body.site-piccolocamera .piccolo-footer h3,
body.site-piccolofilm .piccolo-footer h3,
body.site-piccoloshop .piccolo-footer h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1em;
}

body.site-piccologlx .piccolo-footer p,
body.site-piccolocamera .piccolo-footer p,
body.site-piccolofilm .piccolo-footer p,
body.site-piccoloshop .piccolo-footer p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
}

body.site-piccologlx .footer-heading,
body.site-piccolocamera .footer-heading,
body.site-piccolofilm .footer-heading,
body.site-piccoloshop .footer-heading {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 1em;
  text-transform: uppercase;
}

body.site-piccologlx .footer-social,
body.site-piccolocamera .footer-social,
body.site-piccolofilm .footer-social,
body.site-piccoloshop .footer-social {
  margin-top: 1.5em;
}

body.site-piccologlx .footer-social a,
body.site-piccolocamera .footer-social a,
body.site-piccolofilm .footer-social a,
body.site-piccoloshop .footer-social a {
  color: #fff !important;
}

/* Instagram icon — force white, override brand pink */
body.site-piccologlx .wp-social-link-instagram,
body.site-piccologlx .wp-social-link,
body.site-piccolocamera .wp-social-link-instagram,
body.site-piccolocamera .wp-social-link,
body.site-piccolofilm .wp-social-link-instagram,
body.site-piccolofilm .wp-social-link,
body.site-piccoloshop .wp-social-link-instagram,
body.site-piccoloshop .wp-social-link {
  background-color: transparent !important;
  color: #fff !important;
}

body.site-piccologlx .wp-social-link-instagram svg,
body.site-piccologlx .wp-social-link svg,
body.site-piccolocamera .wp-social-link-instagram svg,
body.site-piccolocamera .wp-social-link svg,
body.site-piccolofilm .wp-social-link-instagram svg,
body.site-piccolofilm .wp-social-link svg,
body.site-piccoloshop .wp-social-link-instagram svg,
body.site-piccoloshop .wp-social-link svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Page background black so no white gap below footer — GLX only, since
   Film and Shop have their own deliberate white-background designs. */
body.site-piccologlx,
body.site-piccologlx #page {
  background-color: #000 !important;
}

body.site-piccologlx .btn-footer .wp-block-button__link {
  background-color: #3a4a64 !important;
  color: #fff !important;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  margin-top: 10px;
}

body.site-piccologlx .footer-bottom,
body.site-piccolocamera .footer-bottom,
body.site-piccolofilm .footer-bottom,
body.site-piccoloshop .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

body.site-piccologlx .footer-bottom p,
body.site-piccolocamera .footer-bottom p,
body.site-piccolofilm .footer-bottom p,
body.site-piccoloshop .footer-bottom p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

body.site-piccologlx .footer-bottom a,
body.site-piccolocamera .footer-bottom a,
body.site-piccolofilm .footer-bottom a,
body.site-piccoloshop .footer-bottom a {
  color: rgba(255,255,255,0.7);
  text-decoration: underline;
}

/* Hide default GP theme footer — piccolo-footer replaces it, everywhere */
body.site-piccologlx .site-footer,
body.site-piccologlx .site-info,
body.site-piccologlx .footer-widgets,
body.site-piccologlx .jw-site-footer,
body.site-piccolocamera .site-footer,
body.site-piccolocamera .site-info,
body.site-piccolocamera .footer-widgets,
body.site-piccolocamera .jw-site-footer,
body.site-piccolofilm .site-footer,
body.site-piccolofilm .site-info,
body.site-piccolofilm .footer-widgets,
body.site-piccolofilm .jw-site-footer,
body.site-piccoloshop .site-footer,
body.site-piccoloshop .site-info,
body.site-piccoloshop .footer-widgets,
body.site-piccoloshop .jw-site-footer {
  display: none !important;
}

/* Page and body background black — prevents white gap under footer */
body.site-piccologlx,
body.site-piccologlx #page,
body.site-piccologlx .site-content {
  background-color: #000 !important;
}

/* Remove GP's 40px bottom padding on the homepage inner container — causes gap under footer */
body.site-piccologlx .piccolo-homepage > .wp-block-group__inner-container {
  padding-bottom: 0 !important;
}

/* "Our Work" outer wrapper is transparent — give it white bg so padding shows correctly */
body.site-piccologlx .gb-element-acff8630 {
  background-color: #fff !important;
}

/* "Our Set ups" outer wrapper — keep black bg (it's on a black section) */
body.site-piccologlx .gb-element-1745dbc2 {
  background-color: #000 !important;
}

/* Instagram icon — remove pink brand background, show white icon */
body.site-piccologlx li.wp-social-link,
body.site-piccologlx li.wp-social-link-instagram {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.site-piccologlx li.wp-social-link svg path,
body.site-piccologlx li.wp-social-link-instagram svg path {
  fill: #ffffff !important;
}

/* Match Lighting/Grip/Van grid width to nav banner (120px padding, 2120px max) */
body.site-piccologlx .gb-element-3d7c604c {
  padding-left: 120px !important;
  padding-right: 120px !important;
  max-width: 2120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Piccolo GLX - Responsive
   ========================================================================== */

@media (max-width: 768px) {
  body.site-piccologlx .hero-title {
    font-size: 2.5rem;
  }

  body.site-piccologlx .category-card {
    flex-direction: column;
  }

  body.site-piccologlx .category-card .card-image {
    width: 100%;
    min-height: 150px;
  }

  body.site-piccologlx .featured-main {
    min-height: 350px;
  }

  body.site-piccologlx .featured-title {
    font-size: 1.8rem;
  }

  body.site-piccologlx .product-grid {
    flex-wrap: wrap;
  }

  body.site-piccologlx .product-grid .wp-block-column {
    flex-basis: calc(50% - 15px) !important;
  }

  body.site-piccologlx .newsletter-form {
    flex-direction: column;
  }

  body.site-piccologlx .piccolo-footer .wp-block-columns,
  body.site-piccolocamera .piccolo-footer .wp-block-columns,
  body.site-piccolofilm .piccolo-footer .wp-block-columns,
  body.site-piccoloshop .piccolo-footer .wp-block-columns {
    flex-direction: column;
    gap: 30px;
  }
}

/* =============================================================
   Piccolo Master Navigation Bar
   Shown on all four Piccolo blogs (5, 10, 12, 14)
   ============================================================= */

.piccolo-master-nav {
  width: 100%;
  background: #000;
  padding: 0 120px;
  box-sizing: border-box;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.piccolo-master-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 2240px;
  margin: 0 auto;
  height: 48px;
}

.piccolo-master-logo {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  white-space: nowrap;
}

.piccolo-master-logo:hover {
  opacity: 1;
  color: #fff;
}

.piccolo-master-links-group {
  display: flex;
  align-items: center;
  gap: 32px;
}

.piccolo-master-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.piccolo-master-link,
.piccolo-master-link--soon {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

a.piccolo-master-link:hover {
  color: #fff;
}

.piccolo-master-link--active {
  color: #fff;
}

.piccolo-master-link--soon {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 7px;
}

.piccolo-soon-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 3px;
  padding: 2px 5px;
  line-height: 1.4;
}

/* Push fixed nav below WP admin bar when logged in */
body.admin-bar .piccolo-master-nav {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .piccolo-master-nav {
    top: 46px;
  }
}

@media (max-width: 768px) {
  .piccolo-master-nav {
    padding: 0 24px;
  }

  .piccolo-master-nav-inner {
    height: 48px;
  }

  /* Cart icon stays visible next to the hamburger; only the site-switcher
     links collapse into the dropdown. */
  .piccolo-master-links-group {
    gap: 16px;
  }

  /* Hide desktop nav links, show hamburger */
  .piccolo-master-links {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    background: #000;
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 9998;
  }

  .piccolo-master-links.mobile-open {
    display: flex;
  }

  /* Hamburger button */
  .piccolo-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
  }

  .piccolo-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
  }

  /* Animate to X when open */
  .piccolo-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .piccolo-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }
  .piccolo-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Nav dropdown items full width */
  .piccolo-master-links .piccolo-master-link {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  .piccolo-hamburger {
    display: none;
  }
}

/* =============================================================
   Piccolo Shop — cart icon in navigation (blog 14)
   ============================================================= */

.piccolo-cart-icon-link {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}

.piccolo-cart-icon-link:hover {
  opacity: 0.7;
}

.piccolo-cart-icon-link svg {
  display: block;
}

.piccolo-cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ==========================================================================
   Piccolo GLX (blog 10) fixes
   ========================================================================== */

/* Hide GP site header (branding/nav bar) — piccolo-master-nav replaces it.
   !important because GeneratePress's own dynamic CSS sets display on
   #masthead with an ID selector, which otherwise outranks this rule
   regardless of load order — that's what was showing through as a whole
   extra dark header bar between the new banner and the hero image. */
body.site-piccologlx .site-header,
body.site-piccolocamera .site-header,
body.site-piccoloshop .site-header,
body.site-piccolofilm .site-header {
  display: none !important;
}

/* Offset page content below fixed piccolo-master-nav (48px) on non-hero pages */
body.site-piccologlx #page,
body.site-piccolocamera #page,
body.site-piccoloshop #page,
body.site-piccolofilm #page {
  padding-top: 48px;
}

/* Hero/front pages already get their clearance from the Piccolo banner sitting
   in normal flow below the fixed nav — the 48px above is redundant there and,
   combined with the forced-black #page background, rendered as a solid black
   bar above the hero image. */
body.site-piccologlx.home #page,
body.site-piccolocamera.home #page,
body.site-piccoloshop.home #page,
body.site-piccolofilm.home #page {
  padding-top: 0 !important;
}

/* Hero pages used to pull the hero image up -48px to tuck directly behind
   the fixed nav with zero gap. Now that the shared Piccolo banner sits
   between the nav and #page, that negative margin instead opens a gap
   that exposes GLX's forced-black page background — removed. */
body.site-piccologlx .piccolo-homepage {
  margin-top: 0;
}

/* Hide WordPress page title above hero */
body.site-piccologlx .entry-title,
body.site-piccologlx .entry-header {
  display: none;
}

/* Align hero text left edge with piccolo-master-nav "PICCOLO FILM" logo */
body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
  padding-left: 120px;
  padding-right: 120px;
  max-width: 2240px; /* matches jake-ward.com 2000px container + 60px side padding */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Add breathing room above "The ultimate Swiss Army knife" section */
body.site-piccologlx .category-cards {
  padding-top: 80px;
}

@media (max-width: 768px) {
  /* Hero: full viewport height, content in lower-centre */
  body.site-piccologlx .piccolo-hero.wp-block-cover {
    min-height: 88svh !important;
    align-items: center !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-cover__inner-container {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 30%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
  }

  body.site-piccologlx .piccolo-hero .hero-content {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .hero-label {
    display: block !important;
    text-align: center !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: 0.5em !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .hero-title,
  body.site-piccologlx .piccolo-hero .wp-block-heading {
    text-align: center !important;
    width: 100% !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-buttons,
  body.site-piccologlx .piccolo-hero .hero-buttons {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
  }

  body.site-piccologlx .piccolo-hero .wp-block-button {
    text-align: center !important;
  }

  /* Category cards: override the 400px inline padding from block editor */
  body.site-piccologlx .gb-element-3d7c604c {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px !important;
  }

  /* Our Work / Our Set ups headings: kill the oversized padding-right */
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-ed7fc634 {
    padding-right: 0 !important;
  }

  /* Reduce heading font size so it fits on one line on mobile */
  body.site-piccologlx .gb-text-a839e02f,
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-b6ff42e9,
  body.site-piccologlx .gb-text-ed7fc634 {
    font-size: 1.9rem !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
  }

  /* Centre the heading group: flex container centres the inline grid */
  body.site-piccologlx .gb-element-f1539507,
  body.site-piccologlx .gb-element-d2eb7628,
  body.site-piccologlx .gb-element-6628c81c,
  body.site-piccologlx .gb-element-dd839cf0 {
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Shrink grids to content width and centre them */
  body.site-piccologlx .gb-element-cf26d081,
  body.site-piccologlx .gb-element-7c05582c,
  body.site-piccologlx .gb-element-bd9195ce,
  body.site-piccologlx .gb-element-5e386bca {
    display: inline-grid !important;
    grid-template-columns: auto auto !important;
    width: auto !important;
  }

  /* "Our" right-aligned, "Work"/"Set ups" left-aligned — stagger preserved */
  body.site-piccologlx .gb-text-a839e02f,
  body.site-piccologlx .gb-text-b6ff42e9 {
    text-align: right !important;
    justify-content: flex-end !important;
    padding-right: 8px !important;
  }
  body.site-piccologlx .gb-text-14205855,
  body.site-piccologlx .gb-text-ed7fc634 {
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 8px !important;
  }

  /* Only reserve dropdown space for the ACTIVE card — not all three */
  .hover-reveal-parent:not(.hover-active) {
    min-height: 0 !important;
  }

  /* Remove transitions on mobile — prevents animated gap from calculateHeights() */
  .hover-reveal-parent {
    transition: none !important;
  }
  .hover-reveal {
    transition: none !important;
    max-height: none !important;
    height: auto !important;
  }
  .hover-reveal-parent:not(.hover-active) .hover-reveal {
    display: none !important;
  }
  .hover-reveal-parent.hover-active .hover-reveal {
    display: block !important;
  }

  /* Override desktop 500px default min-height — use content height only on mobile */
  .hover-reveal-parent.hover-active > .hover-reveal {
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Add bottom breathing room to the black Lighting/Grip/Van section */
  body.site-piccologlx .gb-element-1f807f42 {
    padding-bottom: 40px !important;
  }

  /* Hide empty placeholder block that creates a 100px gap */
  body.site-piccologlx .gb-element-0bc58d5b {
    display: none !important;
  }

  /* Reduce section top padding on mobile */
  body.site-piccologlx .category-cards {
    padding-top: 40px;
  }
}

/* Glassfull mobile title — hidden on desktop, shown on mobile */
.glassfull-mobile-title {
  display: none;
}

/* ==========================================================================
   Glass Full (blog 9) — mobile fixes
   ========================================================================== */
@media (max-width: 768px) {

  /* Add side padding to outer containers so text doesn't bleed off screen */
  body.site-glassfull .gb-element-37201197,
  body.site-glassfull .gb-element-da1747eb,
  body.site-glassfull .gb-element-f1539507,
  body.site-glassfull .gb-element-d2eb7628 {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Keep 2-col grids for staggered headings (preserves the diagonal layout) */
  body.site-glassfull .gb-element-410a2614,
  body.site-glassfull .gb-element-b3b5f16e,
  body.site-glassfull .gb-element-cf26d081,
  body.site-glassfull .gb-element-7c05582c {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Remove 250px right padding that makes text too narrow on mobile */
  body.site-glassfull .gb-text-88e513a2,
  body.site-glassfull .gb-text-14205855 {
    padding-right: 0 !important;
  }

  /* Scale down staggered headings so they fit one line */
  body.site-glassfull .gb-text-b14b72a3,
  body.site-glassfull .gb-text-88e513a2,
  body.site-glassfull .gb-text-fb5edf94,
  body.site-glassfull .gb-text-14205855 {
    font-size: 1.6rem !important;
    letter-spacing: -1px !important;
  }

  /* Reduce oversized section padding */
  body.site-glassfull .gb-element-37201197 {
    padding-top: 40px !important;
  }
  body.site-glassfull .gb-element-da1747eb {
    padding-bottom: 40px !important;
  }
  body.site-glassfull .gb-element-f1539507 {
    padding-top: 40px !important;
  }
  body.site-glassfull .gb-element-d2eb7628 {
    padding-bottom: 40px !important;
  }

  /* Pre/Production/Post grid — override 150px padding */
  body.site-glassfull .gb-element-3d7c604c {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 40px !important;
  }

  /* Hide empty placeholder block with 100px top padding */
  body.site-glassfull .gb-element-0bc58d5b {
    display: none !important;
  }

  /* Mobile menu toggle — remove grey square background */
  body.site-glassfull .menu-toggle,
  body.site-glassfull .mobile-menu-control-wrapper .menu-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Reduce the 100px spacer before "Get in touch" */
  body.site-glassfull .wp-block-spacer {
    height: 40px !important;
  }

  /* Gallery: single full-width image per project on mobile */
  body.site-glassfull .glassfull-gallery {
    gap: 0 !important;
  }

  body.site-glassfull .glassfull-gallery-row,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  /* Media fills full width, height determined by image aspect ratio */
  body.site-glassfull .glassfull-gallery-media,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) .glassfull-gallery-media {
    width: 100% !important;
    position: relative !important;
    min-height: 0 !important;
  }

  /* Image sizes naturally — no forced height causing gaps */
  body.site-glassfull .glassfull-media-link {
    height: auto !important;
  }

  body.site-glassfull .glassfull-thumbnail {
    height: auto !important;
    width: 100% !important;
    display: block !important;
    object-fit: unset !important;
  }

  body.site-glassfull .glassfull-gallery-content,
  body.site-glassfull .glassfull-gallery-row:nth-child(even) .glassfull-gallery-content {
    display: none !important;
  }

  /* Hide hover overlay entirely on mobile (no hover on touch) */
  body.site-glassfull .glassfull-hover-overlay {
    display: none !important;
  }

  /* Mobile title — shown over the media image */
  body.site-glassfull .glassfull-mobile-title {
    display: block;
    position: absolute;
    bottom: 16px;
    left: 16px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 5;
  }

  /* "Coming soon" variant — centred */
  body.site-glassfull .glassfull-mobile-coming-soon {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  /* Prevent hover-reveal gap on mobile (same fix as GLX) */
  body.site-glassfull .hover-reveal-parent {
    transition: none !important;
  }
  body.site-glassfull .hover-reveal {
    transition: none !important;
    max-height: none !important;
  }
  body.site-glassfull .hover-reveal-parent:not(.hover-active) .hover-reveal {
    display: none !important;
  }
  body.site-glassfull .hover-reveal-parent.hover-active .hover-reveal {
    display: block !important;
  }
  body.site-glassfull .hover-reveal-parent.hover-active > .hover-reveal {
    min-height: 0 !important;
    max-height: none !important;
  }
  body.site-glassfull .hover-reveal-parent:not(.hover-active) {
    min-height: 0 !important;
  }
}

/* ==========================================================================
   Typographic Banner
   ========================================================================== */

.jw-typo-banner {
  padding: 20px 0 16px;
}

.jw-typo-title {
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

.jw-typo-line.wp-block-separator {
  width: 60px !important;
  border-top: 2px solid currentColor !important;
  opacity: 0.2 !important;
  margin: 24px 0 0 !important;
}

.jw-typo-sub {
  font-size: 14px !important;
  color: #888 !important;
  margin: 16px 0 0 !important;
}

.jw-typo-divider.wp-block-separator {
  opacity: 0.1 !important;
  margin: 48px 0 !important;
}

.jw-typo-banner--dark .jw-typo-title {
  color: #fff !important;
}

.jw-typo-banner--dark .jw-typo-line.wp-block-separator {
  border-color: #fff !important;
}

.jw-typo-banner--dark .jw-typo-sub {
  color: rgba(255,255,255,0.5) !important;
}

.jw-typo-section-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #888 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* ==========================================================================
   Genre Gallery
   ========================================================================== */

.jw-genre-gallery {
  max-width: 1400px;
  margin: 0 auto;
}

/* --- Featured section --- */
.jw-genre-featured {
  margin-bottom: 24px;
}

.jw-genre-featured-grid.wp-block-post-template {
  display: grid !important;
  gap: 16px !important;
}

.jw-genre-featured--count-1 .jw-genre-featured-grid {
  grid-template-columns: 1fr !important;
}

.jw-genre-featured--count-2 .jw-genre-featured-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.jw-genre-featured--count-3 .jw-genre-featured-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

.jw-genre-featured .wp-block-post {
  aspect-ratio: 16 / 9 !important;
}

@media (max-width: 1024px) {
  .jw-genre-featured--count-3 .jw-genre-featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .jw-genre-featured--count-2 .jw-genre-featured-grid,
  .jw-genre-featured--count-3 .jw-genre-featured-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Gallery grid: alternating 3-2 layout with mixed ratios --- */
.jw-genre-grid-list.wp-block-post-template {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.jw-genre-grid-list .wp-block-post {
  overflow: hidden !important;
  background-color: #000 !important;
}

/* Alternating 3-2 pattern */
.jw-genre-grid-list .wp-block-post:nth-child(5n+1),
.jw-genre-grid-list .wp-block-post:nth-child(5n+2),
.jw-genre-grid-list .wp-block-post:nth-child(5n+3) {
  width: calc((100% - 32px) / 3) !important;
  flex: 0 0 calc((100% - 32px) / 3) !important;
  aspect-ratio: 16 / 9 !important;
}

.jw-genre-grid-list .wp-block-post:nth-child(5n+4),
.jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
  width: calc((100% - 16px) / 2) !important;
  flex: 0 0 calc((100% - 16px) / 2) !important;
  aspect-ratio: 4 / 3 !important;
}

@media (max-width: 1024px) {
  .jw-genre-grid-list .wp-block-post:nth-child(5n+1),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+2),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+3),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+4),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
    width: calc((100% - 16px) / 2) !important;
    flex: 0 0 calc((100% - 16px) / 2) !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 768px) {
  .jw-genre-grid-list .wp-block-post:nth-child(5n+1),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+2),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+3),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+4),
  .jw-genre-grid-list .wp-block-post:nth-child(5n+5) {
    width: 100% !important;
    flex: 0 0 100% !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* ==========================================================================
   Piccolo Shop — page background matches content (GP's base-2/base-3 split
   otherwise leaves a grey band around the white boxed container)
   ========================================================================== */

body.site-piccoloshop {
  background-color: #fff !important;
}

/* Piccolo sites — shared top banner, now shown on all four Piccolo sites
   (originally Shop-only, class name kept for continuity). Flexbox centering
   (not padding-driven) so the title sits dead-center regardless of
   font/line-height metrics, which otherwise render slightly differently
   between the live page and editor. Colour, size, weight, spacing,
   alignment and height are all editable via Appearance > Customize >
   Piccolo Banner, and set as inline styles by PHP — the values below are
   just structural fallbacks. */
body.site-piccoloshop .piccolo-shop-banner,
body.site-piccolofilm .piccolo-shop-banner,
body.site-piccologlx .piccolo-shop-banner,
body.site-piccolocamera .piccolo-shop-banner {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 40px;
}

/* Hero/front pages don't need the banner's normal bottom margin — since the
   body/page background is forced black on these sites, that margin gap
   between the banner and the hero was rendering as a solid black bar. */
body.site-piccologlx.home .piccolo-shop-banner,
body.site-piccolocamera.home .piccolo-shop-banner,
body.site-piccoloshop.home .piccolo-shop-banner,
body.site-piccolofilm.home .piccolo-shop-banner {
  margin-bottom: 0 !important;
}

body.site-piccoloshop .piccolo-shop-banner-title,
body.site-piccolofilm .piccolo-shop-banner-title,
body.site-piccologlx .piccolo-shop-banner-title,
body.site-piccolocamera .piccolo-shop-banner-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif !important;
  /* line-height:1 (not 1.2) keeps the line box close to the glyphs' own
     cap-height — a taller line-height reserves extra space below the
     baseline for descenders (g/y/p) that all-caps text never uses, which
     makes align-items:center visually sit a few px too high. */
  line-height: 1;
  width: 100%;
}

body.site-piccoloshop .piccolo-shop-banner-title a,
body.site-piccolofilm .piccolo-shop-banner-title a,
body.site-piccologlx .piccolo-shop-banner-title a,
body.site-piccolocamera .piccolo-shop-banner-title a {
  transition: opacity 0.2s ease;
}

body.site-piccoloshop .piccolo-shop-banner-title a:hover,
body.site-piccolofilm .piccolo-shop-banner-title a:hover,
body.site-piccologlx .piccolo-shop-banner-title a:hover,
body.site-piccolocamera .piccolo-shop-banner-title a:hover {
  opacity: 0.8;
}

/* Piccolo Shop — thumbnail hover zoom */
body.site-piccoloshop ul.products li.product .woocommerce-loop-product__link,
body.site-piccoloshop .wc-block-grid__product-image {
  display: block;
  overflow: hidden;
}

body.site-piccoloshop ul.products li.product img,
body.site-piccoloshop .wc-block-grid__product-image img {
  transition: transform 0.35s ease;
}

body.site-piccoloshop ul.products li.product .woocommerce-loop-product__link:hover img,
body.site-piccoloshop .wc-block-grid__product-link:hover .wc-block-grid__product-image img {
  transform: scale(1.06);
}

/* Piccolo Shop — uniform thumbnail box (product photos have mixed aspect ratios).
   WC's own CSS makes .wc-block-grid__product-link inline-block, which shrink-wraps
   to the image's natural size instead of filling the grid column — force it to
   stretch full width so a 2-column row's images are proportionally larger than a
   3-column row's, filling the same total row width either way. */
body.site-piccoloshop .wc-block-grid__product-link {
  display: block;
  width: 100%;
}

body.site-piccoloshop .wc-block-grid__product-image {
  aspect-ratio: 1 / 1;
  width: 100%;
}

body.site-piccoloshop .wc-block-grid__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Piccolo Shop — two-line product titles (name / description split on a real newline) */
body.site-piccoloshop .wc-block-grid__product-title {
  white-space: pre-line;
}

/* Piccolo Shop — single product page: one image at a time with prev/next +
   dots, instead of the default full contact-sheet grid of every photo. */
body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled {
  display: block;
  position: relative;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled .woocommerce-product-gallery__image {
  display: none;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__wrapper.piccolo-gallery-enabled .woocommerce-product-gallery__image.piccolo-gallery-active {
  display: block;
}

body.site-piccoloshop.single-product .piccolo-gallery-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}

body.site-piccoloshop.single-product .piccolo-gallery-nav > * {
  pointer-events: auto;
}

body.site-piccoloshop.single-product .piccolo-gallery-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #333 !important;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease;
}

body.site-piccoloshop.single-product .piccolo-gallery-arrow:hover {
  background: #fff;
}

body.site-piccoloshop.single-product .piccolo-gallery-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.site-piccoloshop.single-product .piccolo-gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #b7b7b7;
  padding: 0;
  cursor: pointer;
}

body.site-piccoloshop.single-product .piccolo-gallery-dot.is-active {
  background: #1a1a1c;
}

/* Piccolo Shop — thumbnail strip below the main gallery image */
body.site-piccoloshop.single-product .piccolo-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.site-piccoloshop.single-product .piccolo-gallery-thumb.is-active {
  border-color: #1a1a1c;
}

/* Piccolo Shop — plain description text sits beside the gallery, in the summary column */
body.site-piccoloshop.single-product .piccolo-product-description {
  margin-top: 32px;
}

/* Piccolo Shop — WooCommerce's default buttons (Add to cart, Place order,
   Proceed to checkout, etc.) use WooCommerce's own purple brand colour;
   override to the site's black/dark theme. */
body.site-piccoloshop a.button,
body.site-piccoloshop button.button,
body.site-piccoloshop input.button,
body.site-piccoloshop a.button.alt,
body.site-piccoloshop button.button.alt,
body.site-piccoloshop input.button.alt,
body.site-piccoloshop #respond input#submit,
body.site-piccoloshop .wc-block-grid__product-add-to-cart .wp-block-button__link {
  background-color: #1a1a1c;
  border-color: #1a1a1c;
  color: #fff;
}

body.site-piccoloshop a.button:hover,
body.site-piccoloshop button.button:hover,
body.site-piccoloshop input.button:hover,
body.site-piccoloshop a.button.alt:hover,
body.site-piccoloshop button.button.alt:hover,
body.site-piccoloshop input.button.alt:hover,
body.site-piccoloshop #respond input#submit:hover,
body.site-piccoloshop .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: #000;
  border-color: #000;
  color: #fff;
}

/* Piccolo Shop — custom product image lightbox (replaces WooCommerce's own,
   lost when wc-single-product.js was dequeued to stop it fighting the
   gallery carousel). */
.piccolo-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.piccolo-lightbox.is-open {
  display: flex;
}

.piccolo-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.piccolo-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.piccolo-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
}

.piccolo-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.piccolo-lightbox-prev {
  left: 24px;
}

.piccolo-lightbox-next {
  right: 24px;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image a {
  cursor: zoom-in;
}

/* Piccolo Shop — hover magnifier for the main gallery image: a zoomed crop
   of the full-size photo is shown as a background layer (set via JS) that
   pans to follow the mouse; the plain <img> underneath is hidden while active. */
body.site-piccoloshop.single-product .woocommerce-product-gallery__image {
  overflow: hidden;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image.piccolo-zoom-active {
  cursor: zoom-in;
}

body.site-piccoloshop.single-product .woocommerce-product-gallery__image.piccolo-zoom-active img {
  opacity: 0;
}

/* Piccolo Shop — checkout: local pickup pre-arrangement confirmation modal */
.piccolo-pickup-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.piccolo-pickup-modal.is-open {
  display: flex;
}

.piccolo-pickup-modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  max-width: 420px;
  width: calc(100% - 40px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.piccolo-pickup-modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.5;
}

.piccolo-pickup-modal-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

.piccolo-pickup-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.piccolo-pickup-modal-cancel,
.piccolo-pickup-modal-continue {
  padding: 10px 18px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.piccolo-pickup-modal-cancel {
  background: #ececec;
  color: #333;
}

.piccolo-pickup-modal-continue {
  background: #1a1a1c;
  color: #fff;
}

.piccolo-pickup-modal-continue:disabled {
  background: #ccc;
  color: #888;
  cursor: not-allowed;
}

/* Piccolo Film — main site landing page: white background, black text throughout
   (cards keep white text since they sit over a dark photo overlay — see the
   !important on their text-color rules further down, needed since the
   general heading/paragraph rules below now outrank them on specificity). */
body.site-piccolofilm {
  background-color: #fff !important;
  color: #1a1a1c;
}

body.site-piccolofilm .site-content,
body.site-piccolofilm .content-area,
body.site-piccolofilm .entry-content {
  background-color: #fff;
}

body.site-piccolofilm .entry-content {
  padding: 60px 20px 100px;
  max-width: 1100px;
  margin: 0 auto;
}

body.site-piccolofilm .entry-content .wp-block-heading {
  color: #1a1a1c;
  text-align: center;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.site-piccolofilm .entry-content h1.wp-block-heading {
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
}

body.site-piccolofilm .entry-content > .wp-block-paragraph,
body.site-piccolofilm .entry-content > p {
  color: rgba(26, 26, 28, 0.7);
  text-align: center;
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  body.site-piccolofilm .entry-content h1.wp-block-heading {
    font-size: 32px;
  }
}

/* Piccolo Film — main site landing page cards (GLX / Camera / Shop) */
body.site-piccolofilm .piccolo-landing-cards {
  gap: 24px;
  margin-top: 40px;
}

/* .piccolo-landing-card is now a core/cover block — it already handles the
   background image + dim overlay natively, we just need rounded corners
   and the inner content padding/alignment. */
body.site-piccolofilm .piccolo-landing-card.wp-block-cover {
  border-radius: 12px;
  overflow: hidden;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-cover__inner-container {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  color: #fff !important;
}

body.site-piccolofilm .piccolo-landing-card h3 {
  color: #fff !important;
  margin: 0 0 6px;
  font-size: 1.4rem;
}

body.site-piccolofilm .piccolo-landing-card p {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-button__link {
  background-color: #fff;
  color: #1a1a1c;
  border-radius: 999px;
  padding: 10px 24px;
  font-weight: 600;
}

body.site-piccolofilm .piccolo-landing-card .wp-block-button__link:hover {
  background-color: #eee;
}

body.site-piccolofilm .piccolo-landing-card.is-coming-soon {
  filter: grayscale(0.4);
}

body.site-piccolofilm .piccolo-landing-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  align-self: center;
}

/* Page background is white again, matching .jw-site-footer's own default —
   kept as an explicit rule so it's clear this was a deliberate match, not
   an oversight, if the page background changes again in future. */
body.site-piccolofilm .jw-site-footer {
  background-color: #fff;
}

@media (max-width: 768px) {
  body.site-piccolofilm .piccolo-landing-cards {
    flex-direction: column;
  }
}

/* Piccolo Shop — bundle-tier picker on Small/Medium Pouch product pages */
body.site-piccoloshop .piccolo-bundle-picker {
  margin: 20px 0;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
}

body.site-piccoloshop .piccolo-bundle-picker-heading {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #e2e2e2;
  background-color: #f7f8f9;
}

body.site-piccoloshop .piccolo-bundle-tier {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid #e2e2e2;
  transition: background-color 0.15s ease;
}

body.site-piccoloshop .piccolo-bundle-tier:last-child {
  border-bottom: none;
}

body.site-piccoloshop .piccolo-bundle-tier:hover {
  background-color: #fafafa;
}

body.site-piccoloshop .piccolo-bundle-tier.is-selected {
  background-color: #f7f8f9;
}

body.site-piccoloshop .piccolo-bundle-tier input[type="radio"] {
  margin: 0;
  accent-color: #1a1a1c;
}

body.site-piccoloshop .piccolo-bundle-tier-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.site-piccoloshop .piccolo-bundle-tier-price {
  font-size: 15px;
  font-weight: 700;
}

body.site-piccoloshop .piccolo-bundle-save-badge {
  display: inline-block;
  padding: 2px 8px;
  background-color: #1a1a1c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}

/* Piccolo Shop checkout — shipping is the primary address, billing optional.
   Reorder the two columns visually so shipping (col-2) appears first, and
   hide WC's native "Ship to a different address?" toggle since it's now
   forced permanently checked (via woocommerce_ship_to_destination='shipping')
   rather than optional — see functions.php and checkout-billing-toggle.js. */
body.site-piccoloshop .woocommerce-checkout .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

body.site-piccoloshop .woocommerce-checkout .col2-set .col-1 {
  order: 2;
  flex: 1 1 300px;
  width: auto;
}

body.site-piccoloshop .woocommerce-checkout .col2-set .col-2 {
  order: 1;
  flex: 1 1 300px;
  width: auto;
}

body.site-piccoloshop #ship-to-different-address {
  display: none !important;
}

/* Billing fields hidden by default until "Bill to a different address?" is
   checked — set here (not just via JS) so there's no flash of visible
   billing fields before checkout-billing-toggle.js runs on page load. */
body.site-piccoloshop .woocommerce-billing-fields .billing_address {
  display: none;
}