/* Products: the catalog on the home page, the product pages and the product pictures. */

/* catalog: one large product, the rest as a compact list */
.catalog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; }
.cat-lead { grid-column: 1 / span 7; text-decoration: none; display: block; }
.cat-lead .art { aspect-ratio: 5 / 4; }
.cat-lead-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding-top: 20px; }
.cat-name { font: 450 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1.05 var(--display); letter-spacing: -.03em; }
.cat-price { font: 500 clamp(1.3rem, 1.1rem + .6vw, 1.75rem)/1.2 var(--display); white-space: nowrap; }
.cat-desc { grid-column: 1 / -1; color: var(--ink-2); max-width: 56ch; }
.cat-lead-info .link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
.cat-side { grid-column: 9 / -1; }
.cat-side-title { font: 600 13px/1.3 var(--body); color: var(--muted); padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.cat-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0;
           border-bottom: 1px solid var(--line); text-decoration: none; }
.cat-row .art { aspect-ratio: 1; }
.cat-row .art-type { display: none; }
.cat-row-name { display: block; font: 500 18px/1.25 var(--display); letter-spacing: -.015em; }
.cat-row:hover .cat-row-name { text-decoration: underline; text-underline-offset: 4px; }
.cat-row-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.cat-row-price { font-weight: 600; white-space: nowrap; }
.catalog-single .cat-lead { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.catalog-single .cat-lead .art { grid-column: 1 / span 7; }
.catalog-single .cat-lead-info { grid-column: 9 / -1; align-self: end; padding-top: 0; }

/* the product picture: flat paper on a plain block */
.art { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--paper-2);
       color: #101211; container-type: inline-size; border: 1.5px solid var(--ink); }
.p-paper { background: #DCE1D9; }
.p-mint { background: var(--accent); }
.p-ink { background: #101211; color: #F3F4F1; }
@media (prefers-color-scheme: dark) { .p-paper { background: #252A27; color: #EDEFEC; } .p-ink { background: #050605; } }
.art-type { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 4px 8px; border: 1.5px solid currentColor;
            border-radius: var(--r); font: 600 12px/1.2 var(--body); }
.sheet { position: absolute; left: 50%; top: 20%; width: 44%; aspect-ratio: .74; translate: -50% 0; z-index: 1;
         background: #FFFFFF; border: 1.5px solid #101211; border-radius: var(--r); padding: 3.4cqi 3cqi;
         display: flex; flex-direction: column; gap: 1.6cqi; transition: translate .35s var(--ease); }
.sheet span { display: block; }
.sheet-back { left: calc(50% + 3cqi); top: calc(20% - 3cqi); background: #E9ECE6; padding: 0; z-index: 0; }
.sh-top { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 1cqi; }
.sh-mark { width: 3cqi; height: 3cqi; background: var(--accent); border: 1px solid #101211; }
.sh-bar { width: 30%; height: 1cqi; background: #D5DAD2; }
.sh-title { font: 600 3.4cqi/1.08 var(--display); color: #101211; letter-spacing: -.02em; margin-bottom: 1cqi;
            display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-line { height: .9cqi; background: #D5DAD2; }
.sh-line.l1 { width: 92%; } .sh-line.l2 { width: 84%; } .sh-line.l3 { width: 40%; background: var(--accent); }
.sh-line.l4 { width: 88%; } .sh-line.l5 { width: 76%; } .sh-line.l6 { width: 90%; } .sh-line.l7 { width: 58%; }
.sh-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr; gap: .6cqi; }
.sh-head { height: 2.2cqi; background: #101211; }
.sh-cell { height: 2.2cqi; background: #EDF0EA; border: 1px solid #DCE1D9; }
.sh-hot { background: var(--accent); }
.art-lg .sheet { top: 16%; width: 46%; }
.art-lg .sheet-back { top: calc(16% - 3cqi); }
.cat-row .sheet { width: 56%; top: 22%; padding: 5cqi 4cqi; gap: 3cqi; }
.cat-row .sheet-back { top: calc(22% - 5cqi); left: calc(50% + 5cqi); }
.cat-row .sh-title, .cat-row .sh-top { display: none !important; }
.cat-row .sh-line { height: 2cqi; }
.cat-lead:hover .sheet:not(.sheet-back), .cat-row:hover .sheet:not(.sheet-back) { translate: -50% -2cqi; }

/* product page */
.product { padding: 32px 0 var(--section); row-gap: 32px; align-items: start; }
.product-visual { grid-column: 1 / span 7; position: sticky; top: 100px; }
.product-visual .art { aspect-ratio: 4 / 5; }
.product-info { grid-column: 9 / -1; }
.product h1 { font: 400 clamp(2.4rem, 1.3rem + 3vw, 4.25rem)/.98 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.price-big { margin-top: 20px; font: 500 clamp(1.6rem, 1.3rem + 1vw, 2.25rem)/1.1 var(--display); letter-spacing: -.02em; }
.desc { margin: 24px 0 32px; }
.desc p { font-size: 18px; color: var(--ink-2); max-width: 54ch; }
.desc p + p { margin-top: 16px; }
.btn-block { display: flex; width: 100%; min-height: 56px; font-size: 17px; }
.buy-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.buy-note .icon { width: 16px; height: 16px; }
.spec-product { margin-top: 40px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec-product > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.spec-product dt { color: var(--muted); }
.spec-file { display: flex; justify-content: space-between; gap: 16px; }
.spec-file span:first-child { overflow-wrap: anywhere; }
.buybar { display: none; }

@media (max-width: 960px) {
  .cat-lead, .cat-side, .product-visual, .product-info { grid-column: 1 / -1; }
  .catalog-single .cat-lead .art, .catalog-single .cat-lead-info { grid-column: 1 / -1; }
  .catalog-single .cat-lead-info { padding-top: 20px; }
  .product-visual { position: relative; top: auto; }
  .product-visual .art { aspect-ratio: 4 / 3; }
  .buybar { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: fixed; left: 0; right: 0;
            bottom: 0; z-index: 15; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
            background: var(--paper); border-top: 1.5px solid var(--ink); }
  .buybar > div { min-width: 0; }
  .bb-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bb-price { color: var(--muted); font-size: 14px; }
  .buybar .btn { min-height: 46px; flex: none; }
  .has-buybar .site-foot { padding-bottom: 96px; }
}
@media (max-width: 700px) {
  .cat-row { grid-template-columns: 80px minmax(0, 1fr) auto; }
}

/* products grouped by category */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 40px); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--ink);
        border-radius: var(--r); font-size: 15px; font-weight: 500; text-decoration: none; }
.chip span { color: var(--muted); font-weight: 400; }
.chip:hover { background: var(--ink); color: var(--paper); }
.chip:hover span { color: inherit; }
.cat-group { scroll-margin-top: 96px; }
.cat-group + .cat-group { margin-top: clamp(40px, 5vw, 64px); }
.cat-group-title { font: 450 clamp(1.4rem, 1.1rem + .9vw, 2rem)/1.1 var(--display); letter-spacing: -.025em;
                   padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); list-style: none;
            margin: 0; padding: 0; }

/* fixed-price service page */
.service-main { grid-column: 1 / span 7; }
.service-buy { grid-column: 9 / -1; position: sticky; top: 100px; }
.service-buy .price-big { margin-top: 0; margin-bottom: 20px; }
.service .desc { margin-bottom: 8px; }
.svc-h { font: 600 17px/1.4 var(--body); margin: 32px 0 10px; }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink-2); }
.svc-list .icon { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent-deep); }
@media (max-width: 960px) {
  .cat-grid { grid-template-columns: 1fr; }
  .service-main, .service-buy { grid-column: 1 / -1; }
  .service-buy { position: relative; top: auto; }
}

/* watermarked product previews */
.product-previews { display: grid; gap: 12px; margin: 16px 0 0; }
.product-previews img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r); }
.product-previews figcaption { color: var(--muted); font-size: 14px; }