/* ═══════════════════════════════════════════════════════════════════
   The shop's cards, as the editors' previews draw them.

   .sw-card  — a product or a course, as its editor's preview draws it
               (sellwares-product-journey.css, .pj-pv-*): the picture, the
               name, the line under it, the price, the button and the
               sentence under the button, in the colours of the template and
               accent picked for that product. The custom properties come
               from the card itself (storefront/partials/preview-card).
   .cc-card  — a product inside a collection, as the collection editor's
               preview draws it (sellwares-dashboard.css, .cp-*): the picture
               or the kind's own tint, the kind, the name and the price.

   Loaded by the partials that draw them, so any page that shows a card
   brings the card's look with it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── a product, as its preview ── */
.sw-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sw-card{display:block;box-sizing:border-box;text-decoration:none;text-align:center;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--pbg,#fff);color:var(--ptx,#1A1A1A);
  border-radius:10px;box-shadow:0 2px 14px rgba(16,32,28,.1);padding:22px 20px;
  transition:transform .2s ease,box-shadow .2s ease}
.sw-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(16,32,28,.45)}
.sw-card-img{position:relative;display:block;height:150px;border-radius:var(--pr,8px);overflow:hidden;margin-bottom:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 22%,transparent),color-mix(in srgb,var(--pc) 8%,transparent))}
/* The whole picture over a blurred copy of itself — never the middle of it. */
.sw-card .sw-card-img img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;
  max-width:none;margin:0;border-radius:0;object-fit:contain}
.sw-card .sw-card-img .sw-card-back{z-index:0;object-fit:cover;filter:blur(16px) saturate(1.2);transform:scale(1.15)}
.sw-card .sw-card-name{margin:0 0 5px;font-family:inherit;font-size:17px;font-weight:800;letter-spacing:-.02em;
  line-height:1.3;color:inherit}
.sw-card-sub{display:block;font-size:12.5px;opacity:.72;line-height:1.5}
.sw-card-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 13px;padding-top:13px}
.sw-card-price .now{font-size:24px;font-weight:800;letter-spacing:-.03em}
.sw-card-price .was{font-size:14px;opacity:.45;text-decoration:line-through}
.sw-card-price .off{font-size:10.5px;font-weight:700;background:var(--pc);color:var(--pink,#fff);padding:2px 7px;border-radius:20px}
.sw-card-access{display:block;font-size:10.5px;opacity:.55;margin:-6px 0 11px}
.sw-card-opts{display:grid;gap:6px;margin:0 0 11px;text-align:left}
.sw-card-opt{display:flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--ptx,#1A1A1A) 14%,transparent);
  border-radius:var(--pr,8px);padding:8px 10px;font-size:11.5px}
.sw-card-opt i{width:12px;height:12px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ptx,#1A1A1A) 35%,transparent);flex:0 0 auto}
.sw-card-opt.on{border-color:var(--pc)}
.sw-card-opt.on i{border:4px solid var(--pc)}
.sw-card-opt span{margin-left:auto;opacity:.65}
.sw-card-stock{display:block;font-size:10.5px;font-weight:700;color:#B4541A;margin-bottom:9px}
.sw-card-cta{display:block;width:100%;box-sizing:border-box;background:var(--pc);color:var(--pink,#fff);
  border-radius:var(--pr,8px);padding:11px;font-size:13.5px;font-weight:700;text-align:center;margin-top:4px}
.sw-card-trust{display:block;font-size:10.5px;opacity:.55;text-align:center;margin-top:9px}
.sw-card-inc{display:grid;gap:3px;margin:10px 0 0;text-align:left;font-size:11.5px}
.sw-card-inc b{font-size:12px}
.sw-card-inc span{opacity:.75}

/* ── the shelf: every card the same size, six at a time, by kind ──
   Every row as tall as the tallest card, every card filling its cell, and
   inside each card the price, the button and the line under it pushed to the
   foot — so the buttons of a row sit on one line whatever is above them. */
.pb-grid.sw-grid{align-items:stretch;grid-auto-rows:1fr}
.sw-cell{display:flex;min-width:0}
.sw-cell[hidden]{display:none}
.sw-cell>.sw-card{flex:1 1 auto;width:100%}
.sw-card{display:flex;flex-direction:column}
.sw-card .sw-card-name,.sw-card-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.sw-card-price{margin-top:auto;padding-top:13px}
/* A bundle's list under its words rather than under its button, so the
   buttons of a row stay on one line. */
.sw-card>*{order:2}
.sw-card .sw-card-img,.sw-card .sw-card-name,.sw-card-sub{order:0}
.sw-card .sw-card-inc{order:1}
.sw-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin:0 0 18px}
.sw-filter button{font:inherit;font-size:13px;font-weight:600;line-height:1.2;padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--pb-ink,#14201C) 14%,transparent);background:var(--pb-card,#fff);color:var(--pb-ink,#14201C)}
.sw-filter button span{margin-left:4px;opacity:.55;font-variant-numeric:tabular-nums}
.sw-filter button:hover{border-color:var(--pb-accent,#0E7C5A)}
.sw-filter button.on{background:var(--pb-accent,#0E7C5A);border-color:var(--pb-accent,#0E7C5A);color:var(--pb-accent-ink,#fff)}
.sw-more-row{display:flex;justify-content:center;width:100%;margin-top:24px}
.sw-more-row[hidden]{display:none}
.sw-more{font:inherit;font-size:14px;font-weight:700;padding:11px 28px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--pb-accent,#0E7C5A);background:transparent;color:var(--pb-accent,#0E7C5A)}
.sw-more:hover{background:var(--pb-accent,#0E7C5A);color:var(--pb-accent-ink,#fff)}

/* ── a product inside a collection, as the collection's preview ── */
/* The full width of whatever holds it: a built page's section centres its
   children, and a grid that shrinks to its content is one narrow card. */
.cc-grid,.sw-cards{width:100%;align-self:stretch;box-sizing:border-box}
.cc-grid{display:grid;gap:16px;text-align:left}
.cc-card{display:block;border:1px solid #E1EAE7;border-radius:16px;overflow:hidden;background:#fff;
  color:#14201C;text-decoration:none;transition:transform .2s,box-shadow .2s}
.cc-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.45)}
.cc-shot{position:relative;display:grid;place-items:center;height:112px;overflow:hidden;font-size:30px}
.cc-card .cc-shot img{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain}
.cc-card .cc-shot .cc-back{z-index:0;object-fit:cover;filter:blur(16px) saturate(1.2);transform:scale(1.15)}
.cc-card-b{display:block;padding:15px}
.cc-kind{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.cc-card-b b{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px}
.cc-price{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:800}
.cc-sold{display:block;margin-top:6px;font-size:12px;color:#6B7D77}

/* The four layouts the collection editor offers. */
.cc-lay-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-lay-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cc-lay-list{grid-template-columns:minmax(0,1fr)}
/* A list lays each card out sideways: a small picture, the name, the price. */
.cc-lay-list .cc-card{display:flex;align-items:center;gap:16px;padding:14px}
.cc-lay-list .cc-shot{width:64px;height:64px;border-radius:12px;flex:none;font-size:22px}
.cc-lay-list .cc-card-b{flex:1;min-width:0;padding:0}
/* The first one across the whole row, the rest in pairs under it. */
.cc-lay-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
.cc-lay-featured>:first-child{grid-column:1/-1}
.cc-lay-featured>:first-child .cc-shot{height:156px}

@media (max-width:760px){
  /* Two across is right on a phone and three is three slivers. */
  .cc-lay-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-lay-featured>:first-child{grid-column:auto}
}