/* Proshine: red for actions and motion, gold for display type and prices.
   Load after the page styles. Keep layout and interaction rules in their own files. */
:root {
  --red: #ed3536;
  --action-red: #c62832;
  --action-red-hover: #ad1f29;
  --red-text: #ff7679;
}

/* Darker red keeps even small white button labels readable. */
.btn:not(.outline),
.nav .menu > li:last-child > a,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not(.has-text-color) {
  background: var(--action-red);
  border-color: var(--action-red);
  color: #fff;
}
.btn:not(.outline):hover,
.nav .menu > li:last-child > a:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
  background: var(--action-red-hover);
  border-color: var(--action-red-hover);
  color: #fff;
}
.btn.outline:hover {
  background: #281416;
  border-color: var(--red);
  color: #fff;
}
.comments-area .submit, .search-submit {
  background: var(--action-red) !important;
  color: #fff !important;
}
.comments-area .submit:hover, .search-submit:hover {
  background: var(--action-red-hover) !important;
}

/* Fine red markers connect each section to the red in the shield. */
.kicker:before,
.reading-progress,
.scroll-line:after,
.slide-timer span,
.slide-dots button[aria-pressed=true] span,
.rail-meter > span {
  background: var(--red);
}
.text-link, .proof-line a { border-bottom-color: var(--red); }
.nav > a:not(.btn):hover,
.nav > a:not(.btn)[aria-current=page],
.nav summary:hover,
.nav summary:after,
.nav .menu > .current-menu-item:not(:last-child) > a,
.nav .menu > li:not(:last-child) > a:hover,
.nav .submenu-toggle,
.nav .sub-menu a:hover,
.dropdown a:hover,
.faq-list summary:after,
.package-inclusions summary > span,
.panel-link b { color: var(--red-text); }

/* Selected states and mouse controls stay visible without adding movement. */
.size-buttons button[aria-pressed=true],
.filter[aria-pressed=true], .filter:hover,
.rail-controls button[data-step="1"] {
  background: var(--action-red);
  border-color: var(--red);
  color: #fff;
}
.size-buttons button:hover,
.rail-controls button { border-color: #c95b60; }
.rail-controls button:hover:not(:disabled) {
  background: var(--action-red-hover);
  border-color: var(--red);
  color: #fff;
}
.play-pause:hover, .lightbox button:hover, .menu-toggle:hover {
  border-color: var(--red);
  color: var(--red-text);
}
.snap-rail, .table-scroll { scrollbar-color: var(--red) #303135; }
.snap-rail::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb { background: var(--red); }
.snap-rail::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--red-text); }

.service-panel.selected { border-bottom-color: var(--red); }
.price-card.ceramic, .package.featured { border-top-color: var(--red); }
.guide { border-top-color: var(--red); }
.closing {
  background: radial-gradient(ellipse at 100% 100%, #ed353620, transparent 60%), #101113;
}
.studio-location-stamp {
  border-top-color: var(--red);
  background: linear-gradient(145deg, #281719, #101112);
}
.studio-package-link { border-left-color: var(--red); }
.studio-jump a:hover { color: var(--red-text); }

/* The home feed and the Work page retain their distinct layouts. */
.instagram-stream, .instagram-stream-section { border-block-color: #ed353633; }
.instagram-stream {
  background: radial-gradient(ellipse at 50% 0, #ed35360a, transparent 58%), #090a0b;
}
.instagram-icon { border-color: #ed353680; color: var(--red-text); }
.instagram-arrow, .instagram-empty-icon { color: var(--red-text); }
.instagram-stream-nav {
  background: var(--action-red);
  border-color: var(--red);
  color: #fff;
}
.instagram-stream-nav:hover { background: var(--action-red-hover); }

/* Provider rules are scoped to the connected widget; never hide attribution. */
#instagram .es-carousel-arrow-control-container,
#instagram .es-load-more-button {
  background: var(--action-red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}
#instagram .es-carousel-arrow-control-container:hover,
#instagram .es-load-more-button:hover {
  background: var(--action-red-hover) !important;
}
#instagram .es-bullets-control-item-active { background: var(--red) !important; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.instagram-post:focus-visible, .instagram-stream-nav:focus-visible,
#instagram .es-card-container:focus-within { outline-color: var(--red); }
::selection { background: var(--action-red); color: #fff; }