/** Shopify CDN: Minification failed

Line 266:20 Unexpected "{"
Line 266:29 Expected ":"
Line 291:20 Unexpected "{"
Line 291:29 Expected ":"
Line 312:20 Unexpected "{"
Line 312:29 Expected ":"
Line 344:20 Unexpected "{"
Line 344:29 Expected ":"
Line 372:20 Unexpected "{"
Line 372:29 Expected ":"
... and 71 more hidden warnings

**/
/* ==========================================================================
   Custom Product + Collection Styles — Pickleball Store
   Namespaced with `pb-`, extends the CSS variables and card patterns already
   defined in custom-landing.css (load that file alongside this one — the
   sections do this automatically via {{ 'x' | asset_url | stylesheet_tag }}).
   ========================================================================== */

/* ---------- SHARED BREADCRUMB ---------- */
.pb-breadcrumb-bar{ padding:20px 32px; border-bottom:1px solid var(--pb-line); font-weight: bold; }
.pb-breadcrumb{ max-width:1280px; margin:0 auto; font-family:var(--pb-font-mono); font-size:11.5px; color:var(--pb-text-muted); letter-spacing:0.3px; }
.pb-breadcrumb a:hover{ color:var(--pb-blue); }
.pb-breadcrumb .pb-current{ color:var(--pb-text); }

/* ==========================================================================
   PRODUCT PAGE
   ========================================================================== */
.pb-pdp{ max-width:1280px; margin:0 auto; padding:38px 32px 60px; display:grid; grid-template-columns:1fr 1fr; gap:70px; }

/* GALLERY */
.pb-gallery-main{ aspect-ratio:1; background:linear-gradient(160deg, var(--pb-surface-2), var(--pb-bg)); border:2px solid var(--pb-ink); display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:16px; overflow:hidden; }
.pb-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.pb-gallery-badge{ position:absolute; top:0; left:0; background:var(--pb-lime); color:var(--pb-ink); font-family:var(--pb-font-mono); font-size:11px; font-weight:800; padding:8px 16px; letter-spacing:0.5px; z-index:2; border-bottom-right-radius: 8px; }
.pb-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pb-thumb{ aspect-ratio:1; background:linear-gradient(160deg, var(--pb-surface-2), var(--pb-bg)); border:2px solid var(--pb-line); border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; overflow:hidden; }
.pb-thumb img{ width:100%; height:100%; object-fit:cover; }
.pb-thumb.pb-active{ border-color:var(--pb-ink); }

/* INFO */
.pb-p-brand{ font-family:var(--pb-font-mono); font-size:24px; color:var(--pb-blue); letter-spacing:1.5px; text-transform:uppercase; font-weight:700;  }
.pb-p-title{ font-family:var(--pb-font-display); font-weight:800; font-size:34px; text-transform:uppercase; letter-spacing:-1px;  }
.pb-p-rating{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pb-p-rating .pb-stars{ color:var(--pb-lime-dim); font-size:24px; letter-spacing:2px; }
.pb-p-rating .pb-count{ font-size:16px; color:var(--pb-text-muted); }
.pb-p-price{ font-family:var(--pb-font-mono); font-weight:700; font-size:28px; }
.pb-p-price .pb-was{ font-size:16px; font-weight:400; color:var(--pb-text-muted); text-decoration:line-through; margin-right:10px; }
.pb-p-desc{ font-size:14.5px; color:var(--pb-text-muted); line-height:1.7; margin-bottom:30px; max-width:460px; }

.pb-option-group{ margin-bottom:28px; }
.pb-option-label{ font-family:var(--pb-font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--pb-text); margin-bottom:12px; font-weight:700; }
.pb-option-list{ display:flex; gap:10px; flex-wrap:wrap; }
.pb-option-pill{ flex:1; min-width:84px; border:2px solid var(--pb-ink); padding:14px 10px; text-align:center; cursor:pointer; font-family:var(--pb-font-display); font-weight:700; font-size:13px; text-transform:uppercase; background:#fff; color:inherit; }
.pb-option-pill.pb-selected{ background:var(--pb-ink); color:var(--pb-lime); }
.pb-option-pill:disabled, .pb-option-pill.pb-unavailable{ opacity:0.35; cursor:not-allowed; text-decoration:line-through; }

.pb-qty-row{ display:flex; gap:16px; margin-bottom:20px; }
.pb-qty-box{ display:flex; align-items:center; border:1px solid var(--pb-ink); }
.pb-qty-box button{ width:44px; height:52px; background:none; border:none; font-size:18px; font-weight:700; cursor:pointer; font-family:var(--pb-font-mono); }
.pb-qty-box input{ width:44px; height:52px; border:none; text-align:center; font-family:var(--pb-font-mono); font-size:15px; font-weight:700; }
.pb-btn-wishlist{ border:2px solid var(--pb-ink); background:#fff; color:inherit; width:52px; flex:none; clip-path:none; }
.pb-btn[disabled]{ opacity:0.5; cursor:not-allowed; }

.pb-trust-row{ display:flex; gap:0; border-top:2px solid var(--pb-line); border-bottom:2px solid var(--pb-line); margin:32px 0; padding:20px 0; flex-wrap:wrap; }
.pb-trust-item{ flex:1; display:flex; align-items:center; gap:10px; padding:0 16px; border-left:1px solid var(--pb-line); font-size:12px; min-width:140px; }
.pb-trust-item:first-child{ border-left:none; padding-left:0; }
.pb-trust-icon{ font-family:var(--pb-font-mono); font-weight:800; color:var(--pb-blue); }

.pb-stock-status{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:20px; }
.pb-stock-dot{ width:8px; height:8px; border-radius:50%; background:var(--pb-lime-dim); flex-shrink:0; }
.pb-stock-status.pb-out .pb-stock-dot{ background:#c0392b; }
.pb-stock-status .pb-muted{ color:var(--pb-text-muted); font-weight:400; }

.pb-payment-row{ display:flex; align-items:center; gap:10px; margin-top:18px; flex-wrap:wrap; }
.pb-payment-label{ font-family:var(--pb-font-mono); font-size:10.5px; color:var(--pb-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-right:4px; }
.pb-payment-badge{ border:1.5px solid var(--pb-line); padding:5px 10px; font-family:var(--pb-font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.3px; color:var(--pb-text-muted); }

.pb-accordion{ margin-top:20px; }
.pb-acc-item{ border-bottom:2px solid var(--pb-ink); }
.pb-acc-item summary{ list-style:none; cursor:pointer; padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--pb-font-display); font-weight:700; font-size:15px; text-transform:uppercase; }
.pb-acc-item summary::-webkit-details-marker{ display:none; }
.pb-acc-icon{ width:24px; height:24px; border:2px solid var(--pb-ink); display:flex; align-items:center; justify-content:center; font-family:var(--pb-font-mono); font-size:13px; font-weight:800; transition:transform 0.2s; flex-shrink:0; }
.pb-acc-item[open] .pb-acc-icon{ transform:rotate(45deg); background:var(--pb-lime); border-color:var(--pb-lime); }
.pb-acc-body{ padding:0 0 20px; font-size:13.5px; color:var(--pb-text-muted); line-height:1.7; }
.pb-spec-table{ width:100%; border-collapse:collapse; margin-top:10px; }
.pb-spec-table tr{ border-bottom:1px solid var(--pb-line); }
.pb-spec-table td{ padding:12px 0; font-size:13.5px; }
.pb-spec-table th{ padding:12px 0; font-size:16px; font-weight:bold; text-align:start }
.pb-spec-table td:first-child{ font-family:var(--pb-font-mono); color:var(--pb-text-muted); text-transform:uppercase; letter-spacing:0.5px; font-size:11px; width:160px; }
.pb-spec-table td:last-child{ font-weight:600; }

/* DESCRIPTION SPLIT (dark stat visual) */
.pb-desc-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start; max-width:1280px; margin:0 auto; }
.pb-desc-copy p{ font-size:15px; color:var(--pb-text-muted); line-height:1.75; margin-bottom:20px; max-width:480px; }
.pb-desc-features{ list-style:none; margin-top:8px; padding:0; }
.pb-desc-features li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; margin-bottom:16px; max-width:480px; }
.pb-desc-features li::before{ content:'✓'; color:var(--pb-blue); font-weight:800; font-family:var(--pb-font-mono); flex-shrink:0; margin-top:2px; }
.pb-desc-visual{ background:linear-gradient(160deg, var(--pb-ink), #000); border:2px solid var(--pb-ink); border-radius:8px; padding:50px 36px; position:relative; overflow:hidden; }
.pb-desc-visual-glow{ position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(196,225,0,0.16), transparent 70%); }
.pb-desc-stat{ position:relative; z-index:2; margin-bottom:28px; }
.pb-desc-stat:last-child{ margin-bottom:0; }
.pb-desc-stat-num{ font-family:var(--pb-font-display); font-weight:800; font-size:32px; color:var(--pb-lime); line-height:1; margin-bottom:6px; }
.pb-desc-stat-label{ font-family:var(--pb-font-mono); font-size:11px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.5px; }

/* BUNDLE */
.pb-bundle-box{ border:2px solid var(--pb-ink); padding:36px; display:grid; grid-template-columns:auto auto auto auto 1fr; gap:20px; align-items:center; max-width:1280px; margin:0 auto; border-radius: 8px; }
.pb-bundle-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.pb-bundle-thumb{ width:70px; height:70px; background:linear-gradient(160deg,var(--pb-surface-2),var(--pb-bg)); border:2px solid var(--pb-line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pb-bundle-thumb img{ width:100%; height:100%; object-fit:cover; }
.pb-bundle-name{ font-size:11.5px; font-weight:600; max-width:100px; }
.pb-bundle-price{ font-family:var(--pb-font-mono); font-size:11px; color:var(--pb-text-muted); }
.pb-bundle-plus{ font-family:var(--pb-font-display); font-weight:800; font-size:22px; color:var(--pb-text-muted); }
.pb-bundle-total{ text-align:right; }
.pb-bundle-total-label{ font-family:var(--pb-font-mono); font-size:11px; color:var(--pb-text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.pb-bundle-total-price{ font-family:var(--pb-font-mono); font-weight:800; font-size:22px; margin-bottom:14px; }
.pb-bundle-total-price .pb-save{ font-size:12px; color:var(--pb-lime-dim); font-weight:700; display:block; margin-top:4px; }
@media (max-width:900px){ .pb-bundle-box{ grid-template-columns:1fr; text-align:center; } .pb-bundle-total{ text-align:center; } }

/* ==========================================================================
   COLLECTION PAGE
   ========================================================================== */
.pb-col-hero{ background:var(--pb-ink); padding:80px 32px 96px; position:relative; overflow:hidden; }
.pb-col-hero-glow{ position:absolute; top:-100px; right:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(196,225,0,0.16), transparent 70%); }
.pb-col-hero .pb-breadcrumb{ font-family:var(--pb-font-mono); font-size:11.5px; color:rgba(255,255,255,0.5); letter-spacing:0.5px; margin-bottom:20px; position:relative; z-index:2; max-width:none; padding:0; }
.pb-col-hero .pb-breadcrumb a:hover{ color:var(--pb-lime); }
.pb-col-hero-title{ font-family:var(--pb-font-display); font-weight:800; font-size:clamp(34px,5vw,52px); color:#fff; text-transform:uppercase; letter-spacing:-1px; line-height:1; margin-bottom:22px; position:relative; z-index:2; max-width:1280px; margin-left:auto; margin-right:auto; }
.pb-col-hero-title .pb-accent{ color:var(--pb-lime); }
.pb-col-hero-desc{ color:rgba(255,255,255,0.65); max-width:520px; font-size:15.5px; line-height:1.6; position:relative; z-index:2; margin-left:auto; margin-right:auto; }
.pb-col-hero-count{ font-family:var(--pb-font-mono); font-size:12px; color:var(--pb-lime); margin-top:24px; letter-spacing:0.5px; position:relative; z-index:2; max-width:1280px; margin-left:auto; margin-right:auto; }
.pb-col-hero-inner{ max-width:1280px; margin:0 auto; position:relative; }

.pb-col-layout{ max-width:1280px; margin:0 auto; padding:80px 32px 140px; display:grid; grid-template-columns:260px minmax(0, 1fr); gap:36px; align-items:start; }

/* FILTER SIDEBAR */
.pb-filters{ position:sticky; top:100px; }
.pb-filter-group{ border-bottom:2px solid var(--pb-ink); padding:28px 0; }
.pb-filter-group:first-child{ padding-top:0; }
.pb-filter-title{ font-family:var(--pb-font-display); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.pb-filter-option{ display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:14px; cursor:pointer; }
.pb-filter-option:hover {color: var(--pb-lime);}
.pb-checkbox{ cursor:pointer; padding:8px; border-radius:4px; width:16px; height:16px; border:2px solid var(--pb-ink); flex-shrink:0; position:relative; appearance:none; margin:0; background:#fff; }
.pb-checkbox:checked{ background:var(--pb-lime); border-color:var(--pb-lime); }
.pb-checkbox:checked::after{ content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--pb-ink); }
.pb-filter-count{ color:var(--pb-text-muted); font-size:12px; margin-left:auto; font-family:var(--pb-font-mono); }
.pb-price-range{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.pb-price-input{ flex:1; width:0; border:2px solid var(--pb-ink); padding:8px 10px; font-size:13px; font-family:var(--pb-font-mono); }
.pb-clear-filters{ font-size:12.5px; font-weight:700; color:var(--pb-blue); text-transform:uppercase; letter-spacing:0.5px; margin-top:20px; display:inline-block; text-decoration: none; font-style: italic;}
.pb-active-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.pb-pill{ background:#c8d285; color:black; font-size:14px; padding:6px 12px 6px 14px; display:flex; align-items:center; gap:8px; font-family:var(--pb-font-mono); border-radius:8px; text-decoration:none; }
.pb-pill span{ cursor:pointer;font-weight:800; }

.pb-help-card{ background:var(--pb-ink); padding:28px; margin-top:36px; }
.pb-help-icon{ width:36px; height:36px; background:var(--pb-lime); color:var(--pb-ink); display:flex; align-items:center; justify-content:center; font-family:var(--pb-font-mono); font-weight:800; font-size:15px; margin-bottom:16px; }
.pb-help-title{ font-family:var(--pb-font-display); font-weight:700; font-size:16px; color:#fff; margin-bottom:10px; text-transform:uppercase; }
.pb-help-desc{ font-size:13px; color:rgba(255,255,255,0.6); line-height:1.6; margin-bottom:18px; }
.pb-help-link{ font-size:12.5px; font-weight:800; color:var(--pb-lime); text-transform:uppercase; letter-spacing:0.5px;  }

/* TOOLBAR */
.pb-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:44px; padding-bottom:26px; border-bottom:2px solid var(--pb-line); flex-wrap:wrap; gap:16px; }
.pb-result-count{ font-size:14px; color:var(--pb-text-muted); }
.pb-result-count strong{ color:var(--pb-text); }
.pb-toolbar-right{ display:flex; align-items:center; gap:20px; }
.pb-view-toggle{ display:flex; gap:6px; }
.pb-view-toggle {display: flex;  gap: 8px; background: #f5f5f5; padding: 4px;  border-radius: 8px;}
.pb-view-btn {  width: 36px; height: 36px;border: none; border-radius: 6px; display: flex; align-items: center; justify-content: center;cursor: pointer; background: transparent; color: #7a7a7a;  transition: all 0.2s ease-in-out;}
.pb-view-btn:hover {  color: var(--pb-ink);  background: rgba(0, 0, 0, 0.05);}
.pb-view-btn.pb-active { background: #ffffff;  color: var(--pb-ink); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);}
.pb-sort-select{ border:2px solid var(--pb-ink); background:#fff; padding:10px 16px; font-family:var(--pb-font-body); font-size:13.5px; font-weight:600; cursor:pointer;  border-radius: 8px; }

/* GRID (extends .pb-products/.pb-product-card from custom-landing.css) */
.pb-product-card{ position:relative; padding-bottom: 48px;  max-width: 300px; }
.pb-product-level{ display:inline-block; font-family:var(--pb-font-mono); font-size:9.5px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; padding:3px 8px; margin-bottom:12px; background:var(--pb-surface-2); }
.pb-product-badge.pb-badge-blue{ background:var(--pb-blue); color:#fff; }
.pb-wishlist-btn{ position:absolute; top:12px; right:12px; width:32px; height:32px; background:#fff; border:2px solid var(--pb-ink); display:flex; align-items:center; justify-content:center; font-size:14px; z-index:2; cursor:pointer; }
.pb-quick-add{ position:absolute; bottom:0; left:0; right:0; border-radius: 8px; margin:16px; background:var(--pb-ink); color:#fff; text-align:center; padding:12px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; transform:translateY(180%); transition:transform 0.5s ease; border:none; cursor:pointer; font-family:var(--pb-font-body); }
.pb-product-card:hover .pb-quick-add{ transform:translateY(0); }
/* .pb-product-card:hover{ } */
.pb-product-meta{ display:flex; align-items:center; justify-content:space-between; }
.pb-product-rating{ font-size:16px; color:var(--pb-lime-dim); }

.pb-spotlight-tile{ background:var(--pb-blue); color:#fff; padding:32px; display:flex; flex-direction:column; justify-content:space-between; }
.pb-spotlight-tag{ font-family:var(--pb-font-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--pb-lime); margin-bottom:14px; font-weight:700; }
.pb-spotlight-title{ font-family:var(--pb-font-display); font-weight:800; font-size:22px; text-transform:uppercase; line-height:1.15; margin-bottom:12px; }
.pb-spotlight-desc{ font-size:13.5px; color:rgba(255,255,255,0.75); line-height:1.6; margin-bottom:20px; }
.pb-spotlight-link{ font-size:12.5px; font-weight:800; color:var(--pb-lime); text-transform:uppercase; letter-spacing:0.5px; }

.pb-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:80px; flex-wrap:wrap; }
.pb-page-btn{ width:40px; height:40px; border:2px solid var(--pb-ink); display:flex; align-items:center; justify-content:center; font-family:var(--pb-font-mono); font-size:13px; font-weight:700; text-decoration:none; color:inherit; background:#fff; }
.pb-page-btn.pb-active{ background:var(--pb-ink); color:var(--pb-lime); }
.pb-page-btn.pb-arrow{ font-size:16px; }
.pb-page-btn.pb-disabled{ opacity:0.35; pointer-events:none; }

.pb-empty-state{ padding:60px 0; text-align:center; color:var(--pb-text-muted); font-size:15px; }

/* list view modifier (toggled by JS in custom-collection-grid.liquid) */
.pb-products {
  /* display: flex; justify-content: space-evenly; flex-direction: row; flex-wrap: wrap; gap: 80px 16px; */
  display:grid;
  
}

.pb-products.pb-list-view{ 
  grid-template-columns: 1fr;
}
.pb-products.pb-list-view .pb-product-card{ max-width:100%; }
.pb-products.pb-list-view .pb-product-card > a{ display: grid; grid-template-columns: 30% 1fr; }
.pb-products.pb-list-view .pb-product-img{ 
  border-bottom:none;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 8px;
  aspect-ratio:auto; height:100%; }

.pb-products.pb-list-view .pb-quick-add{ 
  width: 200px;
  margin-inline: auto;
}
.pb-products.pb-list-view .pb-spotlight-tile{ grid-column:1 / -1; }

.pb-product-card-description {
  display: none;
  -webkit-line-clamp: 3;           /* Force exactly 3 lines max */
  -webkit-box-orient: vertical;  
  overflow: hidden;                /* Hide any text beyond 3 lines */
  text-overflow: ellipsis;         /* Automatically add the ... */
}

.pb-products.pb-list-view .pb-product-card-description{
  display : -webkit-box;
}

@media (max-width:900px){
  .pb-pdp{ grid-template-columns:1fr; }
  .pb-desc-grid{ grid-template-columns:1fr; }
  .pb-col-layout{ grid-template-columns: minmax(0, 1fr); }
  .pb-filters{ position:static; }
  .pb-bundle-box{ grid-template-columns:1fr; }
}


@media (max-width:480px){

 .pb-products.pb-list-view .pb-product-img {
  display: none
  /* position: absolute;
  z-index: -1;
  top: 0;
  left: 0; */
  }
  .pb-products.pb-list-view .pb-product-card > a{
    grid-template-columns: 1fr;
  }
  .pb-col-layout{ padding-inline: 16px; }
}





 /* =========================================================
     COLLECTION HERO
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero {

    position: relative;

    min-height: var(--pb-hero-height);

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background:
      var(--pb-hero-bg);

    color: var(--pb-hero-text);

    isolation: isolate;

  }


  /* =========================================================
     INNER
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__inner {

    width: 100%;

    position: relative;

    min-height: var(--pb-hero-height);

    display: flex;

    align-items: center;

    z-index: 3;

  }


  /* =========================================================
     BACKGROUND GLOW
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__glow {

    position: absolute;

    width: 520px;
    height: 520px;

    left: -220px;
    bottom: -320px;

    border-radius: 50%;

    background:
      radial-gradient(
        circle,
        var(--pb-hero-accent),
        transparent 68%
      );

    opacity: 0.08;

    pointer-events: none;

    z-index: 0;

  }


  /* =========================================================
     OPTIONAL PATTERN
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__pattern {

    position: absolute;

    inset: 0;

    opacity: 0.035;

    background-image:
      linear-gradient(
        135deg,
        currentColor 1px,
        transparent 1px
      );

    background-size: 32px 32px;

    pointer-events: none;

    z-index: 0;

  }


  /* =========================================================
     CONTENT
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__content {

    position: relative;

    z-index: 5;

    width: 52%;

    padding-top: 70px;
    padding-bottom: 70px;

  }


  /* =========================================================
     BREADCRUMB
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__breadcrumb {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 28px;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--pb-hero-text);

    opacity: 0.55;

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__breadcrumb a {

    color: inherit;

    text-decoration: none;

    transition: opacity 0.2s ease;

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__breadcrumb a:hover {

    opacity: 0.65;

  }


  /* =========================================================
     EYEBROW
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__eyebrow {

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: var(--pb-hero-accent);

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__eyebrow::before {

    content: '';

    width: 30px;

    height: 2px;

    background: var(--pb-hero-accent);

    flex: 0 0 30px;

  }


  /* =========================================================
     TITLE
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__title {

    margin: 0;

    max-width: 720px;

    font-family:
      var(--font-heading-family),
      sans-serif;

    font-size:
      clamp(42px, 6vw, 48px);

    line-height: 0.95;

    letter-spacing: -2.5px;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--pb-hero-text);

  }


  /* =========================================================
     DESCRIPTION
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__description {

    max-width: 540px;

    margin-top: 26px;

    font-size: 16px;

    line-height: 1.65;

    color: var(--pb-hero-text);

    opacity: 0.68;

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__description p {

    margin: 0 0 12px;

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__description p:last-child {

    margin-bottom: 0;

  }


  /* =========================================================
     PRODUCT COUNT
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__count {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 30px;

    padding: 10px 16px;

    border: 1px solid
      color-mix(
        in srgb,
        var(--pb-hero-text) 20%,
        transparent
      );

    background:
      color-mix(
        in srgb,
        var(--pb-hero-text) 5%,
        transparent
      );

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

  }

  #shopify-section-{{ section.id }} .pb-collection-hero__count-number {

    color: var(--pb-hero-accent);

    font-size: 16px;

    font-weight: 800;

  }


  /* =========================================================
     DIAGONAL IMAGE AREA
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__visual {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;

    width: var(--pb-hero-image-width);

    overflow: hidden;

    z-index: 1;

  }


  /* =========================================================
     DIAGONAL IMAGE
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__image {

    position: absolute;

    inset: 0;

    overflow: hidden;

    clip-path:
      polygon(
        17% 0,
        100% 0,
        100% 100%,
        0% 100%
      );

  }


  #shopify-section-{{ section.id }} .pb-collection-hero__image img {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
      {{ section.settings.image_position }};

    display: block;

    transform: scale(1.03);

    transition:
      transform 0.7s ease;

  }


  /* =========================================================
     IMAGE OVERLAY
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero__image-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
      linear-gradient(
        90deg,
        var(--pb-hero-bg) 0%,
        rgba(0,0,0,0) 35%
      );

    opacity: var(--pb-hero-overlay);

  }


  #shopify-section-{{ section.id }} .pb-collection-hero:hover
  .pb-collection-hero__image img {

    transform: scale(1.06);

  }


  /* =========================================================
     DESKTOP DECORATIVE LINE
  ========================================================= */

  #shopify-section-{{ section.id }} .pb-collection-hero::after {

    content: '';

    position: absolute;

    right: 48%;

    top: 0;
    bottom: 0;

    width: 1px;

    background:
      linear-gradient(
        to bottom,
        transparent,
        color-mix(
          in srgb,
          var(--pb-hero-accent) 40%,
          transparent
        ),
        transparent
      );

    transform:
      skewX(-17deg);

    transform-origin: top;

    z-index: 4;

    opacity: 0.45;

    pointer-events: none;

  }


  /* =========================================================
     TABLET
  ========================================================= */

  @media screen and (max-width: 989px) {

    #shopify-section-{{ section.id }} .pb-collection-hero {

      --pb-hero-height: 560px;

    }

    #shopify-section-{{ section.id }} .pb-collection-hero__content {

      width: 55%;

    }

    #shopify-section-{{ section.id }} .pb-collection-hero__title {

      font-size:
        clamp(40px, 7vw, 48px);

    }

    #shopify-section-{{ section.id }} .pb-collection-hero__visual {

      width: 58%;

    }

  }


  /* =========================================================
     MOBILE
  ========================================================= */

  @media screen and (max-width: 749px) {

    #shopify-section-{{ section.id }} .pb-collection-hero {

      min-height: auto;

    }

    #shopify-section-{{ section.id }} .pb-collection-hero__inner {

      min-height: 650px;

      display: flex;

      align-items: flex-start;

    }


    /* Image becomes bottom diagonal panel */

    #shopify-section-{{ section.id }} .pb-collection-hero__visual {

      top: auto;

      bottom: 0;

      left: 0;

      width: 100%;

      height: 42%;

    }

    #shopify-section-{{ section.id }} .pb-collection-hero__image {

      clip-path:
        polygon(
          0 24%,
          100% 0,
          100% 100%,
          0 100%
        );

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__image-overlay {

      background:
        linear-gradient(
          180deg,
          var(--pb-hero-bg) 0%,
          rgba(0,0,0,0) 55%
        );

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__content {

      width: 100%;

      padding-top: 42px;
      padding-bottom: 0;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__breadcrumb {

      margin-bottom: 22px;

      font-size: 10px;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__eyebrow {

      font-size: 9px;

      letter-spacing: 2px;

      margin-bottom: 14px;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__title {

      max-width: 95%;

      font-size:
        clamp(38px, 12vw, 54px);

      line-height: 0.95;

      letter-spacing: -1.5px;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__description {

      max-width: 90%;

      margin-top: 18px;

      font-size: 14px;

      line-height: 1.55;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero__count {

      margin-top: 20px;

      font-size: 9px;

    }


    #shopify-section-{{ section.id }} .pb-collection-hero::after {

      display: none;

    }

  }


  /* =========================================================
     REDUCED MOTION
  ========================================================= */

  @media (prefers-reduced-motion: reduce) {

    #shopify-section-{{ section.id }}
    .pb-collection-hero__image img {

      transition: none;

    }

  }


.pb-price-range-wrap{ margin-top: 6px; }

.pb-price-inputs{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pb-price-field {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid #0E1116;
  padding: 8px 10px;
  gap: 4px;
  border-radius: 8px;
}
.pb-price-currency{ font-family: var(--pb-font-mono, monospace); font-size: 12px; color: var(--pb-text-muted, #666B72); }
.pb-price-field .pb-price-input{
  border: none;
  padding: 0;
  width: 100%;
  font-family: var(--pb-font-mono, monospace);
  font-size: 13px;
}
.pb-price-field .pb-price-input:focus{ outline: none; }
.pb-price-sep{ color: var(--pb-text-muted, #666B72); }

.pb-price-track{
  position: relative;
  height: 4px;
  background: var(--pb-line, #E6E5DE);
  margin: 0 8px 6px;
}
.pb-price-track-fill{
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--pb-ink, #0E1116);
}
.pb-price-slider{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.pb-price-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  pointer-events: all;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pb-lime, #C4E100);
  border: 2px solid var(--pb-ink, #0E1116);
  cursor: pointer;
  margin-top: 0;
}
.pb-price-slider::-moz-range-thumb{
  pointer-events: all;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pb-lime, #C4E100);
  border: 2px solid var(--pb-ink, #0E1116);
  cursor: pointer;
}
.pb-price-slider::-moz-range-track{ background: transparent; border: none; }


.pb-price-field .pb-price-input::-webkit-outer-spin-button,
.pb-price-field .pb-price-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.pb-price-field .pb-price-input{
  -moz-appearance: textfield;
}

.pb-price-field .pb-price-input:focus{
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0, 0, 0, 0.15);
}

.pb-brand-highlight{ padding: 60px 32px; }

.pb-brand-showcase{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border: 2px solid var(--pb-ink, #0E1116);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pb-surface, #fff);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pb-brand-showcase:hover{
  transform: translateY(-6px);
  box-shadow: 10px 10px 0 var(--pb-lime, #C4E100);
}

/* ---------- Visual side: animated gradient + diagonal cut image ---------- */
.pb-brand-visual{
  position: relative;
  overflow: hidden;
  min-height: 380px;
  background: var(--pb-ink, #0E1116);
}
.pb-brand-gradient{
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    115deg,
    var(--pb-blue, #1958C4) 0%,
    var(--pb-ink, #0E1116) 35%,
    var(--pb-lime, #C4E100) 65%,
    var(--pb-blue, #1958C4) 100%
  );
  background-size: 300% 300%;
  animation: pbBrandGradientShift 10s ease infinite;
  opacity: 0.9;
}
@keyframes pbBrandGradientShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.pb-brand-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.pb-brand-logo-badge{
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  background: #fff;
  border: 2px solid var(--pb-ink, #0E1116);
  border-radius: 8px;
  padding: 10px 16px;
  max-width: 140px;
}
.pb-brand-logo-badge img{ width: 100%; height: auto; object-fit: contain; display: block; }

.pb-brand-secondary-image{
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 3;
  max-width: 120px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #fff;
}
.pb-brand-secondary-image img{ width: 100%; height: auto; object-fit: cover; display: block; }

/* ---------- Content side ---------- */
.pb-brand-content{
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pb-brand-name{
  font-family: var(--pb-font-display, sans-serif);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -1.2px;
  margin: 10px 0 12px;
}
.pb-brand-tagline{
  font-family: var(--pb-font-mono, monospace);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pb-blue, #1958C4);
  letter-spacing: 0.4px;
  margin-bottom: 18px;
}
.pb-brand-desc{
  font-size: 15px;
  color: var(--pb-text-muted, #666B72);
  line-height: 1.75;
  margin-bottom: 30px;
  max-width: 420px;
}

.pb-brand-content .pb-btn{
  display: inline-flex;
  max-width: 220px;
  border-radius:none;
}

@media (max-width: 900px){
  .pb-brand-showcase{ grid-template-columns: 1fr; }
  .pb-brand-visual{ min-height: 260px; }
  .pb-brand-content{ padding: 40px 28px; }
  .pb-brand-name{ font-size: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .pb-brand-gradient{ animation: none; }
}