/* DirectStock category showcase v2026.10.18b
 * Standalone CSS for HosterPK installs: no npm, Vite or Tailwind rebuild necessary.
 */
.ds-category-section,
.ds-category-directory {
    --dsc-ink: #102f46;
    --dsc-green: #008f76;
    --dsc-soft-green: #eafbf4;
    --dsc-border: #e0e9ec;
    color: var(--dsc-ink);
}
.ds-category-section { padding: clamp(38px,5vw,64px) 0; background: linear-gradient(180deg,#fff 0%,#f7fafb 100%); border-block: 1px solid #edf1f2; }
.ds-category-section *, .ds-category-directory * { box-sizing: border-box; }
.ds-category-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:23px; }
.ds-category-eyebrow { display:block; color:#008f76; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; margin-bottom:8px; }
.ds-category-heading { margin:0; color:#0f2e48; font-size:clamp(22px,2.6vw,32px); font-weight:800; line-height:1.2; letter-spacing:-.025em; }
.ds-category-subheading { color:#61758a; font-size:13px; margin:8px 0 0; line-height:1.65; }
.ds-category-view-all { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:7px; text-decoration:none; font-size:12px; font-weight:800; color:#008f76; border:1px solid #d0e9e2; background:#f3fbf8; border-radius:999px; padding:10px 15px; transition:background .2s,border-color .2s; }
.ds-category-view-all:hover { background:#dcf7ed; border-color:#5bc5a5; }
.ds-category-view-all svg { width:15px; height:15px; }

/* Aspect ratio of artwork: 220 x 150, optimized stored asset: 640 x 440. */
.ds-category-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ds-category-mini { display:flex; flex-direction:column; min-width:0; min-height:160px; text-align:center; text-decoration:none; color:inherit; overflow:hidden; background:#fff; border:1px solid var(--dsc-border); border-radius:14px; box-shadow:0 4px 18px rgba(18,45,62,.035); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.ds-category-mini:hover { transform:translateY(-3px); border-color:#9bd9c8; box-shadow:0 12px 24px rgba(17,76,68,.11); }
.ds-category-mini__media { aspect-ratio:220 / 150; width:100%; flex:0 0 auto; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(140deg,#f6faf8,#ecf8f7); }
.ds-category-mini__media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ds-category-mini:hover .ds-category-mini__media img { transform:scale(1.055); }
.ds-category-mini__media--logo img { object-fit:contain; padding:12px; background:#fff; }
.ds-category-mini__icon { display:grid; place-items:center; width:52px; height:52px; border:1px solid #bfebdc; background:#e2fbf2; border-radius:15px; color:#008f76; }
.ds-category-mini__icon svg { height:27px; width:27px; }
.ds-category-mini__label { flex:1; display:flex; align-items:center; justify-content:center; min-height:50px; padding:9px 7px 11px; color:var(--dsc-ink); font-size:clamp(10px, .93vw, 12px); font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
.ds-category-mini:focus-visible,.ds-category-banner:focus-visible,.ds-category-directory-card a:focus-visible,.ds-category-view-all:focus-visible { outline:3px solid #10b98f; outline-offset:3px; }

.ds-category-feature-head { display:flex; align-items:end; justify-content:space-between; margin:clamp(32px,4vw,46px) 0 17px; }
.ds-category-feature-heading { margin:0; color:#0e2d47; font-size:clamp(18px,2vw,24px); font-weight:800; letter-spacing:-.02em; }
.ds-category-banner-grid { display:grid; grid-template-columns:minmax(0,1.52fr) minmax(0,1fr); gap:16px; }
.ds-category-banner { isolation:isolate; position:relative; min-height:246px; display:flex; align-items:center; overflow:hidden; border-radius:18px; padding:clamp(19px,2.3vw,32px); text-decoration:none; box-shadow:0 8px 28px rgba(21,55,62,.045); border:1px solid rgba(18,87,73,.06); transition:box-shadow .2s ease,transform .2s ease; }
.ds-category-banner:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(21,55,62,.12); }
.ds-category-banner--mint { background:linear-gradient(115deg,#c8fae3 0%,#e9fcf1 56%,#c7f5e8 100%); }
.ds-category-banner--sand { background:linear-gradient(115deg,#ffefdc 0%,#fcf7f0 52%,#ffe5d2 100%); }
.ds-category-banner::before { content:""; position:absolute; inset:auto auto -50px -110px; height:240px; width:240px; border:18px solid rgba(0,175,135,.13); border-radius:50%; z-index:-1; }
.ds-category-banner--sand::before { border-color:rgba(174,99,37,.12); }
.ds-category-banner__content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:58%; min-width:0; }
.ds-category-banner__eyebrow { font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:#00806c; font-size:10px; }
.ds-category-banner--sand .ds-category-banner__eyebrow { color:#a36532; }
.ds-category-banner__title { color:#085646; font-size:clamp(21px,2.7vw,37px); line-height:1.04; letter-spacing:-.038em; font-weight:900; overflow-wrap:anywhere; }
.ds-category-banner--sand .ds-category-banner__title { color:#6d3f21; font-size:clamp(20px,2.1vw,29px); }
.ds-category-banner__text { color:#2d5b56; font-size:12px; line-height:1.5; max-width:335px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.ds-category-banner--sand .ds-category-banner__text { color:#7e604c; }
.ds-category-banner__cta { display:inline-flex; align-items:center; gap:8px; margin-top:5px; background:#008f76; color:#fff; font-size:11px; font-weight:800; padding:11px 14px; border-radius:10px; white-space:nowrap; }
.ds-category-banner--sand .ds-category-banner__cta { background:#8e4b2b; }
.ds-category-banner__cta svg { width:14px; height:14px; }
.ds-category-banner__visual { position:absolute; z-index:1; width:49%; height:100%; top:0; right:0; display:grid; place-items:center; overflow:hidden; }
.ds-category-banner__visual::before { content:""; position:absolute; inset:14% 4% 4%; background:rgba(255,255,255,.2); border-radius:50%; filter:blur(18px); }
.ds-category-banner__visual img { position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:center center; mix-blend-mode:multiply; mask-image:linear-gradient(90deg,transparent 0%,black 16%); transition:transform .4s ease; }
.ds-category-banner:hover .ds-category-banner__visual img { transform:scale(1.05); }
.ds-category-banner__visual--logo img { object-fit:contain; padding:26px 12px; mix-blend-mode:normal; mask-image:none; }
.ds-category-banner__visual>svg { width:96px; height:96px; color:#00997c; }
.ds-category-mobile-all { display:none; }
.ds-category-empty { padding:30px; background:#f4faf8; border:1px dashed #bddfda; border-radius:16px; color:#55716c; font-size:13px; }
.ds-category-empty a { color:#008f76; text-decoration:underline; }

/* Category directory polish v2: full-bleed photography, uniformly aligned content,
 * accessible CTAs and responsive dimensions.  All rules are scoped to DirectStock. */
.ds-category-directory { padding:clamp(30px,4vw,56px) 0 clamp(48px,5vw,70px); background:linear-gradient(180deg,#f7fafc 0%,#f2f7f7 100%); }
.ds-category-directory__intro { margin-bottom:27px; }
.ds-category-directory-grid { display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:20px; }
.ds-category-directory-card {
    display:flex; flex-direction:column; min-width:0; height:100%;
    padding:12px; border:1px solid #dee9e8; border-radius:20px;
    background:#fff; box-shadow:0 5px 22px rgba(16,54,77,.045);
    transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.ds-category-directory-card:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(16,54,77,.1); border-color:#9cdecd; }
.ds-category-directory-card__media {
    position:relative; flex-shrink:0; display:grid; place-items:center;
    width:100%; height:220px; overflow:hidden; border-radius:13px;
    background:linear-gradient(145deg,#f7fcfa,#eaf6f2);
}
.ds-category-directory-card__media img {
    display:block; width:100%; height:100%; object-fit:cover; object-position:center 60%;
    transform:scale(1.04); transition:transform .4s ease;
}
.ds-category-directory-card:hover .ds-category-directory-card__media img { transform:scale(1.095); }
/* Only explicitly identified logos should use contain. Uploaded category *photos* use cover. */
.ds-category-directory-card__media--logo img { object-fit:contain; object-position:center; padding:18px; transform:none; }
.ds-category-directory-card:hover .ds-category-directory-card__media--logo img { transform:scale(1.04); }
.ds-category-directory-card__icon { display:grid; place-items:center; width:76px; height:76px; border-radius:22px; background:#e8fbf2; color:#008f76; }
.ds-category-directory-card__icon svg { width:36px; height:36px; }
.ds-category-directory-card__body {
    display:flex; flex:1; flex-direction:column; align-items:stretch; gap:9px;
    min-width:0; padding:17px 8px 5px;
}
.ds-category-directory-card__title {
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden; min-height:2.55em;
    color:#10334c; font-weight:800; font-size:18px; line-height:1.28;
    text-decoration:none; letter-spacing:-.015em;
}
.ds-category-directory-card__title:hover { color:#008f76; }
.ds-category-directory-card__count { display:block; color:#638098; font-size:12px; font-weight:700; }
.ds-category-directory-card__description {
    margin:4px 0 0; color:#536b7d; font-size:12px; line-height:1.6;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
    min-height:3.2em;
}
.ds-category-directory-card__tags { display:flex; flex-wrap:wrap; align-content:flex-start; gap:6px; padding:3px 0 12px; }
.ds-category-directory-card__tags a {
    display:inline-flex; align-items:center; max-width:100%;
    border:1px solid #d7ece7; background:#e6f6f1; color:#1f6470;
    border-radius:9px; font-size:11px; line-height:1.3; font-weight:600;
    padding:6px 9px; text-decoration:none;
    transition:background .2s,border-color .2s,color .2s;
}
.ds-category-directory-card__tags a:hover { color:#006e5d; background:#d5f2e7; border-color:#9cdcc7; }
.ds-category-directory-card__footer { display:flex; margin-top:auto; padding-top:9px; }
.ds-category-directory-card__browse {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    min-height:44px; width:100%; padding:12px 10px;
    border:1px solid #008f76; border-radius:11px;
    background:#008f76; color:#fff !important; font-size:12px; font-weight:800;
    line-height:1.35; text-align:center; text-decoration:none;
    transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ds-category-directory-card__browse:hover { background:#007b66; box-shadow:0 8px 16px rgba(0,143,118,.16); }
.ds-category-directory-card__browse svg { width:16px; height:16px; flex-shrink:0; }
.ds-category-directory-card a:focus-visible { outline:3px solid #0fb789; outline-offset:3px; }

@media (min-width:520px) { .ds-category-mini-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:740px) { .ds-category-mini-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:940px) { .ds-category-mini-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (min-width:1120px) { .ds-category-mini-grid { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media (min-width:1380px) { .ds-category-mini-grid { grid-template-columns:repeat(10,minmax(0,1fr)); } }
@media (max-width:759px) {
  .ds-category-header { align-items:flex-start; }
  .ds-category-view-all { display:none; }
  .ds-category-banner-grid { grid-template-columns:1fr; }
  .ds-category-banner { min-height:218px; }
  .ds-category-mobile-all { margin-top:19px; display:inline-flex; align-items:center; gap:8px; color:#008f76; font-weight:800; font-size:13px; text-decoration:none; }
  .ds-category-mobile-all svg { height:16px; width:16px; }
}
@media (max-width:420px) {
  .ds-category-section { padding:34px 0 43px; }
  .ds-category-mini-grid { gap:9px; }
  .ds-category-mini { border-radius:12px; min-height:145px; }
  .ds-category-mini__label { min-height:53px; padding-inline:5px; font-size:11px; }
  .ds-category-feature-heading { font-size:20px; }
  .ds-category-banner { min-height:230px; padding:20px; }
  .ds-category-banner__content { width:61%; }
  .ds-category-banner__text { font-size:11px; }
  .ds-category-banner__title { font-size:23px; }
  .ds-category-banner__visual { width:50%; }
}

/* One detailed card per mobile row, two on tablets, three on desktop. */
@media (min-width:650px) { .ds-category-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ds-category-directory-card__media { height:200px; } }
@media (min-width:1060px) { .ds-category-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .ds-category-directory-card__media { height:220px; } }
@media (max-width:649px) { .ds-category-directory-grid { gap:15px; } .ds-category-directory-card__media { height:180px; } .ds-category-directory-card__title { font-size:17px; min-height:auto; } .ds-category-directory-card__body { padding:15px 6px 4px; } .ds-category-directory-card__description { min-height:0; } }
/* Home image thumbnails: avoid treating every uploaded photo as a padded icon. */
.ds-category-mini__media--logo img { object-fit:cover; object-position:center 60%; padding:0; background:transparent; }
.ds-category-banner__visual--logo img { object-fit:cover; object-position:center 60%; padding:0; mix-blend-mode:multiply; mask-image:linear-gradient(90deg,transparent 0%,black 16%); }

@media (prefers-reduced-motion:reduce) { .ds-category-mini, .ds-category-mini img, .ds-category-banner, .ds-category-banner img, .ds-category-directory-card, .ds-category-directory-card img { transition:none !important; transform:none !important; } }