/** Shopify CDN: Minification failed

Line 64:2 Unexpected "{"
Line 64:3 Expected identifier but found "%"
Line 64:36 Unexpected "!"
Line 64:187 Unterminated string token
Line 72:2 Unexpected "{"
Line 72:3 Expected identifier but found "%"
Line 72:81 Unexpected "!"
Line 72:93 Expected identifier but found "%"
Line 89:2 Unexpected "{"
Line 89:3 Expected identifier but found "%"
... and 10 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:compare-bags (INDEX:8) */
.compare-bags__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl, 3rem);
  }

  .compare-bags__intro {
    width: 100%;
    max-width: 600px;
  }

  .compare-bags__intro--center {
    align-self: center;
    text-align: center;
  }

  .compare-bags__heading {
    font-family: var(--font-h2--family, var(--font-heading--family));
    color: var(--compare-bags-accent);
    margin: 0 0 var(--margin-lg, 1rem);
  }

  .compare-bags__text {
    font-size: 12px !important;
    letter-spacing: 8% !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #c43c68 !important;
    margin-bottom: 20px;
  }

  .compare-bags__content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .compare-bags__table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    table-layout: fixed;
  }

  {%- comment -%} padding-inline is !important because the theme zeroes the outer padding on first/last cells, which makes the last column's image wider than the others {%- endcomment -%}
  .compare-bags__table th,
  .compare-bags__table td {
    padding-block: var(--padding-lg, 1rem);
    padding-inline: var(--padding-sm, 0.7rem) !important;
    font-weight: 600;
  }

  {%- comment -%} The theme sets its own text-align on cells, so alignment needs !important {%- endcomment -%}
  .compare-bags__table thead th,
  .compare-bags__table td {
    text-align: center !important;
  }

  .compare-bags__table tbody th {
    text-align: left !important;
    color: var(--compare-bags-accent);
    font-size: var(--font-size--sm, 0.875rem);
  }

  .compare-bags__corner {
    width: 28%;
    min-width: 8rem;
  }

  {%- comment -%} ponytail: nth-child(2)/(4) are the first/last product columns, matching the fixed 3-column layout noted above. box-shadow instead of border-left/right because border-collapse merges per-cell borders with the theme's own border reset. The theme's --border-color holds bare rgb channels, so it must be wrapped in rgb() {%- endcomment -%}
  .compare-bags__table tbody td:nth-child(2) {
    box-shadow: inset 1px 0 0 0 rgb(var(--border-color, 225 209 217));
  }

  .compare-bags__table tbody td:nth-child(4) {
    box-shadow: inset -1px 0 0 0 rgb(var(--border-color, 225 209 217));
  }

  thead th:not(.compare-bags__corner) {
    min-width: 7rem;
  }

  .compare-bags__table thead th {
    vertical-align: top;
  }

  thead .compare-bags__col-title,
  thead .compare-bags__col-price {
    display: block;
    font-family: var(--font-h5--family, var(--font-heading--family));
    color: var(--compare-bags-accent);
    overflow-wrap: anywhere;
  }

  thead .compare-bags__col-title {
    font-size: 1.125rem;
  }

  thead .compare-bags__col-price {
    font-size: var(--font-size--sm, 0.875rem);
    margin-top: 0.25rem;
  }

  .compare-bags__image-link {
    display: block;
  }

  .compare-bags__image-wrap {
    position: relative;
    width: 100%;
    max-width: 12rem;
    aspect-ratio: 1;
    margin: 0 auto 0.75rem;
    overflow: hidden;
  }

  .compare-bags__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    object-fit: cover;
  }

  {%- comment -%} No line between the title/price header and the first feature row. The theme borders every th/td, so both sides of the join have to be cleared. Row dividers elsewhere come from the theme {%- endcomment -%}
  .compare-bags__table thead th,
  .compare-bags__table tbody tr:first-child td {
    border-bottom: 0 !important;
    border-top: 0 !important;
  }

  .compare-bags__cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .compare-bags__cell-note {
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 400;
    text-align: center;
  }

  .compare-bags__mark {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--icon-size-sm, 1.25rem);
    height: var(--icon-size-sm, 1.25rem);
    color: var(--compare-bags-accent);
  }

  .compare-bags__mark svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  {%- comment -%} Visually hidden, still read by screen readers {%- endcomment -%}
  .compare-bags__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Small screens: fit everything without sideways scrolling */
  @media (max-width: 749px) {
    .compare-bags__table {
      min-width: 0;
    }

    .compare-bags__corner {
      width: 26%;
      min-width: 0;
    }

    thead th:not(.compare-bags__corner) {
      min-width: 0;
    }

    .compare-bags__table th,
    .compare-bags__table td {
      padding-block: 0.75rem;
      padding-inline: 0.375rem !important;
    }

    .compare-bags__table tbody th,
    .compare-bags__cell-note {
      font-size: 0.75rem;
    }

    thead .compare-bags__col-title {
      font-size: 0.875rem;
    }

    thead .compare-bags__col-price {
      font-size: 0.75rem;
    }

    .compare-bags__mark {
      width: 1rem;
      height: 1rem;
    }
  }
/* END_SECTION:compare-bags */