/** Shopify CDN: Minification failed

Line 280:14 Expected identifier but found whitespace
Line 280:20 Unexpected "2"

**/
/* Custom Knife Collection Break Section
 * Update-safe CSS for knife collection page breaks
 * Can be added to any collection template via Shopify admin
 */

/* Apply all styles to both regular and inline versions */
[class*="custom-knife-collection-break-inline"] {
  /* Copy all styles by replacing class names in selectors */
}

/* Make inline elements inherit styles from regular elements */
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-container,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-content,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-image-wrapper,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-image,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-placeholder,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-placeholder-content,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-text-wrapper,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-text,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-heading,
.\#custom-knife-collection-break-inline .\#custom-knife-collection-break-inline-description {
  /* These will inherit from the existing styles below */
}

/* Container and spacing */
.\#custom-knife-collection-break,
.\#custom-knife-collection-break-inline {
 /* padding-top: var(--spacing-top, 60px); */
/*  padding-bottom: var(--spacing-bottom, 60px); */
  background: var(--color-g-bg, #ffffff);
}

.\#custom-knife-collection-break-container,
.\#custom-knife-collection-break-inline-container {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
 /* padding: 0 var(--container-spacer, 2rem);*/
}

/* Content layout */
.\#custom-knife-collection-break-content,
.\#custom-knife-collection-break-inline-content {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}

/* Layout variations */
.\#custom-knife-collection-break-layout-image-left .\#custom-knife-collection-break-content,
.\#custom-knife-collection-break-inline-layout-image-left .\#custom-knife-collection-break-inline-content {
  grid-template-columns: 1fr 1fr;
}

.\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-content,
.\#custom-knife-collection-break-inline-layout-image-right .\#custom-knife-collection-break-inline-content {
  grid-template-columns: 1fr 1fr;
}

.\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-image-wrapper,
.\#custom-knife-collection-break-inline-layout-image-right .\#custom-knife-collection-break-inline-image-wrapper {
  order: 2;
}

.\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-text-wrapper,
.\#custom-knife-collection-break-inline-layout-image-right .\#custom-knife-collection-break-inline-text-wrapper {
  order: 1;
}

.\#custom-knife-collection-break-layout-center .\#custom-knife-collection-break-content {
  text-align: center;
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

/* Image styling */
.\#custom-knife-collection-break-image {
  border-radius: var(--border-radius-base, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-base, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.\#custom-knife-collection-break-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Placeholder styling */
.\#custom-knife-collection-break-placeholder {
  background: var(--color-g-bg-subtle, #f8f9fa);
  border: 2px dashed var(--color-g-border, #e1e5e9);
  border-radius: var(--border-radius-base, 8px);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.\#custom-knife-collection-break-placeholder-content {
  text-align: center;
  color: var(--color-g-fg-subtle, #6c757d);
  opacity: 0.7;
}

.\#custom-knife-collection-break-placeholder-content svg {
  margin-bottom: 1rem;
  opacity: 0.5;
}

.\#custom-knife-collection-break-placeholder-content p {
  margin: 0;
  font-size: 0.9rem;
}

/* Text styling */
.\#custom-knife-collection-break-text {
  padding: 1rem 0;
}

.\#custom-knife-collection-break-heading {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.2;
  color: var(--color-g-fg, #000000);
  margin: 0 0 1rem 0;
}

.\#custom-knife-collection-break-description {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-g-fg-muted, #495057);
  margin: 0 0 1.5rem 0;
  max-width: 600px;
}

.\#custom-knife-collection-break-layout-center .\#custom-knife-collection-break-description {
  margin-left: auto;
  margin-right: auto;
}

/* Placeholder text styling */
.\#custom-knife-collection-break-placeholder-text {
  font-style: italic;
  opacity: 0.6;
  border: 1px dashed var(--color-g-border, #e1e5e9);
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-sm, 4px);
  background: var(--color-g-bg-subtle, #f8f9fa);
}

/* Button styling */
.\#custom-knife-collection-break-button {
  margin-top: 1rem;
}

.\#custom-knife-collection-break-button .\#button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--color-primary, #dc3545);
  color: var(--color-primary-fg, #ffffff);
  text-decoration: none;
  border-radius: var(--border-radius-base, 8px);
  font-weight: var(--font-weight-medium, 500);
  transition: all 0.2s ease;
}

.\#custom-knife-collection-break-button .\#button:hover {
  background: var(--color-primary-hover, #c82333);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover, 0 6px 20px rgba(0, 0, 0, 0.15));
}

/* Mobile responsive styles */
@media (max-width: 767px) {
  /* Stack layout on mobile */
  .\#custom-knife-collection-break-layout-image-left .\#custom-knife-collection-break-content,
  .\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Reset order on mobile */
  .\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-image-wrapper,
  .\#custom-knife-collection-break-layout-image-right .\#custom-knife-collection-break-text-wrapper {
    order: unset;
  }
  
  /* Reduce spacing on mobile */
  .\#custom-knife-collection-break {
    padding-top: calc(var(--spacing-top, 60px) * 0.7);
    padding-bottom: calc(var(--spacing-bottom, 60px) * 0.7);
  }
  
  .\#custom-knife-collection-break-container {
    padding: 0 var(--container-spacer-mobile, 1rem);
  }
  
  /* Adjust text sizes on mobile */
  .\#custom-knife-collection-break-heading {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }
  
  .\#custom-knife-collection-break-description {
    font-size: 1rem;
  }
  
  /* Smaller placeholder on mobile */
  .\#custom-knife-collection-break-placeholder {
    min-height: 250px;
  }
}

/* Tablet responsive styles */
@media (min-width: 768px) and (max-width: 1024px) {
  .\#custom-knife-collection-break-content {
    gap: 1.5rem;
  }
  
  .\#custom-knife-collection-break-heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
  }
}

/* Large screen optimizations */
@media (min-width: 1200px) {
  .\#custom-knife-collection-break-content {
    gap: 3rem;
  }
}

/* Print styles */
@media print {
  .\#custom-knife-collection-break {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .\#custom-knife-collection-break-placeholder {
    display: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .\#custom-knife-collection-break-placeholder {
    border-color: currentColor;
  }
  
  .\#custom-knife-collection-break-placeholder-text {
    border-color: currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .\#custom-knife-collection-break-button .\#button {
    transition: none;
  }
  
  .\#custom-knife-collection-break-button .\#button:hover {
    transform: none;
  }
}


/**------------------------------------88/
.collection-break-wrapper {
  /* Desktop: span 2 columns */
  grid-column: span 2;
}

@media (max-width: 749px) {
  .collection-break-wrapper {
    /* Mobile: span all columns (full width) */
    grid-column: 1 / -1;
  }
}

/* NOTE: these rules previously used ID selectors (#name), but the Liquid
   markup uses those names as CLASS names (class="#name"), so none of the
   rules below were being applied. Fixed by escaping the literal `#` as
   a class selector (`.\#name`). This restores the intended styling —
   including `height: 100%` on the container, which lets the inline
   break stretch to match the product tile row height in a CSS grid. */
.\#custom-knife-collection-break-inline {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.\#custom-knife-collection-break-inline-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.\#custom-knife-collection-break-inline-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.\#custom-knife-collection-break-inline-container {
  background: #f8f8f8;
  /* Match the product cards it sits between rather than a hardcoded 8px —
     product-card.css uses --border-radius-base (1.125rem) for the same corner. */
  border-radius: var(--border-radius-base, 1.125rem);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.\#custom-knife-collection-break-inline-image-wrapper {
  position: relative;
  width: 100%;
  flex: 1;          /* Fill whatever vertical space is left after the optional text wrapper.
                       When text wrapper is absent (heading+description both blank), the image
                       fills the full break container — same height as a full product card.
                       When text wrapper is present, image takes the remaining top portion. */
  min-height: 0;    /* Allow flex shrinking */
  overflow: hidden;
  background: #e0e0e0;
}

.\#custom-knife-collection-break-inline-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* The slot is ~1.35:1 on desktop and 4:3 on mobile but the artwork the
     client supplies is 2:1, so `fill` was squashing every break horizontally
     (Santoku, Nakiri, Petty…). Cover-crop instead: the image keeps its
     proportions and the edges are trimmed. Spec for new artwork: 1400×1000px
     (7:5), keep text inside the central ~85% so it survives the crop. */
  object-fit: cover;
  object-position: center;
}

.\#custom-knife-collection-break-inline-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
}

.\#custom-knife-collection-break-inline-placeholder-content {
  text-align: center;
  color: #999;
}

.\#custom-knife-collection-break-inline-placeholder-content svg {
  margin: 0 auto 10px;
  opacity: 0.5;
}

.\#custom-knife-collection-break-inline-placeholder-content p {
  margin: 0;
  font-size: 14px;
}

.\#custom-knife-collection-break-inline-text-wrapper {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.\#custom-knife-collection-break-inline-heading {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.4rem 0;
  line-height: 1.3;
}

.\#custom-knife-collection-break-inline-description {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 0.4rem 0;
  color: #666;
}

.\#custom-knife-collection-break-inline-cta {
  display: inline-block;
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

@media (max-width: 749px) {
  .\#custom-knife-collection-break-inline-heading {
    font-size: 1.25rem;
  }

  .\#custom-knife-collection-break-inline-description {
    font-size: 0.9rem;
  }

  .\#custom-knife-collection-break-inline-text-wrapper {
    padding: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
   MOBILE / TABLET (<= 991px) — give the break an intrinsic height.

   Below 991px `.#grid.@type:columns` is `display: flex` (see grid.css), so the
   `grid-column: span 2` on the wrapper is inert and the desktop-only grid
   override in custom-mobile-header-integration.liquid does not apply. The break
   therefore sits alone on its flex line with no sibling product card to set the
   line height — and because the image is absolutely positioned inside a
   `flex: 1; min-height: 0` wrapper, nothing contributes height at all. The
   result was a ~15px sliver: the break was effectively invisible on phones.

   Fix: claim the whole flex line, and give the image wrapper a real aspect
   ratio instead of relying on a sibling to imply one. 4/3 matches the narrow
   end of the desktop slot range (1.30–1.46) so one master asset covers both.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Specificity note: grid.css sets `.#grid.@type:columns > *` (0,2,0) to a
     one-column flex-basis. A bare `.collection-break-wrapper` (0,1,0) loses to
     it, so the wrapper must be selected through the grid to claim a full line
     of its own. */
  .\#grid.\@type\:columns > .collection-break-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Alone on its line there is no sibling card to stretch against, so the
     aspect ratio is what actually establishes the break's height. */
  .\#custom-knife-collection-break-inline-image-wrapper {
    flex: none;
    aspect-ratio: 4 / 3;
    width: 100%;
  }

  /* width:100% must be stated on each level. The old
     `[class*="custom-knife-collection-break-inline"]` rule in
     custom-mobile-header-integration.liquid was supplying it to all three
     nested elements as a side effect of its substring match; scoping that rule
     to the outer element (to stop its padding stacking) collapsed the
     container and image wrapper to width:0. */
  .\#custom-knife-collection-break-inline,
  .\#custom-knife-collection-break-inline-link,
  .\#custom-knife-collection-break-inline-container {
    height: auto;
    width: 100%;
  }
}