/* Custom packaging category and quote pages */
/* commerce.css sets overflow:hidden on .commerce-main site-wide (needed to clip
   full-bleed hero backgrounds on the category hero); on the quote pages that
   same overflow:hidden sits between the sticky gallery and the viewport, which
   silently breaks position:sticky. Opt back out here, same fix as commerce-product.css. */
.commerce-page.commerce-custom-page .commerce-main{overflow:visible}
.commerce-custom-page .custom-breadcrumb{display:flex;gap:8px;padding:14px 0;border-bottom:1px solid var(--commerce-gray-200);color:var(--commerce-gray-500);font-size:13px}
.commerce-custom-page .custom-breadcrumb a{color:var(--commerce-gray-500);text-decoration:none}
.commerce-custom-page .custom-category-hero{position:relative;min-height:430px;overflow:hidden;background:linear-gradient(180deg,#fc7593,#c5a0cc)}
.commerce-custom-page .custom-category-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.commerce-custom-page .custom-category-scrim{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.commerce-custom-page .custom-category-copy{position:relative;z-index:2;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.commerce-custom-page .custom-category-copy h1{margin:0;color:#fff;font:800 clamp(48px,8vw,108px)/.9 "Karla",sans-serif;text-transform:uppercase}
.commerce-custom-page .custom-category-copy p{margin:12px 0 0;color:#fff;font-size:18px}
.commerce-custom-page .custom-category-products{padding:54px 0 80px}
.commerce-custom-page .stock-product-grid{max-width:none;margin-inline:0;}
.commerce-custom-page .custom-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;padding:32px 0 72px}
.commerce-custom-page .custom-gallery{position:sticky;top:110px;align-self:start;display:flex;gap:14px;min-width:0}
.commerce-custom-page .custom-thumbs{width:80px;display:flex;flex-direction:column;gap:8px}
.commerce-custom-page .custom-thumb{aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:5px;overflow:hidden}
.commerce-custom-page .custom-thumb.active{border-color:#000}.commerce-custom-page .custom-thumb img{width:100%;height:100%;object-fit:cover}
.commerce-custom-page .custom-main-image{position:relative;flex:1;aspect-ratio:1;overflow:hidden;border-radius:6px;background:#f4f4f4}
.commerce-custom-page .custom-main-image img{width:100%;height:100%;object-fit:cover}
.commerce-custom-page .custom-main-image button{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.12);cursor:pointer}
.commerce-custom-page .custom-info h1{margin:10px 0 22px;padding-bottom:22px;border-bottom:1px solid #e5e5e5;font:600 clamp(38px,4vw,56px)/1 "Karla",sans-serif}
.commerce-custom-page .custom-quote-meta{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #e5e5e5}
.commerce-custom-page .custom-info>p{padding:20px 0;margin:0;border-bottom:1px solid #e5e5e5;color:#404040;line-height:1.65}
.commerce-custom-page .custom-quote-form{display:flex;flex-direction:column;gap:15px;padding:22px 0}
.commerce-custom-page .custom-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.commerce-custom-page .custom-quote-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700}
.commerce-custom-page .custom-quote-form input,.commerce-custom-page .custom-quote-form select,.commerce-custom-page .custom-quote-form textarea{width:100%;padding:11px 13px;border:1px solid #d4d4d4;border-radius:6px;background:#fff;font:14px "Karla",sans-serif}
.commerce-custom-page .custom-file{display:block;margin-bottom:10px}.commerce-custom-page .custom-file input{display:none}.commerce-custom-page .custom-file span{padding:13px;border:1px dashed #d4d4d4;border-radius:6px;font-weight:500}
.commerce-custom-page .custom-quote-form>button{min-height:48px;border:0;border-radius:6px;background:#000;color:#fff;font-weight:700}.commerce-custom-page .custom-quote-form>button:hover{background:var(--commerce-red)}
.commerce-custom-page .custom-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 0;border-top:1px solid #e5e5e5}
.commerce-custom-page .custom-trust-item{display:flex;align-items:flex-start;gap:10px}
.commerce-custom-page .custom-trust-icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--commerce-gray-100);color:var(--commerce-red)}
.commerce-custom-page .custom-trust-icon svg{width:16px;height:16px}
.commerce-custom-page .custom-trust-text strong,.commerce-custom-page .custom-trust-text span{display:block}
.commerce-custom-page .custom-trust-text strong{font-size:13px;font-weight:600}
.commerce-custom-page .custom-trust-text span{margin-top:2px;color:#737373;font-size:12px}
.commerce-custom-page .custom-tabs-section{padding:48px 0;background:#fafafa;border-top:1px solid #e5e5e5}
.commerce-custom-page .custom-tabs{display:flex;gap:30px;overflow:auto;border-bottom:1px solid #e5e5e5}
.commerce-custom-page .custom-tabs button{position:relative;padding:14px 0;border:0;background:none;color:#737373;font-weight:700;white-space:nowrap}
.commerce-custom-page .custom-tabs button.active{color:#000}.commerce-custom-page .custom-tabs button.active:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--commerce-red)}
.commerce-custom-page .custom-tab-panel{display:none;grid-template-columns:1fr 1fr;gap:48px;padding-top:30px}.commerce-custom-page .custom-tab-panel.active{display:grid}
.commerce-custom-page .custom-tab-panel h2{font-size:15px}.commerce-custom-page .custom-tab-panel table{width:100%;border-collapse:collapse}.commerce-custom-page .custom-tab-panel tr{border-bottom:1px solid #e5e5e5}.commerce-custom-page .custom-tab-panel td{padding:12px 0;font-size:13px}.commerce-custom-page .custom-tab-panel td:first-child{color:#737373}
.custom-toast{position:fixed;z-index:1000;bottom:24px;left:50%;padding:14px 20px;border-radius:8px;background:#000;color:#fff;opacity:0;transform:translate(-50%,80px);transition:.3s}.custom-toast.show{opacity:1;transform:translate(-50%,0)}
.custom-zoom{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:30px;background:rgba(0,0,0,.92)}.custom-zoom[hidden]{display:none}.custom-zoom img{max-width:94vw;max-height:90vh}.custom-zoom button:not(.custom-zoom-nav){position:absolute;top:18px;right:24px;color:#fff;font-size:44px}
@media(max-width:900px){.commerce-custom-page .custom-detail{grid-template-columns:minmax(0,1fr)}.commerce-custom-page .custom-gallery{position:static}}
@media(max-width:680px){.commerce-custom-page .custom-gallery{flex-direction:column-reverse}.commerce-custom-page .custom-thumbs{width:100%;flex-direction:row;overflow:auto}.commerce-custom-page .custom-thumb{width:68px;flex:0 0 68px}.commerce-custom-page .custom-form-grid,.commerce-custom-page .custom-trust,.commerce-custom-page .custom-tab-panel{grid-template-columns:1fr}}


/* Pill-based custom quote controls */
.commerce-custom-page .custom-pill-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.commerce-custom-page .custom-pill-group legend {
  margin-bottom: 9px;
  color: #000;
  font-size: 12px;
  font-weight: 700;
}

.commerce-custom-page .custom-pill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.commerce-custom-page .custom-choice-pill {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.commerce-custom-page .custom-choice-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.commerce-custom-page .custom-choice-pill span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid #d4d4d4;
  border-radius: 7px;
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.commerce-custom-page .custom-choice-pill:hover span {
  border-color: #000;
}

.commerce-custom-page .custom-choice-pill input:checked + span {
  border-color: #000;
  background: #000;
  color: #fff;
}

.commerce-custom-page .custom-choice-pill input:focus-visible + span {
  outline: 2px solid #f5333f;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .commerce-custom-page .custom-pill-options {
    gap: 7px;
  }

  .commerce-custom-page .custom-choice-pill span {
    min-height: 40px;
    padding: 8px 13px;
    font-size: 12px;
  }
}


/* Public custom quote submission status */
.commerce-custom-page .custom-quote-status {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #d4d4d4;
  border-radius: 7px;
  background: #f9fafb;
  color: #404040;
  font-size: 13px;
  line-height: 1.5;
}

.commerce-custom-page
  .custom-quote-status[data-status-type="success"] {
  border-color: #b9dfc6;
  background: #edf9f1;
  color: #11652f;
}

.commerce-custom-page
  .custom-quote-status[data-status-type="error"] {
  border-color: #f1b8bd;
  background: #fff1f2;
  color: #a51623;
}

.commerce-custom-page
  .custom-quote-form button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}


/* July 2026 custom-packaging revisions */
.custom-detail{align-items:start;}
@media(min-width:960px){.custom-gallery{position:sticky;top:110px;max-width:90%;}.custom-detail{grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr);}}
.custom-main-image img{object-fit:contain;}
.custom-info h1{font-family:Karla,sans-serif;font-weight:800;}
.custom-pill-group legend{display:flex;justify-content:space-between;gap:14px;width:100%;}
.custom-pill-group legend small,.custom-quote-form label small{font:500 12px Karla,sans-serif;color:#777;}
.custom-quantity-control{display:grid;grid-template-columns:44px 90px 44px;width:max-content;border:1px solid #ddd;margin-top:9px;}
.custom-quantity-control button,.custom-quantity-control input{height:44px;border:0;background:#fff;text-align:center;font-family:Karla,sans-serif;}
.custom-quantity-control button{font-size:20px;cursor:pointer;}
.custom-related{padding:64px 0;border-top:1px solid var(--commerce-gray-200);}
.custom-related h2{font-family:Karla,sans-serif;font-size:36px;font-weight:500;letter-spacing:-.02em;margin:0 0 26px;}
.custom-related .stock-product-grid{max-width:none;margin-inline:0;}
#custom-image-zoom:hover{transform:none;}

/* Custom product design-match corrections */
#custom-image-zoom svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.custom-zoom{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000;display:flex;align-items:center;justify-content:center}.custom-zoom[hidden]{display:none}.custom-zoom-close,.custom-zoom-nav{position:absolute;border:0;background:transparent;color:#fff;z-index:5;cursor:pointer}.custom-zoom-close{right:24px;top:18px;font-size:42px}.custom-zoom-nav{top:50%;transform:translateY(-50%);font-size:54px}.custom-zoom-nav.prev{left:24px}.custom-zoom-nav.next{right:24px}.custom-tabs{border-bottom:1px solid #ddd}.custom-tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:16px 4px;margin-right:28px}.custom-tabs button.active{border-color:#ed1b2f}