/**
 * MulchPros Core — functional styles only. The child theme owns the brand look
 * (colors, type, radii come from brand tokens); this file just makes the
 * widgets work before theming and stay usable if the theme ever changes.
 */

/* Address chip + panel */
.mp-addr { position: relative; display: inline-block; }
.mp-addr__panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
	width: min(340px, calc(100vw - 24px)); background: #fff;
	border: 1px solid #c7d0da; border-radius: 8px; padding: 16px;
	box-shadow: 0 8px 40px rgba(30, 42, 56, 0.25);
}
.mp-addr__kicker { display: block; font-size: 10.5px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
.mp-addr__main { display: block; font-weight: 700; }
.mp-addr__input, .mp-hero-addr__input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; }
.mp-addr__result { margin-top: 10px; font-size: 13px; line-height: 1.5; }
.mp-addr__result.is-ok { background: #f2f5f8; border-radius: 4px; padding: 10px 12px; }
.mp-addr__result.is-error { color: #c6121f; font-weight: 600; }
.mp-addr__result-sub { display: block; color: #5a6b7e; font-size: 12.5px; }
.mp-addr__consent { font-size: 11.5px; color: #5a6b7e; margin: 10px 0 0; }

/* Hero card */
.mp-hero-addr__row { display: flex; gap: 8px; }
.mp-hero-addr__row .mp-hero-addr__input { flex: 1; min-width: 0; }

/* Fulfillment toggle */
.mp-fulfill { display: inline-flex; border: 1px solid currentColor; border-radius: 4px; overflow: hidden; }
.mp-fulfill__btn { border: none; background: transparent; padding: 0 13px; height: 42px; cursor: pointer; font: inherit; }
.mp-fulfill__btn.is-on { background: #003365; color: #fff; cursor: default; }

/* PDP fee box + install option */
.mp-fee-box { margin: 8px 0 10px; padding: 12px 14px; background: #f2f5f8; border-radius: 4px; }
.mp-fee-box__line { margin: 10px 0 0; }
.mp-fee-box__sub { margin: 6px 0 0; font-size: 12.5px; color: #5a6b7e; }
.mp-fee-box__change { background: none; border: none; padding: 0; margin-top: 7px; font-size: 12.5px; text-decoration: underline; cursor: pointer; color: #003365; }
.mp-install-box { border: 1px solid #c7d0da; border-radius: 4px; padding: 13px 14px; margin: 0 0 16px; }
.mp-install-opt { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; cursor: pointer; }
.mp-install-opt__label { font-weight: 600; }
.mp-install-opt__rate { color: #c6121f; }
.mp-install-opt__sub { flex-basis: 100%; font-size: 12.5px; color: #5a6b7e; }
.mp-install-qty { font-size: 12px; color: #5a6b7e; }

/* Calculators */
.mp-calc { border: 1px solid #c7d0da; border-radius: 8px; padding: 16px; margin: 18px 0; }
.mp-calc__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mp-calc__tab { border: 1px solid #c7d0da; background: #fff; border-radius: 999px; height: 38px; padding: 0 15px; cursor: pointer; font: inherit; }
.mp-calc__tab.is-on { background: #003365; border-color: #003365; color: #fff; }
.mp-calc__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.mp-calc__field span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.mp-calc__field input, .mp-calc__field select { width: 100%; box-sizing: border-box; height: 44px; padding: 0 10px; }
.mp-calc__out { font-size: 22px; font-weight: 700; color: #003365; background: #f2f5f8; border-radius: 4px; padding: 12px 14px; margin-top: 12px; }
/* Bed sections (owner 2026-07-29). The form is a grid, so a section has to be
   its own row or the shape selector and the dimensions of two different beds
   interleave into one line. */
.mp-calc__form { grid-template-columns: 1fr; }
.mp-calc__sections { display: grid; gap: 10px; }
/* ⚠ FLEX, NOT GRID. `repeat(auto-fit, minmax(110px,1fr)) auto` is INVALID CSS —
   auto-fit cannot be combined with an intrinsic track like `auto` — so the whole
   declaration was dropped and every field stacked full-width. Flex also handles
   the circle's hidden second field without leaving a gap where it used to be. */
.mp-calc__section { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mp-calc__section > .mp-calc__field { flex: 1 1 110px; min-width: 110px; }
.mp-calc__rmarea { align-self: end; height: 44px; width: 44px; border: 1px solid currentColor;
                   background: none; border-radius: 6px; cursor: pointer; opacity: .55; }
.mp-calc__rmarea:hover { opacity: 1; }
.mp-calc__addarea { background: none; border: none; padding: 0; font-size: 13px; font-weight: 600;
                    text-decoration: underline; cursor: pointer; justify-self: start; }
/* Depth and material sit side by side under the sections. */
@media (min-width: 560px) {
  /* Depth and material sit together under the sections rather than each
     claiming a full row. */
  .mp-calc__form > .mp-calc__field { display: inline-block; width: auto; min-width: 180px;
                                     margin-right: 10px; }
}
.mp-calc__actions { margin-top: 12px; }
.mp-calc__note { font-size: 12px; color: #5a6b7e; margin: 8px 0 0; }

/* Announcement bar */
.mp-announce { background: #002347; color: #fff; text-align: center; padding: 8px 16px; }
.mp-announce p { margin: 0; font-size: 12.5px; }

/* FAQ */
.mp-faq__item { border-bottom: 1px solid #c7d0da; padding: 10px 0; }
.mp-faq__item summary { font-weight: 600; cursor: pointer; }

/* Price list */
.mp-price-list__table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.mp-price-list__table td { padding: 8px 10px; border-bottom: 1px solid #f2f5f8; }
.mp-price-list__price { text-align: right; white-space: nowrap; font-weight: 700; }
.mp-price-list__asof { font-size: 12.5px; color: #5a6b7e; }

@media print {
	header, footer, .mp-announce, .mp-price-list__print { display: none !important; }
	.mp-price-list { font-size: 12px; }
}

/* ── Google rating row (PDP — the business rating, owner 2026-07-15) ── */
.mp-grating { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 2px 0 6px; }
.mp-grating b { font-size: 15px; }
.mp-grating__stars { color: #f5a623; letter-spacing: 2px; font-size: 13px; }
.mp-grating__label { color: #5a6b7e; font-size: 13px; }

/* ── Linked variations (HD-style axis rows: "Sold as" + Color/Size…) ── */
.mp-linked { display: flex; flex-direction: column; gap: 11px; margin: 10px 0 4px; }
.mp-linked__row { display: flex; flex-direction: column; gap: 6px; }
.mp-linked__axis { font-size: 12px; color: #5a6b7e; }
.mp-linked__axis b { color: #1e2a38; }
.mp-linked__pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-linked__pill { border: 1px solid #c7d0da; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: #1e2a38; text-decoration: none; line-height: 1.2; }
a.mp-linked__pill:hover { border-color: #003365; color: #003365; }
.mp-linked__pill.is-on { background: #003365; color: #fff; border-color: #003365; cursor: default; }

/* ── Install "how it works" modal ───────────────────────────────────── */
.mp-install-how { margin: 4px 0 0; }
.mp-install-how__open { background: none; border: 0; padding: 0; color: #003365; text-decoration: underline; font-size: 12.5px; cursor: pointer; font-family: inherit; }
dialog.mp-install-modal { max-width: 520px; width: calc(100vw - 40px); border: 0; border-radius: 10px; padding: 24px 26px; box-shadow: 0 18px 50px rgba(0, 20, 40, 0.35); }
dialog.mp-install-modal::backdrop { background: rgba(10, 25, 45, 0.55); }
.mp-install-modal h3 { margin: 0 0 8px; }
.mp-install-modal p { font-size: 13.5px; color: #5a6b7e; line-height: 1.55; margin: 0 0 8px; }
.mp-install-modal__steps { margin: 10px 0 0 18px; padding: 0; font-size: 13.5px; }
.mp-install-modal__steps li { margin: 6px 0; line-height: 1.5; }
.mp-install-modal__close { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #5a6b7e; }
.mp-install-modal__close:hover { color: #1e2a38; }

/* ── Condensed PDP meta row (owner 2026-07-16, the Home Depot pattern) ── */
.mp-pdpmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: #5a6b7e; margin: 0 0 6px; }
.mp-pdpmeta__dot { opacity: 0.55; }
.mp-pdpmeta__share { background: none; border: 0; padding: 0; color: #003365; cursor: pointer; font: inherit; }
.mp-pdpmeta__share:hover { text-decoration: underline; }
.mp-pdpmeta__stock { color: #1d7a3c; font-weight: 600; }
.mp-pdpmeta__unit { color: #1e2a38; }
.mp-pdpmeta__faq { color: #003365; }

/* Short-description collapse ("View more details", HD pattern). Covers
   Woo's template class AND Divi's description module wrapper. */
.mp-more-hidden { display: none; }
.woocommerce-product-details__short-description.is-open .mp-more-hidden,
.et_pb_wc_description.is-open .mp-more-hidden { display: list-item; }
.mp-more-toggle { background: none; border: 0; padding: 0; margin: 4px 0 0; color: #003365; text-decoration: underline; font-size: 12.5px; cursor: pointer; font-family: inherit; }

/* ── Blog-post template widgets (owner spec 2026-07-16) ─────────────── */
/* Byline: author · published · updated. */
.mp-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: #5a6b7e; margin: 2px 0 14px; }
.mp-byline__avatar { border-radius: 50%; }
.mp-byline__dot { opacity: 0.55; }
.mp-byline__updated { color: #1d7a3c; font-weight: 600; }

/* TL;DR — the answer-first box (content = the post excerpt). */
.mp-tldr { background: #f2f5f8; border-left: 4px solid #003365; border-radius: 4px; padding: 14px 16px; margin: 0 0 18px; }
.mp-tldr__head { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #003365; margin-bottom: 4px; }
.mp-tldr p { margin: 0; font-size: 15px; line-height: 1.55; }

/* Table of contents (sticky rail; scroll-spy adds .is-active). */
.mp-toc { background: #fff; border: 1px solid #c7d0da; border-radius: 8px; padding: 14px 16px; }
.mp-toc__head { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #003365; margin-bottom: 8px; }
.mp-toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.mp-toc li { margin: 0; }
.mp-toc a { display: block; padding: 5px 8px; font-size: 13.5px; color: #5a6b7e; text-decoration: none; border-left: 2px solid transparent; line-height: 1.4; }
.mp-toc a:hover { color: #003365; }
.mp-toc a.is-active { color: #c6121f; border-left-color: #c6121f; font-weight: 600; }
.mp-toc__l3 a { padding-left: 22px; font-size: 12.5px; }
html { scroll-behavior: smooth; scroll-padding-top: 170px; }

/* Companion video: thumbnail poster → iframe on click. */
.mp-video { margin: 0 0 18px; }
.mp-video__poster { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; border-radius: 8px; overflow: hidden; background: #000; }
.mp-video__poster img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.92; }
.mp-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 44px; background: #c6121f; border-radius: 10px; }
.mp-video__play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }
.mp-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.mp-video__label { display: block; margin-top: 6px; font-size: 12.5px; color: #5a6b7e; }

/* Share row. */
.mp-share { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid #e3e9ef; }
.mp-share__head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #003365; margin-right: 4px; }
.mp-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #c7d0da; border-radius: 50%; color: #1e2a38; background: #fff; text-decoration: none; cursor: pointer; font-size: 14px; }
.mp-share__btn:hover { border-color: #003365; color: #003365; }
.mp-share__copy.is-copied { background: #1d7a3c; border-color: #1d7a3c; color: #fff; }

/* Author box (E-E-A-T). */
.mp-authorbox { display: flex; gap: 14px; align-items: flex-start; background: #f2f5f8; border-radius: 8px; padding: 16px 18px; margin: 14px 0 0; }
.mp-authorbox__avatar { border-radius: 50%; flex-shrink: 0; }
.mp-authorbox__name { display: block; font-size: 15px; color: #1e2a38; }
.mp-authorbox__role { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #c6121f; margin: 1px 0 6px; }
.mp-authorbox p { margin: 0 0 6px; font-size: 13.5px; color: #5a6b7e; line-height: 1.55; }
.mp-authorbox a { font-size: 12.5px; }

/* Sidebar cards share the TOC look. */
.mp-post-sidebar .mp-hero-addr { max-width: none; border: 1px solid #c7d0da; box-shadow: none; }

/* ── Compact PDP fee box (owner 2026-07-17 — like the mobile band) ──── */
.mp-fee-box--compact { padding: 10px 14px; }
.mp-fee-box__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mp-fee-box--compact .mp-fulfill__btn { height: 30px; padding: 0 12px; font-size: 12px; }
.mp-fee-box__faq { font-size: 12px; color: #003365; white-space: nowrap; }
.mp-fee-box--compact .mp-fee-box__line { margin: 0; font-size: 13.5px; }
.mp-fee-box--compact .mp-fee-box__line i { color: #003365; margin-right: 4px; }
.mp-fee-box__change { margin: 0 0 0 8px; }
.mp-fee-box__prompt { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13.5px; color: #003365; cursor: pointer; }
.mp-fee-box__prompt i { margin-right: 4px; }
.mp-fee-box__edit { margin-top: 10px; }

/* ── PDP quantity stepper + unit (owner 2026-07-17) ─────────────────── */
.mp-qty { display: inline-flex; align-items: center; gap: 6px; }
.mp-qty__btn { width: 40px; height: 42px; border: 1px solid #c7d0da; border-radius: 4px; background: #fff; font-size: 19px; line-height: 1; cursor: pointer; color: #003365; }
.mp-qty__btn:hover { border-color: #003365; }
/* One field: number + unit inside a single bordered box (owner 2026-07-17). */
.mp-qty__field { display: inline-flex; align-items: center; height: 42px; border: 1px solid #c7d0da; border-radius: 4px; background: #fff; padding-right: 12px; }
.mp-qty__field:focus-within { border-color: #003365; box-shadow: 0 0 0 2px rgba(0, 51, 101, 0.18); }
.mp-qty .quantity { margin: 0; }
.mp-qty input.qty { height: 40px; width: 58px; text-align: right; border: 0 !important; box-shadow: none !important; outline: none; font-size: 16px; font-weight: 700; color: #1e2a38; background: transparent; }
.mp-qty__unit { font-size: 14px; font-weight: 600; color: #5a6b7e; margin-left: 5px; white-space: nowrap; }
.mp-qty__calclink { display: inline-block; margin: 6px 0 0 2px; font-size: 12.5px; color: #003365; text-decoration: underline; }

/* SKU chip (breadcrumb row, right column). */
.mp-pdpsku { font-size: 12px; color: #5a6b7e; }

/* ── Subcategory tiles ([mp_subcat_tiles], stone build 2026-07-17) ───── */
.mp-subcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 8px; }
.mp-subcats__tile { display: block; border: 1px solid #c7d0da; border-radius: 8px; background: #fff; overflow: hidden; text-decoration: none; transition: box-shadow 0.15s, border-color 0.15s; }
.mp-subcats__tile:hover { border-color: #003365; box-shadow: 0 1px 3px rgba(30, 42, 56, 0.1), 0 4px 16px rgba(30, 42, 56, 0.08); }
.mp-subcats__tile img { display: block; width: 100%; height: 96px; object-fit: cover; }
.mp-subcats__tile b { display: block; padding: 8px 10px 0; font-size: 14.5px; color: #1e2a38; line-height: 1.25; }
.mp-subcats__tile > span { display: block; padding: 2px 10px 10px; font-size: 12px; color: #5a6b7e; }
.mp-subcats__tile .mp-from-price { font-size: 12px; color: #5a6b7e; }

/* ── Product filter rail ([mp_product_filter], 2026-07-17) ───────────── */
.mp-filter { border: 1px solid #c7d0da; border-radius: 8px; background: #fff; padding: 0 14px 12px; }
.mp-filter__head { list-style: none; cursor: pointer; padding: 12px 0 10px; font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px; color: #003365; }
.mp-filter__head::-webkit-details-marker { display: none; }
.mp-filter__head i { margin-right: 6px; }
.mp-filter__label { margin: 10px 0 4px; font-family: 'Josefin Sans', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: #5a6b7e; }
.mp-filter__opt { display: block; font-size: 13.5px; color: #1e2a38; padding: 3px 0; cursor: pointer; }
.mp-filter__opt input { accent-color: #003365; margin-right: 4px; }
.mp-filter__count { margin: 10px 0 0; font-size: 12.5px; color: #5a6b7e; }
.mp-filter__clear { margin-top: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: #c6121f; text-decoration: underline; cursor: pointer; }

/* Compact tile skin inside the mega-menu stone panel (2026-07-17). */
.mp-mm-subcats .mp-subcats { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mp-mm-subcats .mp-subcats__tile img { height: 58px; }
.mp-mm-subcats .mp-subcats__tile b { padding: 6px 8px 0; font-size: 12.5px; }
.mp-mm-subcats .mp-subcats__tile > span { padding: 1px 8px 8px; font-size: 11px; }
.mp-mm-subcats .mp-subcats__tile .mp-from-price { font-size: 11px; }
@media (max-width: 980px) { .mp-mm-subcats .mp-subcats { grid-template-columns: repeat(3, 1fr); } }