/* * ============================================================ * DAZZLEWOOD BREADCRUMBS — for Normann WooCommerce Theme * File: dazzlewood-breadcrumbs.css * Location: normann-child/dazzlewood-breadcrumbs.css * ============================================================ * * Normann uses a clean, minimal aesthetic with generous white * space. These styles match that aesthetic while applying * Dazzlewood's forest-green palette. * ============================================================ */ /* ── Wrapper nav element ── */ .dw-breadcrumbs { display: none; flex-wrap: wrap; align-items: center; gap: 0; padding: 12px 0 16px; font-size: 12px; letter-spacing: 0.03em; color: #9A9080; line-height: 1.4; /* Normann uses a thin rule under header sections */ border-bottom: 1px solid #EEEBE4; margin-bottom: 28px; } /* When breadcrumb sits inside Normann's product layout wrapper */ .dw-breadcrumbs-wrap { width: 100%; display: none; } /* For the content-prepended version on blog/pages */ .dw-breadcrumbs-content { margin-bottom: 0; } /* ── Each breadcrumb item ── */ .dw-bc-item { display: inline-flex; align-items: center; } /* ── Links ── */ .dw-bc-link { display: inline-flex; align-items: center; gap: 4px; color: #5C7A5C; /* Dazzlewood leaf green */ text-decoration: none; font-weight: 500; transition: color 0.18s ease; white-space: nowrap; } .dw-bc-link:hover, .dw-bc-link:focus-visible { color: #1A3C34; /* Dazzlewood forest green */ text-decoration: underline; text-underline-offset: 3px; outline: none; } /* ── Home icon inside the link ── */ .dw-bc-home-icon { width: 12px; height: 12px; flex-shrink: 0; vertical-align: -1px; stroke: currentColor; } /* ── Separator › ── */ .dw-bc-sep { display: inline-block; margin: 0 8px; color: #C8C0B0; font-size: 13px; line-height: 1; user-select: none; flex-shrink: 0; } /* ── Current (last) crumb — no link ── */ .dw-bc-current { color: #1A3C34; font-weight: 500; /* Normann uses long product names — truncate gracefully */ max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Normann product page specifics ── Normann wraps the product summary in .summary.entry-summary The breadcrumb sits above the product images column */ .woocommerce div.product .dw-breadcrumbs-wrap { padding: 0 0 4px; margin-bottom: 0; } .woocommerce div.product .dw-breadcrumbs { margin-bottom: 18px; } /* ── Normann shop/archive page ── */ .woocommerce-page .dw-breadcrumbs-wrap { padding: 0; } /* ── Responsive ─────────────────────────────────── */ @media ( max-width: 768px ) { .dw-breadcrumbs { font-size: 11px; padding: 10px 0 12px; margin-bottom: 20px; } .dw-bc-sep { margin: 0 5px; } .dw-bc-current { max-width: 160px; } } @media ( max-width: 480px ) { /* * On very small screens, hide middle crumbs: * show only Home › … › Product Name * The JSON-LD schema in always has the full chain. */ .dw-bc-item:not(.dw-bc-home):not(.dw-bc-current) { display: none; } /* Replace hidden middle crumbs with an ellipsis */ .dw-bc-home + .dw-bc-item:not(.dw-bc-current) + .dw-bc-sep::before { content: ' … '; color: #C8C0B0; } .dw-bc-current { max-width: 140px; } } /* ── Dark mode ── */ @media ( prefers-color-scheme: dark ) { .dw-breadcrumbs { color: #888070; border-bottom-color: #2A2520; } .dw-bc-link { color: #80A880; } .dw-bc-link:hover { color: #A8CCA8; } .dw-bc-sep { color: #555048; } .dw-bc-current { color: #D0C8BC; } }