/* Load AFTER Bootstrap and your shared styles.css. Scoped to #dd-home. */

#dd-home {
    --ink:#242a24;
    --green:#416e50;
    --deep:#2f5a3d;
    --muted:#697168;
    --line:#d8ddd5;
    background:#fdfcf8;
    color:var(--ink);
    font:15px/1.65 'Noto Sans',sans-serif;
    width:100%;
    color-scheme:light}

#dd-home * {
    box-sizing:border-box}

#dd-home a {
    color:inherit;
    text-decoration:none}

#dd-home h1,#dd-home h2,#dd-home h3 {
    font-family:'Noto Serif',Georgia,serif;
    font-weight:400;
    color:var(--ink);
    margin:0}

#dd-home h1 {
    font-size:clamp(34px,4.5vw,58px);
    line-height:1.17;
    letter-spacing:-1.8px}

#dd-home h2 {
    font-size:clamp(27px,3vw,36px);
    line-height:1.25;
    letter-spacing:-.7px}

#dd-home h3 {
    font-size:20px;
    line-height:1.4}

#dd-home p {
    margin:16px 0;
    color:var(--muted)}

#dd-home button {
    font:inherit;
    color:inherit;
    cursor:pointer}

#dd-home .hm-wrap {
    max-width:1320px;
    margin:auto;
    padding:0 36px}

#dd-home .hm-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding-top:25px;
    padding-bottom:25px;
    border-bottom:1px solid var(--line)}

#dd-home .hm-brand {
    display:flex;
    gap:10px;
    align-items:center;
    white-space:nowrap;
    font:21px/1.3 'Noto Serif',serif}

#dd-home .hm-brand img {
    width:44px;
    height:48px}

#dd-home .hm-brand small {
    display:block;
    font:8px/1.6 'Noto Sans',sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:var(--muted)}

#dd-home .hm-nav {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.3px}

#dd-home .hm-nav a:hover,#dd-home footer a:hover {
    text-decoration:underline}

#dd-home .hm-icons {
    display:flex;
    gap:4px}

#dd-home .hm-icons a,#dd-home .hm-icons button {
    padding:10px;
    background:none;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    min-height:44px}

#dd-home .hm-menu {
    display:none!important}

#dd-home .hm-mobile {
    padding:18px 24px;
    background:#edf3ed}

#dd-home .hm-mobile a {
    display:block;
    padding:9px 0}

#dd-home .hm-shipping {
    background:#eaf0e8;
    color:#36573e;
    text-align:center;
    padding:9px 14px;
    font-size:12px}

#dd-home .hm-hero {
    min-width:0;
    display:grid;
    grid-template-columns: .92fr 1.08fr;
    align-items:center;
    gap:38px;
    padding-top:36px;
    padding-bottom:36px}

#dd-home .hm-kicker {
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:2px;
    color:var(--deep);
    margin:0 0 18px;
    font-weight:600}

#dd-home .hm-hero p {
    max-width:420px;
    font-size:16px;
    margin:22px 0}

#dd-home .hm-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:27px}

#dd-home .hm-button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:12px 22px;
    border-radius:5px;
    background:var(--green);
    color:#fff;
    font-size:13px;
    border:1px solid var(--green)}

#dd-home .hm-button:hover {
    background:var(--deep)}

#dd-home .hm-button.secondary {
    color:var(--deep);
    background:transparent;
    border-color:#bac8b8}

#dd-home .hm-hero-image {
    position:relative;
    margin:0}

#dd-home .hm-hero-image img {
    width:100%;
    aspect-ratio:1.12;
    object-fit:cover;
    border-radius:9px;
    display:block}

#dd-home .hm-hero-image figcaption {
    position:absolute;
    bottom:16px;
    left:16px;
    right:16px;
    background:#fdfcf8ed;
    padding:12px 17px;
    border-radius:4px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px}

#dd-home .hm-hero-image figcaption strong {
    font-family:'Noto Serif',serif;
    font-size:16px;
    font-weight:400}

#dd-home .hm-trust {
    display:flex;
    gap:24px;
    justify-content:center;
    flex-wrap:wrap;
    padding:18px 22px;
    background:#f0f4ed;
    border-top:1px solid #e1e7dc;
    border-bottom:1px solid #e1e7dc;
    color:var(--deep);
    font-size:12px}

#dd-home .hm-section {
    padding-top:58px;
    padding-bottom:58px}

#dd-home .hm-section-top {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:end;
    margin-bottom:27px}

#dd-home .hm-section-top p {
    margin:12px 0 0}

#dd-home .hm-textlink {
    font-size:13px;
    color:var(--deep);
    text-decoration:underline;
    text-underline-offset:5px;
    white-space:nowrap}

#dd-home .hm-categories {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px 22px}

#dd-home .hm-category picture {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf1e9;
    border:1px solid #e1e6dc;
    border-radius:7px;
    aspect-ratio:1.3;
    padding:19px;
    overflow:hidden}

#dd-home .hm-category img {
    max-width:100%;
    max-height:100%;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .2s;
    filter:drop-shadow(0 8px 7px #263b2522)}

#dd-home .hm-category:hover img {
    transform:scale(1.035)}

#dd-home .hm-category .hm-cat-label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:13px;
    font-family:'Noto Serif',serif;
    font-size:19px}

#dd-home .hm-category small {
    color:var(--muted);
    font-size:12px}

#dd-home .hm-collection {
    min-width:0;
    background:#edf3ed;
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:40px;
    padding:36px;
    border-radius:8px;
    align-items:center}

#dd-home .hm-suite {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:center}

#dd-home .hm-suite picture {
    background:#fdfcf8;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    aspect-ratio:1}

#dd-home .hm-suite picture:first-child {
    grid-row:span 2;
    aspect-ratio:auto;
    height:100%}

#dd-home .hm-suite img {
    width:100%;
    height:100%;
    object-fit:contain;
    max-height:350px;
    filter:drop-shadow(0 6px 5px #263b2522)}

#dd-home .hm-steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    margin-top:35px}

#dd-home .hm-step {
    border-top:1px solid var(--line);
    padding-top:22px}

#dd-home .hm-step .hm-number {
    color:#76927a;
    font:italic 28px 'Noto Serif',serif;
    display:block;
    margin-bottom:16px}

#dd-home .hm-step p {
    font-size:14px}

#dd-home .hm-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding-bottom:58px}

#dd-home .hm-panel {
    padding:30px;
    background:#f4f1e9;
    border-radius:6px}

#dd-home .hm-panel:last-child {
    background:#edf3ed}

#dd-home .hm-panel p {
    font-size:14px}

#dd-home .hm-swatches {
    display:flex;
    gap:8px;
    margin:19px 0}

#dd-home .hm-swatches span {
    width:34px;
    height:34px;
    border:1px solid #d1cec3;
    border-radius:50%;
    background:var(--paper)}

#dd-home footer {
    background:#edf2ea;
    border-top:1px solid #d7dfd3;
    padding:35px 0 22px;
    font-size:12px}

#dd-home .hm-footer-cols {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px}

#dd-home footer h3 {
    font:600 12px/1.6 'Noto Sans',sans-serif;
    text-transform:uppercase;
    margin-bottom:12px}

#dd-home footer ul {
    list-style:none;
    padding:0;
    margin:0}

#dd-home footer li {
    margin:6px 0}

#dd-home .hm-footer-bottom {
    border-top:1px solid var(--line);
    margin-top:25px;
    padding-top:20px;
    display:flex;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    color:var(--muted)}

#dd-home [hidden] {
    display:none!important}


@media(min-width:1200px) {
    #dd-home .hm-categories {
    grid-template-columns:repeat(6,1fr)}

#dd-home .hm-category picture {
    aspect-ratio:.9;
    padding:12px}

#dd-home .hm-category .hm-cat-label {
    font-size:16px}

}


@media(max-width:1100px) {
    #dd-home .hm-nav {
    display:none}

#dd-home .hm-menu {
    display:flex!important}

}


@media(max-width:650px) {
    #dd-home .hm-wrap {
    padding-left:20px;
    padding-right:20px}

#dd-home .hm-head {
    padding-top:15px;
    padding-bottom:15px;
    gap:8px}

#dd-home .hm-brand {
    font-size:16px;
    white-space:normal}

#dd-home .hm-brand img {
    width:31px;
    height:37px}

#dd-home .hm-brand small {
    display:none}

#dd-home .hm-desktop-icon {
    display:none!important}

#dd-home .hm-icons {
    gap:0}

#dd-home .hm-icons a,#dd-home .hm-icons button {
    min-width:34px;
    padding:7px}

#dd-home .hm-hero {
    min-width:0;
    grid-template-columns:1fr;
    gap:24px;
    padding-top:28px;
    padding-bottom:28px}

#dd-home h1 {
    font-size:37px;
    letter-spacing:-1px}

#dd-home .hm-hero p {
    font-size:15px;
    margin:15px 0}

#dd-home .hm-hero-image img {
    aspect-ratio:1.25}

#dd-home .hm-actions {
    margin-top:20px;
    gap:9px}

#dd-home .hm-button {
    padding:11px 15px}

#dd-home .hm-trust {
    gap:8px 18px;
    font-size:11px}

#dd-home .hm-section {
    padding-top:38px;
    padding-bottom:38px}

#dd-home .hm-section-top {
    align-items:start;
    flex-direction:column;
    gap:13px}

#dd-home .hm-categories {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:23px 14px}

#dd-home .hm-category picture {
    aspect-ratio:1;
    padding:10px}

#dd-home .hm-category .hm-cat-label {
    font-size:16px;
    gap:5px}

#dd-home .hm-category small {
    font-size:11px}

#dd-home .hm-collection {
    min-width:0;
    grid-template-columns:1fr;
    padding:22px;
    gap:27px}

#dd-home .hm-steps {
    grid-template-columns:1fr;
    gap:15px;
    margin-top:25px}

#dd-home .hm-step {
    padding-top:16px}

#dd-home .hm-step .hm-number {
    float:left;
    margin:0 17px 45px 0}

#dd-home .hm-step p {
    margin:10px 0}

#dd-home .hm-bottom {
    grid-template-columns:1fr;
    padding-bottom:38px}

#dd-home .hm-footer-cols {
    grid-template-columns:1fr 1fr;
    gap:25px}

#dd-home .hm-footer-cols>div:last-child {
    grid-column:1/-1}

#dd-home .hm-footer-bottom {
    font-size:11px}

}


/* Hero carousel: fixed image area, captions and controls never overlap the photo. */
#dd-home .hm-hero > *,
#dd-home .hm-collection > * { min-width: 0; }
#dd-home .hm-hero-gallery { min-width: 0; }
#dd-home #homeHeroCarousel {
    --f-carousel-slide-width: 100%;
    --f-carousel-gap: 0px;
    border-radius: 9px;
    overflow: hidden;
    background: #edf3ed;
    margin: 0;
}
#dd-home #homeHeroCarousel .f-carousel__viewport { overflow: hidden; }
#dd-home #homeHeroCarousel .f-carousel__slide { padding: 0; width: 100%; }
/* The first photo remains visible even if the carousel script is unavailable. */
#dd-home #homeHeroCarousel:not(.hm-carousel-ready) .f-carousel__slide ~ .f-carousel__slide { display: none; }
#dd-home .hm-hero-slide-link { display: block; }
#dd-home .hm-hero-slide-link picture { display: block; aspect-ratio: 1.12; }
#dd-home .hm-hero-slide-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#dd-home .hm-hero-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 86px;
    padding: 15px 20px;
    background: #f0f4ed;
    font-size: .8125rem;
}
#dd-home .hm-hero-caption strong {
    display: block;
    margin-bottom: 4px;
    font: 400 1rem/1.4 'Noto Serif', Georgia, serif;
}
#dd-home .hm-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
}
#dd-home .hm-carousel-controls button {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #2f5a3d;
    padding: 8px 10px;
    font-size: .8125rem;
}
#dd-home .hm-carousel-controls button:hover { background: #edf3ed; }
#dd-home .hm-carousel-navigation { display: flex; align-items: center; gap: 5px; }
#dd-home .hm-carousel-navigation button { min-width: 44px; font-size: 1.125rem; }
#dd-home [data-hero-counter] { font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 40px; text-align: center; }
#dd-home a:focus-visible,
#dd-home button:focus-visible { outline: 3px solid #76927a; outline-offset: 4px; }

/* Labeled paper swatches are links, not form selections. */
#dd-home .hm-paper-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 8px;
    margin: 24px 0 20px;
}
#dd-home .hm-paper-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 5px;
    text-align: center;
    font-size: .75rem;
    border-radius: 5px;
}
#dd-home .hm-paper-color {
    display: block;
    width: 42px;
    height: 42px;
    border: 1px solid #cbcfc4;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: inset 0 0 0 3px #ffffff80;
}
#dd-home .hm-paper-option:hover .hm-paper-color { outline: 2px solid #76927a; outline-offset: 3px; }
#dd-home .hm-paper-gallery-link { display: block; margin: 8px 0 18px; }
#dd-home .hm-panel .hm-textlink { white-space: normal; display: inline-block; min-height: 44px; padding-top: 9px; }

/* Fancybox is appended outside #dd-home. Use a unique class to isolate this gallery. */
.dd-home-paper-gallery {
    --fancybox-backdrop-bg: #18251e;
    --fancybox-backdrop-opacity: .97;
    --f-button-color: #fff;
    --f-button-hover-bg: #36573e;
}
.dd-home-paper-gallery .f-caption { color: #fff; text-align: center; }
.dd-home-paper-caption { max-width: 640px; margin: 0 auto; line-height: 1.5; }
.dd-home-paper-caption strong { display: block; margin-bottom: .3rem; font: 400 1.5rem/1.4 'Noto Serif', Georgia, serif; }
.dd-home-paper-caption p { margin: 0; font-size: .875rem; }
.dd-home-paper-caption small { display: block; margin-top: .5rem; color: #d2ddd3; font-size: .75rem; }
@media (max-width: 650px) {
    #dd-home .hm-hero-slide-link picture { aspect-ratio: 1.25; }
    #dd-home .hm-hero-caption { min-height: 94px; padding: 14px 16px; }
    #dd-home .hm-section-top .hm-textlink { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    #dd-home .hm-category img { transition: none; }
    #dd-home .hm-category:hover img { transform: none; }
}