/** Shopify CDN: Minification failed

Line 173:10 Expected ":"

**/
@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-bold);
    font-size: var(--fs-p1);
    line-height: 1.2;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    align-content: center;
    min-height: 40px;
  }

  .btn-primary,
  .btn--primary {
    background: var(--color-primary-blue) !important;
    color: #fff;
    border-color: var(--color-primary-blue) !important;
    min-height: 40px !important;
  }
  .btn-primary:hover,
  .btn--primary:hover {
    background: #fff;
    color: var(--color-primary-blue);
  }

  .btn-accent,
  .btn--accent {
    background: var(--color-primary-orange);
    color: #fff;
    border-color: var(--color-primary-orange);
  }
  .btn-accent:hover,
  .btn--accent:hover {
    background: #fff;
    color: var(--color-primary-orange);
  }

  /* Outline style */
  .btn-outline {
    background: #fff;
    border-color: currentColor;
  }

  /* Full width */
  .btn-primary.full-width,
  .btn--primary.full-width {
    width: 100%;
  }

  /* Input styles */
  .form-input {
    border: var(--border-width) solid var(--color-secondary-grey);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-p1);
    transition: border-color .2s ease;
  }
  .form-input:focus {
    border-color: var(--color-primary-blue);
    outline: none;
  }

  /* Cards */
  .card {
    border: var(--border-width-thin) solid var(--color-secondary-grey-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: #fff;
  }

  /* Tabs */
  .tabs {
    display: flex;
    gap: var(--space-3);
  }
  .tabs button {
    border: none;
    background: none;
    font-family: var(--font-bold);
    font-size: var(--fs-p1);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }
  .tabs button[aria-selected="true"] {
    border-color: var(--color-primary-orange);
    color: var(--color-primary-orange);
  }

  .section {
    padding-block: calc(var(--space-6) * 2);
  }

  .w-btn-wrapper {
    margin-bottom: var(--space-4) !important;
  }

  .section__header {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-7) !important;
    margin-top: var(--space-5) !important;
  }

  .section__title {
    margin: 0;
  }

  .section__intro,
  .section__content {

  }

  .container,
  .layout-constrained {
    margin-inline: auto;
    max-width: var(--container-max-width);
    padding-inline: var(--space-5);
  }

  @media (max-width: 599px) {
    .container,
    .layout-constrained {
      padding-inline: var(--space-4);
    }

    article.card.turning-grade {
      grid-template-columns: unset !important;
    }

    div.turning-grade {
    flex-direction: column;
    }

  }

  .collection-grid {
    display: grid;
    gap: var(--space-8) var(--space-7);
    grid-template-columns: repeat(auto-fit, minmax(412px, 0fr));
    margin-bottom: var(--space-9) !important;
  }

  .collection-card {
    background: var(--color-surface);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    max-width: 93vw;
  }

  .collection-card__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-secondary-grey-light);
    margin-bottom: var(--space-5) !important;
  }

  .collection-card__media.view-all {
    aspect ratio: unset;
    height: 100%;
    max-width: 412px;
  }

  /* make the image fill without distortion */
  .collection-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  }

  .collection-card__placeholder {
    align-items: center;
    color: var(--color-secondary-iron);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
  }

  .collection-card__body {
    display: grid;
    gap: var(--space-3);
  }

  .collection-card__title {
    margin: 0;
  }

  .collection-card__link {
    color: inherit;
    text-decoration: none;
  }

  .collection-card__link:hover {
    text-decoration: underline;
  }

  .collection-card__description {
    margin: 0;
    color: var(--color-secondary-iron);
  }

  .collection-card__actions {
    display: flex;
  }

  .collection-grid__empty {
    color: var(--color-secondary-iron);
    text-align: center;
  }

  /* Work-material chips under collection cards */
  .work-mat {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
  }
  .work-mat__chip {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    font-family: var(--font-bold);
    font-size: 14px;
    line-height: 1;
    color: #fff;
  }
  /* Colors (match your existing mapping) */
  .work-mat__chip[data-m="P"]     { background: #0069a7; } /* Blue */
  .work-mat__chip[data-m="P No"]  { background: #e8e8e8; color:#111; }

  .work-mat__chip[data-m="M"]     { background: #f6b519; } /* Gold */
  .work-mat__chip[data-m="M No"]  { background: #e8e8e8; color:#111; }

  .work-mat__chip[data-m="K"]     { background: #e0592a; } /* Copper */
  .work-mat__chip[data-m="K No"]  { background: #e8e8e8; color:#111; }

  .work-mat__chip[data-m="N"]     { background: #109954; } /* Green */
  .work-mat__chip[data-m="N No"]  { background: #e8e8e8; color:#111; }

  .work-mat__chip[data-m="S"]     { background: #f88d2b; } /* Bronze */
  .work-mat__chip[data-m="S No"]  { background: #e8e8e8; color:#111; }

  .work-mat__chip[data-m="H"]     { background: #666666; } /* Iron */
  .work-mat__chip[data-m="H No"]  { background: #e8e8e8; color:#111; }

    /* --- Collection rating (stars) --- */
  .rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
  }
  .rating__stars {
    display: inline-flex;
    gap: 2px;
    line-height: 0;
  }
  .rating__star {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-block;
  }
  .rating__star svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* background (empty) star */
  .rating__star .is-bg svg { color: var(--color-secondary-grey); }
  /* filled portion */
  .rating__star .is-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .rating__star .is-fill svg { color: var(--color-primary-orange); }

  .rating__label {
    font-size: 12px;
    color: var(--color-secondary-iron);
  }

.rating__star svg,
.rating__star svg path {
  fill: currentColor !important;
}

.rating__star .is-bg svg   { color: var(--color-secondary-grey) !important; }
.rating__star .is-fill svg { color: var(--color-primary-orange) !important; }


  .rc-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-5);
    align-items:start;
    margin-top: var(--space-7) !important;
    margin-bottom: var(--space-8) !important;
  }
  .rc-item__label{ line-height:1.2; }

  .rc-item{
    display: grid;
    border-radius: var(--radius-md);
    background: #fff;
    border: var(--border-width) solid var(--color-secondary-grey-light);
    padding: var(--space-4) !important;
    height: 100%;
    min-height: 115px;
  }

  .rc-item__text{ color: var(--color-secondary-iron); }
  .rating--sm .rating__star{ width:16px; height:16px; }

    /* === Feature points === */
  .section--feature-points .fp-grid{
    display: grid;
    gap: var(--space-6) var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: var(--space-5) !important;
  }

  .fp-card{
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: #fff;
    border: var(--border-width) solid var(--color-secondary-grey-light) !important;
    padding: var(--space-5) !important;
  }

  .section.section--feature-points {
    background: #0069a7;
  }

  .section--feature-points .container.layout-constrained {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-8) !important;
  }

  .container.layout-constrained {
    margin-top: var(--space-8);
  }

  .container.layout-constrained h2 {
    margin-bottom: var(--space-5) !important;
  }
  
  h2#feature-points-heading- {
    color: white !important;
  }

  .fp-card__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; height: 35px;
    border-radius: var(--radius-pill);
    background: var(--color-surface, #fff);
    margin-bottom: var(--space-2) !important;
  }
  .fp-card__img{
    width: 48px; height: 48px; object-fit: contain; display: block;
  }

  /* Fallback icon (bronze +) */
  .fp-card__svg{ width: 48px; height: 48px; display: block; }
  .fp-card__svg .fp--bronze{ fill: var(--color-secondary-bronze, #f88d2b); }
  .fp-card__svg .fp--plus{ stroke: #fff; stroke-width: 3; }

  .fp-card__title{ margin: 0; }
  .fp-card__body{ margin: 0; color: var(--color-secondary-iron); }

  .fp-empty{ color: var(--color-secondary-iron); text-align: center; }

  @layer components {
  /* ===== Advantages (blue tick) ===== */
  .ap-grid{
    display:grid;
    gap: var(--space-6) var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: var(--space-8) !important;
  }
  .ap-card{
    display:grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background:#fff;
    border: var(--border-width) solid var(--color-secondary-grey-light) !important;
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) !important;
  }
  .ap-card__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:35px;height:35px;
    border-radius: var(--radius-pill);
    background: var(--color-surface, #fff);
  }
  .ap-card__img{ width:48px;height:48px;object-fit:contain;display:block; }

  /* Fallback icon: Steel Blue (#3995e6) with white tick */
  .ap-card__svg{ width:48px;height:48px;display:block; }
  .ap-card__svg .ap--steel{ fill: var(--color-secondary-steel, #3995e6); }
  .ap-card__svg .ap--tick{ stroke:#fff; stroke-width:3; fill:none; }

  .ap-card__title{ margin:0; }
  .ap-card__body{ margin:0; color: var(--color-secondary-iron); }

  /* We already have .fp-* rules from your Features section; no change needed there. */
}

/* -- Tiny pill chips inline before the text (uses your work-mat colors) -- */
.wm-chip-group { display:inline-flex; gap:6px; margin-right:8px; vertical-align:middle; }
.wm-chip {
  width:auto; height:20px; min-width:0; padding:2px 5px !important;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-bold, inherit); font-size:12px; line-height:1; color:#fff;
}
/* ensure the cell doesn't wrap weirdly */
.vmx td.has-wm-chips { white-space:nowrap; }
/* override the square-size from the card chips, keep your colors from [data-m] */

   /* —— Charts: stop the auto 1:1 square, cap size, and lock text —— */
  .collection-card__media.grade-chart { 
    aspect-ratio: unset !important;           /* don't force a big square */
    width: 100%;
    max-width: 380px;                          /* tweak to taste */
  }
  .collection-card__media.grade-chart > svg {
    width: 100%;
    height: auto;
    max-height: 300px;                         /* caps label growth */
    display: block;
  }

  /* Text inside charts: fixed, predictable */
  .grade-chart svg .axis-label  { font-size: 18px !important; font-family:'Humanist777BT-Bold'; fill:#1a1a1a; }
  .grade-chart svg .bubble-label{ font-size: 18px !important; font-family:'Humanist777BT-Bold'; }

  /* Keep axis stroke steady even if someone changes the svg size */
  .grade-chart svg .axis { vector-effect: non-scaling-stroke; stroke-width: 2.5; }

}