/** Shopify CDN: Minification failed

Line 25:14 Unexpected "{"
Line 25:23 Expected ":"
Line 37:14 Unexpected "{"
Line 37:23 Expected ":"
Line 49:14 Unexpected "{"
Line 49:23 Expected ":"
Line 62:14 Unexpected "{"
Line 62:23 Expected ":"
Line 70:14 Unexpected "{"
Line 70:23 Expected ":"
... and 4 more hidden warnings

**/
@media (max-width: 768px) {
  .two-col-section {
    display: none !important;
  }
}

:root { --tcc-gap: 24px; --overlay-width: 48%; }

    /* grid: two side images (no center content column) */
    #two-col-{{ section.id }} .two-col-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      position: relative;
      min-height: 80vh;
    }

    .two-col-image { position: relative; }
    .two-col-image img { width:100%; height:90dvh; object-fit:cover; display:block; border-radius:0;}

    /* overlay container (positioned absolutely and sized to half width) */
    #two-col-{{ section.id }} .two-col-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--overlay-width);
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none; /* allow clicks inside children only */
    }
    /* inner area accepts pointer events */
    #two-col-{{ section.id }} .two-col-overlay .overlay-inner {
      pointer-events: auto;
      width: 86%;
      max-width: 540px;
      padding: 48px;
      box-sizing: border-box;
      color: #fff;
      text-align: center;
      /* subtle backing for legibility */
      border-radius: 4px;
    }

    /* position overlay on right image */
    #two-col-{{ section.id }}.overlay-right .two-col-overlay {
      right: 0; /* overlay sits over right half */
      left: auto;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
    /* position overlay on left image */
    #two-col-{{ section.id }}.overlay-left .two-col-overlay {
      left: 0;
      right: auto;
      text-align: center;
      align-items: center;
      justify-content: center;
    }

    /* Visual style for heading / description */
    .overlay-heading { 
        font-size: 5vh;
        margin: 0 0 12px;
        font-family: 'Olivera' !important;
        color: white;
        line-height:5vh;
    }
    .overlay-description { font-size: 16px; color: rgba(255,255,255,0.9); margin-bottom: 18px; line-height: 1.6; font-family: 'Raleway';}

    /* Swatches inside overlay */
    .overlay-swatches { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:16px; margin-top: 4vh;}
    .overlay-swatch { width:40px; height:40px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,1); background:transparent; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; }
    .overlay-swatch--no-variant { opacity:0.5; pointer-events:none; }
    .overlay-swatch.active { transform:scale(1.06); border-color:rgba(255,255,255,0.95); }

    .swatch-color, .swatch-image { width:100%; height:100%; display:block; border-radius:50%; background-size:cover; background-position:center; }
    .swatch-text { font-size:11px; padding:6px; display:block; text-align:center; color:#fff; }

    .overlay-actions { margin-top:10px; }
    .overlay-explore {
      display:inline-block;
      padding:12px 34px;
      border:1px solid rgba(255,255,255,0.6);
      color: #fff;
      text-decoration:none;
      border-radius:6px;
      background: transparent;
      margin-top: 2vh;
    }

    /* small screens: overlay becomes full-width and sits above images */
    @media (max-width: 960px) {
      :root { --overlay-width: 100%; }
      #two-col-{{ section.id }} .two-col-overlay { left: 0; right: 0; position: absolute; padding: 12px; }
      #two-col-{{ section.id }} .two-col-grid { grid-template-columns: 1fr; min-height: auto; }
      .two-col-image img { min-height: 56vh; }
      .two-col-overlay .overlay-inner { margin: 16px auto; padding: 22px; max-width: 680px; }
    }