/*
 * Design Library listing pieces: design cards, the "Ready-made designs"
 * section on occasion pages, the /designs home and collection pages.
 * The design page (/designs/{slug}) keeps its own dl-* styles inline.
 */

/* Design cards */
.dlc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.dlc-grid.is-few { grid-template-columns: repeat(auto-fit, minmax(150px, 270px)); }
.dlc-hub .dlc-grid.is-few { justify-content: center; }
.dlc-grid > li { margin: 0; padding: 0; min-width: 0; }
.dlc-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.dlc-card:hover { border-color: #cfe0f3; box-shadow: 0 10px 24px rgba(15, 23, 42, .10); transform: translateY(-2px); text-decoration: none; color: inherit; }
.dlc-card:focus-visible { outline: 2px solid #1776C8; outline-offset: 2px; }
.dlc-card-img { aspect-ratio: 4 / 5; background: #fff; }
.dlc-card-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dlc-card-body { padding: 12px 14px 14px; border-top: 1px solid #f1f5f9; }
.dlc-card-name { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #111827; }
.dlc-card-price { margin: 0; font-size: 14px; color: #4b5563; }
.dlc-card-price strong { color: #0D4F8C; }

/* Collection links */
.dlc-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.dlc-links.is-centred { justify-content: center; }
.dlc-links li { margin: 0; }
.dlc-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #111827; font-size: 14px; line-height: 1.2; text-decoration: none; }
.dlc-link:hover { border-color: #1776C8; color: #0D4F8C; text-decoration: none; }
.dlc-link.is-current { border-color: #1776C8; background: #eaf3fc; color: #0D4F8C; font-weight: 600; }
.dlc-link small { color: #6b7280; font-size: 12px; }

/* Shared headings and notes */
.dlc-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1776C8; }
.dlc-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 28px auto 0; max-width: 720px; font-size: 15px; line-height: 1.5; color: #0D4F8C; text-align: left; }
.dlc-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.dlc-more { margin: 28px 0 0; text-align: center; }
.dlc-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #1776C8; text-decoration: none; }
.dlc-more a:hover { text-decoration: underline; }
.dlc-more svg { width: 18px; height: 18px; }

/* "Ready-made designs" section on an occasion page */
.dlc-hub { padding: 72px 0; background: #fff; }
.dlc-hub .dlc-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.dlc-hub .dlc-title { margin: 0 0 12px; font-size: 36px; font-weight: 700; line-height: 1.2; color: #111827; }
.dlc-hub .dlc-lead { margin: 0; font-size: 17px; line-height: 1.6; color: #4b5563; }

/* /designs and collection pages */
.dlc-crumbs { padding: 14px 0; border-bottom: 1px solid #e5e7eb; background: #fff; font-size: 14px; }
.dlc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dlc-crumbs li { display: flex; align-items: center; gap: 6px; color: #111827; }
.dlc-crumbs li + li::before { content: "/"; color: #9ca3af; }
.dlc-crumbs a { color: #6b7280; text-decoration: none; }
.dlc-crumbs a:hover { color: #1776C8; }
.dlc-hero { padding: 52px 0; background: linear-gradient(135deg, #0D4F8C 0%, #1776C8 60%, #2B90E7 100%); color: #fff; text-align: center; }
.dlc-hero .dlc-kicker, .dlc-intro .dlc-kicker { max-width: none; margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: #1776C8; }
.dlc-hero .dlc-kicker { color: #cfe6fb; }
.dlc-hero h1 { margin: 0 0 12px; font-size: 40px; font-weight: 800; line-height: 1.15; color: #fff; }
.dlc-hero p { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.dlc-intro { padding: 40px 0 8px; background: #fff; }
.dlc-intro h1 { margin: 0 0 12px; font-size: 36px; font-weight: 800; line-height: 1.2; color: #111827; }
.dlc-intro p { max-width: 760px; margin: 0; font-size: 17px; line-height: 1.6; color: #4b5563; }
.dlc-block { padding: 40px 0 56px; background: #fff; }
.dlc-theme { padding: 44px 0; border-bottom: 1px solid #eef2f7; background: #fff; }
.dlc-theme:last-of-type { border-bottom: 0; }
.dlc-theme-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 0 0 16px; }
.dlc-theme-head h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: #111827; }
.dlc-theme-head a { font-weight: 600; color: #1776C8; text-decoration: none; }
.dlc-theme-head a:hover { text-decoration: underline; }
.dlc-empty { padding: 56px 0; text-align: center; color: #4b5563; font-size: 17px; }
.dlc-empty a { color: #1776C8; font-weight: 600; }
.dlc-steps { padding: 56px 0; background: #f8fafc; }
.dlc-steps h2 { margin: 0 0 28px; font-size: 28px; font-weight: 700; text-align: center; color: #111827; }
.dlc-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.dlc-steps li { padding: 24px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.dlc-steps li svg { width: 28px; height: 28px; color: #1776C8; }
.dlc-steps h3 { margin: 12px 0 6px; font-size: 18px; font-weight: 700; color: #111827; }
.dlc-steps p { margin: 0; font-size: 15px; line-height: 1.6; color: #4b5563; }

@media (max-width: 991px) {
    .dlc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 640px) {
    .dlc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dlc-grid.is-few { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dlc-grid.is-one { grid-template-columns: minmax(0, 1fr); max-width: 220px; }
    .dlc-hub .dlc-grid.is-one { margin: 0 auto; }
    .dlc-card-body { padding: 10px 10px 12px; }
    .dlc-card-name { font-size: 15px; }
    .dlc-hub { padding: 44px 0; }
    .dlc-hub .dlc-title { font-size: 26px; }
    .dlc-hub .dlc-lead { font-size: 15px; }
    .dlc-hero { padding: 36px 0; }
    .dlc-hero h1 { font-size: 28px; }
    .dlc-hero p { font-size: 16px; }
    .dlc-intro { padding: 28px 0 4px; }
    .dlc-intro h1 { font-size: 28px; }
    .dlc-intro p { font-size: 16px; }
    .dlc-theme { padding: 32px 0; }
    .dlc-theme-head h2 { font-size: 22px; }
    .dlc-steps ol { grid-template-columns: 1fr; gap: 12px; }
    .dlc-steps li { padding: 18px; }
    .dlc-note { font-size: 14px; }
}

/* The design catalogue (/designs, /designs/{theme}, /designs/{theme}/{collection}),
   inside the product catalogue's layout (css/tshirts/products-v2.css). */
.dlc-cat .products-content-v2 { min-width: 0; }
.dlc-cat .dlc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dlc-cat .dlc-grid.is-few { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-width: none; margin: 0; }
.dlc-cat .dlc-grid.is-one { grid-template-columns: repeat(auto-fill, minmax(200px, 260px)); }
.dlc-cat .sidebar-subcategories-v2 a.is-active { color: #1776C8; font-weight: 600; }
.dlc-cat .products-section-header-v2 h2 { margin-top: 0; }
.dlc-cat .breadcrumb-nav-v2 { flex-wrap: wrap; row-gap: 2px; }
.dlc-cat .breadcrumb-nav-v2 > * { white-space: nowrap; }
.dlc-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.dlc-toolbar h2 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.25; color: #1f2937; }
.dlc-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dlc-count { padding: 6px 12px; border-radius: 999px; background: #eaf3fc; color: #0D4F8C; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dlc-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: #374151; }
.dlc-sort select { height: 38px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 400; color: #111827; cursor: pointer; }
.dlc-sort select:focus-visible { outline: 2px solid #1776C8; outline-offset: 1px; }
.dlc-section-gap { margin-top: 40px; }
.dlc-mnav { display: flex; gap: 8px; margin: 0 0 20px; padding: 0 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dlc-mnav::-webkit-scrollbar { display: none; }
.dlc-mnav .dlc-link { flex: none; white-space: nowrap; }
.dlc-empty-box { padding: 40px 24px; border: 1px dashed #cbd5e1; border-radius: 16px; background: #fff; text-align: center; color: #4b5563; font-size: 17px; }
.dlc-empty-box a { color: #1776C8; font-weight: 600; }
@media (min-width: 1024px) { .dlc-mnav { display: none; } }
@media (max-width: 1023px) { .dlc-cat .dlc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .dlc-cat .dlc-grid, .dlc-cat .dlc-grid.is-few { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .dlc-cat .dlc-grid.is-one { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
    .dlc-toolbar h2 { font-size: 1.25rem; }
    .dlc-cat .products-hero-v2 h1 { font-size: 2rem; }
}