/* Scoped to the public catalog so ERP styles remain independent. */
.storefront  {
  * {
    box-sizing:border-box
  }
  & {
    scroll-behavior:smooth;
    scroll-padding-top:100px
  }
  & {
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-sans);
    line-height:1.65
  }
  a {
    color:inherit;
    text-decoration:none
  }
  button,input,select {
    font:inherit
  }
  a:focus-visible,input:focus-visible,select:focus-visible {
    outline:3px solid var(--focus-ring);
    outline-offset:4px
  }
  img {
    display:block;
    max-width:100%
  }
  .sf-announcement {
    text-align:center;
    background:var(--emerald-deep);
    color:var(--white);
    padding:9px 16px;
    font-size:10px;
    letter-spacing:var(--tracking-cjk)
  }
  .sf-header {
    position:sticky;
    top:0;
    z-index:10;
    background:var(--cream);
    border-bottom:1px solid var(--border-hairline);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 5%;
    gap:20px
  }
  .sf-brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:20px;
    font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-cjk)
  }
  .sf-brand small {
    display:block;
    font-size:9px;
    font-weight:400;
    letter-spacing:var(--tracking-cjk)
  }
  .sf-header nav {
    display:flex;
    align-items:center;
    gap:30px;
    font-size:13px
  }
  .sf-nav-account {
    border:1px solid var(--border-strong);
    padding:9px 16px;
    border-radius:var(--radius-control)
  }
  .sf-hero {
    display:grid;
    grid-template-columns:1fr 1.08fr;
    min-height:590px
  }
  .sf-hero-copy {
    padding:80px 9% 64px 10%
  }
  .sf-eyebrow {
    font-size:10px;
    letter-spacing:var(--tracking-cjk);
    color:var(--text-secondary);
    font-weight:var(--weight-bold)
  }
  .sf-hero h1 {
    font-family:var(--font-sans);
    font-size:clamp(34px,3.5vw,58px);
    line-height:1.5;
    letter-spacing:var(--tracking-cjk);
    font-weight:400;
    margin:22px 0
  }
  .sf-hero-copy>p:not(.sf-eyebrow) {
    font-size:14px;
    color:var(--text-secondary);
    line-height:2
  }
  .sf-button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    background:var(--emerald);
    color:white;
    border:0;
    border-radius:var(--radius-control);
    padding:14px 25px;
    font-size:13px;
    cursor:pointer;
    letter-spacing:var(--tracking-cjk)
  }
  .sf-button:hover {
    background:var(--emerald-deep)
  }
  .sf-hero .sf-button {
    margin-top:20px
  }
  .sf-hero-note {
    display:block;
    margin-top:42px;
    font-size:9px;
    letter-spacing:var(--tracking-cjk);
    color:var(--text-secondary)
  }
  .sf-hero-image {
    position:relative;
    background:var(--sand);
    min-width:0
  }
  .sf-hero-image>img {
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover
  }
  .sf-hero-caption {
    position:absolute;
    bottom:28px;
    left:28px;
    right:28px;
    background:var(--cream);
    padding:18px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px
  }
  .sf-hero-caption strong {
    font-size:17px;
    font-weight:400
  }
  .sf-hero-empty {
    height:100%;
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:12%;
    background:linear-gradient(135deg,var(--sand),var(--sand));
    color:var(--text-secondary)
  }
  .sf-hero-empty>span {
    font-size:10px;
    letter-spacing:var(--tracking-cjk)
  }
  .sf-hero-empty strong {
    font-size:36px;
    font-weight:400;
    margin:30px 0
  }
  .sf-hero-empty p {
    font-size:12px
  }
  .sf-section {
    max-width:1400px;
    margin:auto;
    padding:72px 5%
  }
  .sf-section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px
  }
  .sf-section-heading h2,.sf-services h2 {
    font-size:28px;
    font-weight:400;
    letter-spacing:var(--tracking-cjk);
    margin:8px 0
  }
  .sf-section-heading>span {
    font-size:12px;
    color:var(--text-secondary);
    white-space:nowrap
  }
  .sf-filters {
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:16px;
    align-items:end;
    padding:22px 0;
    border-top:1px solid var(--border-hairline);
    border-bottom:1px solid var(--border-hairline);
    margin-bottom:36px
  }
  .sf-filters label {
    display:block;
    font-size:11px;
    margin-bottom:8px;
    color:var(--text-secondary)
  }
  .sf-filters input:not([type=submit]),.sf-filters select {
    width:100%;
    min-width:0;
    background:transparent;
    color:var(--ink);
    border:1px solid var(--border-strong);
    padding:12px;
    border-radius:var(--radius-control);
    font-size:13px;
    height:47px
  }
  .sf-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:38px 26px
  }
  .sf-product {
    min-width:0
  }
  .sf-product-image {
    display:block;
    position:relative;
    aspect-ratio:1.15;
    background:var(--sand);
    overflow:hidden
  }
  .sf-product-image img {
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s
  }
  .sf-product-image:hover img {
    transform:scale(1.035)
  }
  .sf-product-arrow {
    position:absolute;
    bottom:15px;
    right:15px;
    background:var(--cream);
    width:34px;
    height:34px;
    text-align:center;
    border-radius:50%;
    line-height:34px
  }
  .sf-product-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-size:10px;
    color:var(--text-secondary);
    margin:16px 0 5px;
    overflow-wrap:anywhere
  }
  .sf-product h3 {
    font-size:18px;
    font-weight:400;
    margin:4px 0;
    overflow-wrap:anywhere
  }
  .sf-product p {
    font-size:12px;
    color:var(--text-secondary);
    margin:4px 0 12px
  }
  .sf-product>strong {
    font-size:14px;
    font-weight:500
  }
  .sf-no-image {
    display:flex;
    height:100%;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:var(--text-secondary);
    font-size:14px
  }
  .sf-no-image span {
    font-size:9px;
    letter-spacing:var(--tracking-cjk);
    margin-top:10px
  }
  .sf-empty {
    padding:70px 20px;
    text-align:center;
    background:var(--sand);
    color:var(--text-secondary)
  }
  .sf-empty h3 {
    font-size:23px;
    font-weight:400
  }
  .sf-empty a {
    text-decoration:underline
  }
  .sf-pagination {
    display:flex;
    gap:30px;
    justify-content:center;
    margin-top:40px;
    font-size:13px
  }
  .sf-services {
    display:grid;
    grid-template-columns:1.2fr repeat(3,1fr);
    gap:35px;
    background:var(--sand);
    padding:60px 5%
  }
  .sf-services article {
    border-left:1px solid var(--sand);
    padding-left:28px
  }
  .sf-services article span {
    font-size:10px;
    color:var(--text-secondary)
  }
  .sf-services h3 {
    font-size:18px;
    font-weight:400;
    margin-top:28px
  }
  .sf-services article p {
    font-size:13px;
    color:var(--text-secondary)
  }
  .sf-footer {
    background:var(--emerald-deep);
    color:var(--cream);
    padding:48px 5%;
    display:flex;
    justify-content:space-between;
    gap:25px;
    align-items:center
  }
  .sf-footer strong {
    font-weight:400;
    letter-spacing:var(--tracking-cjk)
  }
  .sf-footer p,.sf-footer small {
    font-size:11px;
    color:var(--sand)
  }
  .sf-footer a {
    font-size:12px;
    margin-right:25px
  }
  .sf-flash {
    padding:15px 5%;
    background:var(--sand)
  }
  .sf-skip {
    position:absolute;
    left:10px;
    top:-100px;
    z-index:30;
    padding:10px;
    background:white
  }
  .sf-skip:focus {
    top:10px
  }
  .sf-breadcrumb {
    font-size:12px;
    color:var(--text-secondary);
    margin-bottom:32px
  }
  .sf-detail {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;
    margin-bottom:80px
  }
  .sf-gallery {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    align-content:start
  }
  .sf-gallery>a:first-child {
    grid-column:1/-1
  }
  .sf-gallery img {
    width:100%;
    background:var(--sand)
  }
  .sf-detail-info h1 {
    font-size:36px;
    line-height:1.4;
    font-weight:400
  }
  .sf-price {
    font-size:25px;
    margin-bottom:4px
  }
  .sf-muted {
    font-size:12px;
    color:var(--text-secondary)
  }
  .sf-detail-info h2 {
    font-size:16px;
    margin-top:40px;
    font-weight:500
  }
  .sf-specs {
    display:grid;
    grid-template-columns:auto 1fr;
    font-size:13px
  }
  .sf-specs dt,.sf-specs dd {
    border-bottom:1px solid var(--sand);
    padding:14px 0;
    margin:0
  }
  .sf-specs dd {
    padding-left:20px;
    text-align:right;
    overflow-wrap:anywhere
  }
  .sf-detail-note {
    background:var(--sand);
    padding:20px;
    font-size:13px;
    margin:30px 0;
    line-height:2
  }
  @media(max-width:900px) {
    .sf-hero-copy {
      padding:50px 8%
    }
    .sf-hero {
      min-height:500px
    }
    .sf-grid {
      grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .sf-services {
      grid-template-columns:1fr 1fr
    }
    .sf-detail {
      gap:30px
    }
    .sf-header nav {
      gap:15px
    }
  }
  @media(max-width:600px) {
    .sf-announcement {
      font-size:8px;
      letter-spacing:var(--tracking-cjk)
    }
    .sf-header {
      padding:14px 5%;
      gap:10px
    }
    .sf-brand {
      font-size:16px;
      letter-spacing:var(--tracking-cjk);
      gap:7px
    }
    .sf-brand img {
      width:28px
    }
    .sf-brand small {
      font-size:7px;
      letter-spacing:var(--tracking-cjk)
    }
    .sf-header nav {
      gap:12px;
      font-size:11px
    }
    .sf-header nav>a:nth-child(2) {
      display:none
    }
    .sf-nav-account {
      padding:7px 9px
    }
    .sf-hero {
      grid-template-columns:1fr
    }
    .sf-hero-copy {
      padding:38px 6%
    }
    .sf-hero h1 {
      font-size:36px
    }
    .sf-hero-note {
      margin-top:28px
    }
    .sf-hero-image {
      min-height:330px
    }
    .sf-hero-empty {
      min-height:330px
    }
    .sf-section {
      padding:42px 5%
    }
    .sf-section-heading h2 {
      font-size:22px
    }
    .sf-filters {
      grid-template-columns:1fr 1fr;
      gap:12px
    }
    .sf-filters>div:first-child {
      grid-column:1/-1
    }
    .sf-filters .sf-button {
      grid-column:1/-1
    }
    .sf-grid {
      gap:28px 14px
    }
    .sf-product h3 {
      font-size:16px
    }
    .sf-product-meta {
      font-size:9px;
      flex-wrap:wrap;
      gap:2px
    }
    .sf-services {
      grid-template-columns:1fr;
      padding:38px 6%;
      gap:24px
    }
    .sf-services article {
      padding-left:20px
    }
    .sf-services h3 {
      margin-top:12px
    }
    .sf-footer {
      flex-wrap:wrap
    }
    .sf-footer small {
      width:100%
    }
    .sf-detail {
      grid-template-columns:1fr
    }
    .sf-detail-info h1 {
      font-size:30px
    }
  }
  @media(prefers-reduced-motion:reduce) {
    & {
      scroll-behavior:auto
    }
    .sf-product-image img {
      transition:none
    }
  }
}

/* Comfy storefront components share the back-office brand and status tokens. */
.storefront {
  .sf-header { background: var(--emerald); color: var(--white); padding-block: var(--space-6); }
  .sf-nav-account { border-color: var(--emerald-light); min-height: 44px; display: inline-flex; align-items: center; }
  .sf-button { min-height: var(--comfy-control-h); font-weight: var(--weight-medium); }
  .sf-hero .sf-button { background: var(--coral); color: var(--ink); }
  .sf-hero .sf-button:hover { background: var(--coral-tint); }
  .sf-hero h1 { color: var(--emerald-deep); font-weight: var(--weight-bold); }
  .sf-product { background: var(--white); border: 1px solid var(--border-hairline); border-radius: var(--radius-card-comfy); overflow: hidden; padding-bottom: var(--comfy-card-pad); box-shadow: var(--shadow-card-comfy); }
  .sf-product-meta,.sf-product h3,.sf-product p,.sf-product>strong { margin-inline: var(--comfy-card-pad); }
  .sf-product>strong { display: block; color: var(--emerald); font-variant-numeric: tabular-nums; text-align: right; }
  .sf-price { color: var(--emerald); font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); }
  .sf-filters input:not([type=submit]),.sf-filters select { background: var(--white); height: var(--comfy-control-h); }
  .sf-detail-note,.sf-hero-caption { border-radius: var(--radius-card-comfy); }
  .sf-pagination a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); }
  @media(max-width:600px) {
    .sf-filters input:not([type=submit]),.sf-filters select { font-size: 16px; }
    .sf-product-meta,.sf-product h3,.sf-product p,.sf-product>strong { margin-inline: var(--space-5); }
  }
}