/* Load after Bootstrap and /css/skunkworks-openai/styles.css.
   Scoped to this page: the shared header, footer and product page are unaffected. */
#dd-category {
  --dd-ink: #242a24;
  --dd-muted: #697168;
  --dd-plum: #416e50;
  --dd-plum-dark: #2f5a3d;
  --dd-sage-soft: #f0f4ed;
  --dd-line: #d8ddd5;
  color: var(--dd-ink);
  background: #fdfcf8;
  font-family: "Noto Sans", Arial, sans-serif;
}
#dd-category [hidden] { display: none !important; }
#dd-category a { color: var(--dd-plum-dark); }
#dd-category h1, #dd-category h2, #dd-category h3 { font-family: "Noto Serif", Georgia, serif; font-weight: 400; }
#dd-category h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.25; }
#dd-category button, #dd-category a, #dd-category select { touch-action: manipulation; }
#dd-category :is(a, button, input, select):focus-visible { outline: 3px solid #76927a; outline-offset: 3px; }
#dd-category .dd-shipping-banner { padding: .65rem 0; text-align: center; color: #36573e; background: #eaf0e8; border-bottom: 1px solid #d6e1d3; font-size: .8125rem; }
#dd-category .dd-breadcrumb { font-size: .78rem; }
#dd-category .breadcrumb a { text-decoration: none; }
#dd-category .dd-intro-copy { color: var(--dd-muted); font-size: .95rem; }
#dd-category .dd-reassurance { gap: .45rem 1.3rem; color: var(--dd-plum-dark); font-size: .78rem; }
#dd-category .dd-reassurance i { margin-right: .3rem; }
#dd-category .dd-section-label { font-family: "Noto Sans", Arial, sans-serif; font-size: .85rem; font-weight: 600; }
#dd-category .dd-subcategory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
#dd-category .dd-subcategory-grid a { display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 76px; padding: .8rem .4rem; border: 1px solid var(--dd-line); border-radius: .65rem; background: #fff; text-decoration: none; font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
#dd-category .dd-subcategory-grid small { display: block; margin-top: .2rem; color: var(--dd-muted); font-size: .72rem; font-weight: 400; }
#dd-category .dd-subcategory-grid a:hover { background: var(--dd-sage-soft); border-color: #76927a; }
#dd-category .dd-subcategory-grid a[aria-current="page"] { background: var(--dd-plum-dark); color: #fff; border-color: var(--dd-plum-dark); }
#dd-category .dd-subcategory-grid a[aria-current="page"] small { color: #e2ece1; }
#dd-category .dd-subcategory-grid a.is-ancestor { border-color: var(--dd-plum-dark); background: #e7efe5; }
#dd-category .dd-child-categories { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; }
#dd-category .dd-child-categories a { padding: .5rem .8rem; min-height: 40px; border: 1px solid var(--dd-line); border-radius: 2rem; text-decoration: none; }
#dd-category .dd-child-categories a[aria-current="page"] { color: #fff; background: var(--dd-plum-dark); }
#dd-category .dd-catalog-toolbar { padding-block: 1rem; border-block: 1px solid var(--dd-line); }
#dd-category .dd-outline-button { --bs-btn-color: var(--dd-plum-dark); --bs-btn-border-color: var(--dd-plum-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--dd-plum-dark); --bs-btn-hover-border-color: var(--dd-plum-dark); --bs-btn-active-bg: var(--dd-plum-dark); --bs-btn-active-color: #fff; min-height: 44px; font-size: .8rem; }
#dd-category .dd-primary-button { --bs-btn-color: #fff; --bs-btn-bg: var(--dd-plum-dark); --bs-btn-border-color: var(--dd-plum-dark); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #23482f; min-height: 44px; font-size: .8rem; }
#dd-category .dd-filter-toggle .badge { background: #e5eee1; color: #294c33; }
#dd-category .dd-result-summary strong { display: block; font-size: .875rem; font-weight: 600; }
#dd-category .dd-result-summary small { display: block; color: var(--dd-muted); font-size: .72rem; }
#dd-category .dd-sort-control { font-size: .78rem; }
#dd-category .dd-sort-control select { width: auto; min-width: 145px; min-height: 44px; color: var(--dd-ink); border-color: var(--dd-line); }
#dd-category .dd-active-filters button { min-height: 40px; padding: .35rem .75rem; border: 1px solid var(--dd-line); border-radius: 2rem; font-size: .75rem; background: #edf3ed; color: var(--dd-plum-dark); }
#dd-category .dd-active-filters button:hover { background: #e0ebde; }
#dd-category .dd-refine-panel { border: 1px solid var(--dd-line); border-radius: .65rem; padding: 1.15rem; background: #f7f9f3; }
#dd-category .dd-filter-group { border: 0; border-bottom: 1px solid var(--dd-line); margin: 0 0 1rem; padding: 0 0 1rem; }
#dd-category .dd-filter-group legend { float: none; width: auto; margin-bottom: .5rem; font-size: .8rem; font-weight: 600; line-height: 1.5; }
#dd-category .dd-filter-option { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-size: .8rem; }
#dd-category .dd-filter-option .form-check-input { float: none; flex-shrink: 0; width: 1rem; height: 1rem; margin: 0; }
#dd-category .form-check-input:checked { background-color: var(--dd-plum-dark); border-color: var(--dd-plum-dark); }
#dd-category .dd-filter-option small { margin-left: auto; padding-left: .25rem; color: var(--dd-muted); font-size: .75rem; }
#dd-category .dd-filter-option.is-unavailable { opacity: .6; }
#dd-category .dd-icon-button { min-width: 44px; min-height: 44px; color: var(--dd-plum-dark); }
#dd-category .dd-text-button { padding: .4rem 0; min-height: 44px; color: var(--dd-plum-dark); text-decoration: underline; text-underline-offset: 3px; font-size: .8rem; }
#dd-category .dd-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem .85rem; }
#dd-category .dd-product-card { display: flex; flex-direction: column; min-width: 0; }
#dd-category .dd-product-stage { position: relative; aspect-ratio: 1 / 1; border-radius: .65rem; background: var(--dd-sage-soft); }
#dd-category .dd-product-image-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem .65rem .75rem; border-radius: inherit; }
/* A definite box at EVERY level prevents the <picture> sizing regression. */
#dd-category .dd-product-stage picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; }
#dd-category .dd-product-stage picture img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; aspect-ratio: auto; border-radius: 0; margin: 0; transform: none; filter: drop-shadow(0 3px 5px rgba(36,42,36,.19)); }
#dd-category .dd-product-image-link:hover img { transform: none; }
#dd-category .dd-edit-button { position: absolute; top: .2rem; right: 3.25rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem; color: var(--dd-plum-dark); background: #f0f4ede6; border: 0; border-radius: 50%; }
#dd-category .dd-edit-button:hover, #dd-category .dd-save-button[aria-pressed="true"] { background: #dce8d7; color: var(--dd-plum-dark); }
#dd-category .dd-save-button { position: absolute; top: .2rem; right: .2rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: .5rem; color: var(--dd-plum-dark); background: #f0f4ede6; border: 0; border-radius: 50%; }
#dd-category .dd-save-button:hover, #dd-category .dd-save-button[aria-pressed="true"] { background: #dce8d7; color: var(--dd-plum-dark); }
#dd-category .dd-product-name { font-size: .98rem; line-height: 1.45; margin: .8rem 0 .6rem; overflow-wrap: anywhere; }
#dd-category .dd-product-name a { color: var(--dd-ink); text-decoration: none; }
#dd-category .dd-product-name a:hover { color: var(--dd-plum-dark); text-decoration: underline; }
#dd-category .dd-product-actions { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; justify-content: space-between; margin-top: auto; border-top: 1px solid var(--dd-line); }
#dd-category .dd-product-actions a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .75rem; text-decoration: none; }
#dd-category .dd-product-actions a:first-child { font-weight: 600; }
#dd-category .dd-product-actions a:hover { text-decoration: underline; }
#dd-category .dd-empty-state { background: var(--dd-sage-soft); border-radius: .65rem; }
#dd-category .dd-empty-state p, #dd-category .dd-pagination-footer p { color: var(--dd-muted); }
#dd-category .page-link { min-width: 44px; min-height: 44px; text-align: center; color: var(--dd-plum-dark); border: 1px solid var(--dd-line); border-radius: .35rem; background: #fff; }
#dd-category .page-item.active .page-link { color: #fff; background: var(--dd-plum-dark); border-color: var(--dd-plum-dark); }
#dd-category .dd-sample-callout { border-top: 1px solid var(--dd-line); }
#dd-category .dd-sample-callout p { color: var(--dd-muted); font-size: .85rem; }
#dd-category .dd-category-parent {
    margin-bottom: 1rem;
}

#dd-category .dd-category-parent-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    max-width: 100%;
    min-height: 48px;
    padding: .65rem 1rem .65rem .7rem;
    border: 1px solid #d6e1d3;
    border-radius: .75rem;
    background: #f3f6f0;
    color: #36573e;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

#dd-category .dd-category-parent-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #e4ecdf;
}

#dd-category .dd-category-parent-label {
    display: block;
    margin-bottom: .1rem;
    color: #627060;
    font-size: .7rem;
    line-height: 1.3;
}

#dd-category .dd-category-parent-name {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

#dd-category .dd-category-parent-link:hover {
    background: #eaf0e5;
    border-color: #a6b99e;
    color: #294530;
}

#dd-category .dd-category-parent-link:focus-visible {
    outline: 3px solid #8cab91;
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    #dd-category .dd-category-parent-link {
        width: 100%;
    }
}
@media (min-width: 768px) { #dd-category .dd-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; } }
@media (min-width: 992px) {
  #dd-category:not(.dd-refine-open) .dd-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dd-category .dd-refine-panel { border: 0; border-right: 1px solid var(--dd-line); border-radius: 0; background: transparent; padding: 0 1.25rem 0 0; }
}
@media (max-width: 767.98px) {
  #dd-category .dd-subcategory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  #dd-category .dd-subcategory-grid a { min-height: 68px; font-size: .8rem; }
  #dd-category .dd-sort-control select { font-size: 1rem; }
  #dd-category .dd-intro-copy { font-size: .875rem; }
  #dd-category .dd-shipping-banner { font-size: .75rem; }
  #dd-category .dd-sort-control > span { display: none; }
  #dd-category .dd-result-summary { order: -1; width: 100%; }
  #dd-category .dd-sort-control { margin-left: auto; }
  #dd-category .dd-reassurance { font-size: .73rem; }
}
@media (max-width: 575.98px) {
    #dd-category .dd-product-image-link {
        padding: .75rem .5rem .5rem;
    }
}
@media (max-width: 374.98px) {
  #dd-category .dd-product-image-link { padding: .75rem .5rem .5rem; }
  #dd-category .dd-product-name { font-size: .9rem; }
  #dd-category .dd-filter-toggle { padding-inline: .65rem; }
  #dd-category .dd-sort-control select { min-width: 125px; max-width: 140px; }
}

/* Single-row, swipeable category navigation */
#dd-category .dd-category-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .6rem;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: .25rem;

    padding: .3rem .25rem .75rem;

    scrollbar-width: thin;
    scrollbar-color: #b7c7b2 transparent;
}

/* Compact pills */
#dd-category .dd-category-scroll > .dd-category-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .5rem;

    min-height: 44px;
    padding: .6rem 1rem;

    border: 1px solid #d6e1d3;
    border-radius: 999px;
    background: #f3f6f0;
    color: #36573e;

    font-family: "Noto Sans", Arial, sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;

    scroll-snap-align: start;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}

#dd-category .dd-category-scroll > .dd-category-pill:hover {
    background: #e6eedf;
    border-color: #a6b99e;
    color: #294530;
}

/* Selected category */
#dd-category .dd-category-scroll > .dd-category-pill[aria-current="page"] {
    background: #36573e;
    border-color: #36573e;
    color: #fff;
}

/* Optional category counts */
#dd-category .dd-category-pill small {
    margin: 0;
    color: #627060;
    font-size: .7rem;
    font-weight: 400;
}

#dd-category .dd-category-pill small:empty {
    display: none;
}

#dd-category .dd-category-pill[aria-current="page"] small {
    color: #e0eadc;
}

/* Supports adding icons later */
#dd-category .dd-category-pill > i {
    flex-shrink: 0;
    font-size: .95rem;
}

#dd-category .dd-category-pill:focus-visible {
    outline: 3px solid #76927a;
    outline-offset: 2px;
}

#dd-category .dd-category-scroll::-webkit-scrollbar {
    height: 5px;
}

#dd-category .dd-category-scroll::-webkit-scrollbar-thumb {
    background: #b7c7b2;
    border-radius: 999px;
}

#dd-category .dd-category-scroll::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 575.98px) {
    #dd-category .dd-category-scroll {
        gap: .45rem;
    }

    #dd-category .dd-category-scroll > .dd-category-pill {
        padding-inline: .85rem;
        font-size: .78rem;
    }
}
#dd-category .dd-category-slider {
    --dd-strip-bg: #fff;
    position: relative;
    min-width: 0;
    margin-bottom: 1rem;
}

/* Hide the scrollbar while retaining native scrolling. */
#dd-category .dd-category-slider .dd-category-scroll {
    margin: 0;
    padding: .4rem 0;
    scrollbar-width: none;
}

#dd-category .dd-category-slider .dd-category-scroll::-webkit-scrollbar {
    display: none;
}

/* Leave room for arrows so they don't cover the links. */
#dd-category .dd-category-slider.is-overflowing {
    padding-inline: 48px;
}

/* Soft fades at edges with more content. */
#dd-category .dd-category-slider::before,
#dd-category .dd-category-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}

#dd-category .dd-category-slider::before {
    left: 48px;
    background: linear-gradient(
        to right,
        var(--dd-strip-bg),
        transparent
    );
}

#dd-category .dd-category-slider::after {
    right: 48px;
    background: linear-gradient(
        to left,
        var(--dd-strip-bg),
        transparent
    );
}

#dd-category .dd-category-slider.can-scroll-left::before,
#dd-category .dd-category-slider.can-scroll-right::after {
    opacity: 1;
}

/* Circular navigation controls. */
#dd-category .dd-category-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    display: grid;
    place-items: center;
    width: 40px;
    height: 44px;
    padding: 0;

    transform: translateY(-50%);
    border: 1px solid #d6e1d3;
    border-radius: 999px;
    background: #fff;
    color: #36573e;
    box-shadow: 0 2px 7px rgb(36 66 42 / 8%);
    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

#dd-category .dd-category-arrow-prev {
    left: 0;
}

#dd-category .dd-category-arrow-next {
    right: 0;
}

#dd-category .dd-category-arrow:hover:not(:disabled) {
    background: #eaf0e5;
    border-color: #a6b99e;
}

#dd-category .dd-category-arrow:disabled {
    opacity: .3;
    box-shadow: none;
    cursor: default;
}

#dd-category .dd-category-arrow i {
    font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
    #dd-category .dd-category-arrow,
    #dd-category .dd-category-slider::before,
    #dd-category .dd-category-slider::after {
        transition: none;
    }
}