/*
 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;
}

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;
}

.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;
}

/* ==========================================================================
   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 homepage - remove all bottom spacing before footer */
body.site-dop.home .site-footer,
body.site-dop.home .inside-article,
body.site-dop.home .entry-content,
body.site-dop.home article.page {
  padding-bottom: 0 !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: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: 60px 20px;
  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
   ========================================================================== */

body.site-piccologlx .piccolo-footer {
  background-color: #1A2233 !important;
  padding: 60px 20px 30px;
  color: #fff;
}

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

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

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

body.site-piccologlx .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 {
  margin-top: 1.5em;
}

body.site-piccologlx .footer-social a {
  color: #fff !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 {
  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 {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

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

/* Hide default theme footer on Piccolo */
body.site-piccologlx .jw-site-footer {
  display: none;
}

/* ==========================================================================
   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 {
    flex-direction: column;
    gap: 30px;
  }
}